How to use RegressionBot with Claude Code

Claude Code is an incredibly powerful CLI agent, but it has one major blind spot: it cannot physically "see" the UI it builds. When Claude refactors a shared CSS utility or updates a React component, it has no idea if it just broke the layout on 5 other pages.

Traditional visual regression tools like Percy or Chromatic aren't built for agents. They require manual human review to look at red pixel diffs. By the time a human reviews the PR, Claude's context is gone.

The Agent-Native Solution

RegressionBot bridges this gap. When you run RegressionBot against a preview deployment, it doesn't just generate a visual diff. Our vision models analyze the changes and generate a plain-English regressionbotSummary.

Claude can read this JSON output directly and immediately realize, "Ah, I must have accidentally removed the justify-center class from the hero flex container." It can then fix the code autonomously without you ever having to open a browser.

Step 1: Set up the MCP Server

To give Claude Code access to RegressionBot, you simply need to configure our production-ready MCP (Model Context Protocol) server.

# Add the RegressionBot MCP server to Claude Code
claude mcp add --transport http regressionbot https://mcp.regressionbot.com/ --header "Authorization: Bearer YOUR_API_KEY"

Provide your API key to Claude when prompted, or export it in your environment:

export REGRESSIONBOT_API_KEY="sk_live_your_key_here"

Step 2: Instruct Claude to Test

Once configured, you can simply tell Claude Code to test your deployments. You don't need to write any Playwright scripts or maintain a Storybook instance.

"Claude, I just deployed my branch to Vercel preview. Please use RegressionBot to run a visual regression test against https://my-preview-url.vercel.app and fix any layout issues it finds."

How it works under the hood

• Zero Code: Claude simply calls the run_regression_job tool via MCP, providing the URL.
• Parallel Crawling: RegressionBot crawls the sitemap and takes screenshots across desktop and mobile viewports in parallel.
• AI Analysis: If pixel diffs are detected, AI vision models analyze the before/after crops to explain the change.
• Autonomous Fixes: Claude reads the resulting regressionbotSummary and applies code fixes immediately.

By combining Claude Code with RegressionBot, you achieve a fully autonomous loop: Code → Deploy → Visual QA → Fix. Stop reviewing red pixels and let your agent do the work.