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({ sha: "9c2f41e…" })
    1 comparison · needs review
  4. happoget_comparison_details({ sha1: "a41d07b…", sha2: "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({ sha1: "a41d07b…", sha2: "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.

get_comparison_details
{
  "project": "web",
  "status": "needs review",
  "counts": { "diffs": 1, "added": 0, "deleted": 0 },
  "diffs": [
    {
      "before": {
        "component": "Header",
        "variant": "default",
        "target": "safari",
        "url": "https://happo.io/a/42/img/…"
      },
      "after": {
        "component": "Header",
        "variant": "default",
        "target": "safari",
        "url": "https://happo.io/a/42/img/…"
      }
    }
  ]
}

  • 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 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.

  • 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

Six 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 the diffs, added and deleted snapshots, ignored diffs, and the change in accessibility violations.
  • accept_diff / reject_diffNewDecides one diff at a time, 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. An agent that reads images can look at the pixels itself.

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?