MCP server

Agents that check their own work.

Claude Code, Cursor, and other agents write UI in minutes. They can look at a screenshot, but only of the page they have open, in one browser. Happo’s MCP server hands them every diff in the pull request, in every browser you test, so they catch their own regressions and hand you a pull request that’s ready for review.

Start for free

Included on every plan, the free one too.

  1. You

    Restyle the pricing cards and open a pull request. Then go through what Happo finds.

  2. Agent

    Opened the pull request at 9c2f41e. Happo has run in CI, so I’m reading its results.

  3. happoList Comparisons for SHA 9c2f41e…
    1 comparison · needs review
  4. happoGet Comparison Details a41d07b… → 9c2f41e…
    3 diffs
    PricingCard / featured · Chrome: the new card style
    PricingCard / featured · Firefox: the badge wraps onto two lines
    PricingCard / featured · accessibility tree: the heading dropped to level 4
  5. Agent

    The badge and the heading level were my mistakes. Fixed both and pushed 1d8b3a0 to the pull request.

  6. happoGet Comparison Details a41d07b… → 1d8b3a0…
    1 diff left: the new card style
  7. Agent

    The one diff left is the restyle you asked for. The pull request is over to you.

An agent restyles the pricing cards and opens a pull request, reads Happo’s diffs from CI through the MCP tools, fixes two regressions, and leaves the intended diff for a person to review

The loop

It looks before you do.

An agent checks what it thinks to check: the tests, maybe the page it changed, in one browser. Happo’s run in CI covers every component in every browser you test, and what a screen reader hears, and the agent reads all of it before it says it’s finished.

  1. Push

    It pushes to the pull request

    Happo runs in CI on the agent’s commits, like on anyone else’s. No new tests, and nothing in your setup changes.

  2. Look

    It reads the diffs

    The agent finds the comparison for its commit and opens each diff: the screenshots before and after, new accessibility violations, and changes to the accessibility tree.

  3. Fix

    It fixes its own misses

    When a change wasn’t meant, it fixes the code and pushes again, until the only diffs left are the ones you asked for. Then it’s your turn.

What it reads

The same diffs you review.

Every tool reads what Happo already worked out for the pull request. The agent gets facts it can trace to the exact change, not another model’s guess at what changed.

PricingCard / featuredFirefox

Before, the Most popular badge fits on one line. After, it wraps onto two, and the heading dropped from level 3 to level 4.

  • Where it broke

    Each diff names the component, the variant, and the browser or viewport it was taken in, so the agent knows exactly where to look.

  • The screenshots too

    The before and after images of every diff are available to the agent, so one that reads images can look at the pixels itself.

  • What a screen reader hears

    New accessibility violations and changes to the accessibility tree arrive in the same comparison as the visual diffs.

New What changed

It knows how much really changed.

Happo measures every diff it finds: how much changed, where, and whether anyone could see it. Your agent gets the same measurements the compare page sorts by, so it spends its time on the diffs that matter.

Comparison3 diffs, biggest first
  1. Header / defaultSafariContent added near the top
  2. Footer / defaultChromeChanged in 2 places
  3. Avatar / smallFirefoxOnly anti-aliasing

  • The biggest changes first

    Diffs arrive in the order the compare page shows them: new accessibility violations first, then the ones that changed most. The agent starts where it matters.

  • Noise, called out

    When a diff is only anti-aliasing, or a color change too small to see, Happo says so. The agent doesn’t have to squint at it to decide.

  • Exactly where to look

    Each change comes with its place in both screenshots, so the agent looks at the part of a long page that changed instead of reading all of it.

New Diff by diff

Share a big review with your agent.

Your agent can accept or reject one diff at a time, the same verdict you give each diff on the compare page. Ask it to take the diffs it understands and leave the rest to you.

