About Mantis: AI-Powered Visual QA for the Modern Web

Submitting for General HTN, Cohere, and Warp

πŸ’‘ Why We Built This Traditional accessibility and UI testing tools rely on static rules or DOM inspection. They miss the hardest problems, such as the latent visual bugs that only appear under specific interactions or screen states. Overflowing text, clipped buttons, or broken layouts on certain viewports are invisible to linters and nearly impossible to catch without expensive manual QA passes.

As developers, we wanted something better:

  • A crawler that sees the web like a human does.
  • A system that flags subtle UI and accessibility regressions before they reach production.
  • A tool that integrates into our CI/CD pipeline with zero friction.

Mantis is that system.

βœ… AI Vision for UI Bugs β€” Mantis captures page states, runs them through multimodal AI models, and detects issues that traditional tools miss: off-screen elements, overlapping components, broken images, or disabled interactions.

βœ… Seamless Dev Workflow Integration β€” drop it into GitHub Actions or your CI of choice. Every PR is tested, and results show up right where developers work.

βœ… Automated Crawl & Interaction β€” Mantis uses headless browsers to explore your entire site with real interactions (click, scroll, resize), surfacing problems you’d never catch with single-page snapshots.

What We Learned Building It

This project pushed us to merge browser automation, AI vision, and developer experience design: Computer Vision for QA: Prompt-engineering multimodal models to spot UI issues humans care about. Async Crawling & Interaction: Efficient BFS exploration with Playwright, dynamically resizing viewports and capturing states. Developer-First DX: Designing reports that are not just accurate but actionable β€” linking issues directly to DOM nodes, with fix suggestions developers can commit.

Architecture Highlights

Orchestrator: BFS-powered crawler with smart link discovery and session management Playwright Engine: Simulates real user behavior β€” click, scroll, resize β€” for realistic coverage AI Inspector: Vision model pipeline that flags broken or inaccessible layouts Developer Reports: Rich HTML dashboards, JSON exports, and CI-friendly summaries

Impact on Developer Workflows

Catch Bugs Before Merge: Developers see issues inline in their PR, no separate tool or dashboard needed. Reduce QA Load: Automated checks cover what used to take hours of manual review. Improve Release Confidence: Every deploy ships with a visual health check.

Future Roadmap

We see Mantis evolving into a continuous visual health monitor for your product:

  • Real-time production monitoring with regression diffs
  • Framework-specific plugins (Next.js, React, Vue)
  • Collaborative annotations and fix tracking

Mantis is more than a crawler. It’s a developer co-pilot for visual quality, built to make web experiences seamless and accessible by default.

Built With

  • axe-core
  • cohere
  • playwright
  • python
Share this project:

Updates