Automating Visual QA with Cursor
Cursor's Agent capabilities (powered by Claude 3.5 Sonnet or GPT-4o) have revolutionized how we write code. But when working on complex Next.js or React applications, verifying the visual impact of those changes is still a highly manual process.
Developers often write code, run npm run dev, open localhost, and click through their app to ensure nothing broke. This context switching slows down the agentic loop.
RegressionBot MCP for Cursor
By installing the RegressionBot MCP server in Cursor, you give the agent the ability to "see" your local application and verify its own changes before asking you for approval.
Step 1: Configuration
To add RegressionBot to Cursor, navigate to Cursor Settings > Features > MCP and click "+ Add New MCP Server".
- Name:
regressionbot - Type:
http - URL:
https://mcp.regressionbot.com/
Add a header row for authorization:
- Key:
Authorization - Value:
Bearer YOUR_API_KEY
Click Save and verify that the green status indicator lights up.
Step 2: The Agentic Workflow
Let's say you're refactoring a legacy CSS file to use Tailwind classes. You can give Cursor the following prompt:
"Refactor `globals.css` to use Tailwind utility classes. When you're done, use RegressionBot to run a visual comparison against http://localhost:3000 (which is running the new code) and our production site at https://my-app.com. Fix any visual deviations."
Cursor will:
- Make the necessary CSS changes.
- Call the RegressionBot MCP tool with the live-vs-live configuration.
- Wait for the visual regression job to complete.
- Read the AI-generated
regressionbotSummaryto understand exactly what shifted, changed color, or broke. - Iterate on its own code until the UI matches perfectly.
Pro Tip: Exposing localhost
If your local dev server is running on localhost:3000, RegressionBot's cloud workers won't be able to reach it directly. You can use ngrok, Cloudflare Tunnels, or simply push your branch to a Vercel/Netlify preview environment and point RegressionBot there!
Why not use Playwright?
Writing Playwright tests requires manual effort. Cursor is smart enough to write Playwright tests, but tests are brittle and require constant maintenance. RegressionBot eliminates the need for test code entirely by dynamically crawling the site and relying on AI vision models to evaluate correctness.