Comparison5 diffs
  • Header / defaultChromeAccepted
  • Header / defaultSafariAccepted
  • Header / compactiOS SafariAccepted
  • SearchField / focusedFirefoxYours to review
  • Checkout / defaultChromeYours to review

  • It takes its share

    The agent accepts the header diffs it made on purpose, and leaves the search field and checkout for someone who knows them.

  • One verdict for the same change

    Diffs that changed the same way, across browsers and stories, come to the agent as one, just as the compare page groups them. It looks once and decides them all.

  • The comparison follows the verdicts

    One rejected diff rejects the comparison, and once every diff is accepted it’s approved, just as on the compare page.

  • Blockers still block

    If render errors or new accessibility violations hold approval back, the comparison stays in review, and the agent is told why.

Your tools

Bring your own agent.

Your agent already has your code, the pull request, and the reason for every change. The MCP server brings Happo’s diffs to it, so you review with the AI tools you choose, without giving another tool access to your code.

  • The agent you already use

    Claude Code, Cursor, Claude Desktop, ChatGPT, or any client that speaks MCP. Keep the one your team works in, and switch when you want.

  • It knows what to expect

    The agent has the code change in front of it, so it can tell the diffs it meant to make from the ones it didn’t, and say why.

  • Your code stays with you

    Happo never needs access to your repository. Your agent brings the context, and Happo brings the diffs.

  • Nothing new in CI

    Happo runs on every pull request the way it does today. The agent reads the same results your reviewers do.

Tools

What your agent can do

Seven tools, each a step a person takes when reviewing a pull request in Happo.

  • List Comparisons for SHAFinds every Happo comparison for a commit, across your projects.
  • Get Comparison DetailsReads every diff in the order to review it, with how much changed, which diffs are only noise, and the change in accessibility violations.
  • Get Diff MeasurementsNewShows exactly where a diff changed in each screenshot, so the agent looks at the part that matters.
  • Accept Diff / Reject DiffNewDecides one diff, or every diff that made the same change, so your agent can take its share of a big review.
  • Accept Comparison / Reject ComparisonResolves the whole comparison, when you want it to.
  • Report FlakeMarks a spurious diff as a flake, so it is ignored from then on.
  • Get AccountsLists the Happo accounts the connection may act on.

Setup

One URL. No tokens.

Happo hosts the server at https://happo.io/api/mcp. Add it to your agent, then sign in to Happo in your browser the first time the agent uses it.

Claude Code

Terminal
claude mcp add --transport http \
  happo https://happo.io/api/mcp

Cursor

.cursor/mcp.json
{
  "mcpServers": {
    "happo": {
      "url": "https://happo.io/api/mcp"
    }
  }
}

Claude Desktop

Settings › Connectors › Add custom connector
https://happo.io/api/mcp

Any MCP client that supports remote servers with OAuth connects the same way. Set up the MCP server

FAQ

Questions, answered

Which agents work with Happo?

Any MCP client that supports remote servers over Streamable HTTP with OAuth sign-in: Claude Code, Claude Desktop, Cursor, ChatGPT, and others.

Does Happo get access to my code?

No. Your agent already has your code and reads Happo’s diffs next to it. Happo never needs access to your repository.

Do I need to change my Happo setup?

No. The server reads the comparisons your CI already creates. If Happo runs on your pull requests today, your agent can read them today.

Will my agent approve its own changes?

Only if you ask it to. Approving through the MCP server is the same as approving in Happo yourself, and it’s recorded under your name. Most teams have the agent fix what it broke and leave the approval to a person.

Can the agent see the screenshots?

Yes. The before and after images of every diff are available to it, and so is the accessibility tree where Happo captured one. Happo also tells it where in each image the change is, so an agent that reads images can go straight to the pixels that changed.

Does the MCP server cost extra?

No. It’s included on every plan, the free one too. Reading diffs through it doesn’t use any snapshots. See pricing.

How do I disconnect an agent?

Remove it under Connected applications on your account’s API tokens page. The setup guide has the details.

Hand off the first look.

Add Happo to your agent in a minute, and the next pull request it opens comes to you already checked.

Start for free

Start free with 5,000 snapshots a month. No credit card needed.

Need help?