Your AI coding agent can't see the page it just built.

How a session goes

The same loop a careful developer runs with devtools open, done by the agent, in seconds.

1. Look

   A screenshot of the page as it is, or a recording that keeps only the frames where something changed.

   framewatch_screenshot · capture

2. Name and act

   Every element on the page with a ref. The agent clicks e33 instead of guessing a selector.

   framewatch_snapshot · interact

3. Measure

   The box, the font, the rendered colours with a contrast verdict, the spacing and the alignment to neighbours.

   framewatch_inspect

4. Edit, then wait

   Save the file. FrameWatch returns the moment Vite has patched the open page, and the loop starts over.

   framewatch_wait_for

What you say, and what comes back

You talk to Claude Code as usual. It picks the tools. Every result below is real, trimmed only for length.

Snapshot of http://localhost:5173/billing — "Ledger — Team billing" — 31 elements, 8 interactive

- link "Overview" [ref=e5] → "#"
- link "Billing" [ref=e6] → "#"
- link "Members" [ref=e7] → "#"
- link "Settings" [ref=e8] → "#"
- textbox "Company name on invoices" [ref=e28]: Keko Food LLC
- textbox "Billing email" [ref=e30]: finance@keko.dev
- button "Save changes" [ref=e32]
- button "Cancel" [ref=e33]

Test the login with test@example.com and show me what happens.

A before and an after frame, the request the click made, what the console said, and a nudge to save the session so it never logs in by hand again.

framewatch_interact

click "#submit" on http://localhost:5173/login — 10.1% of the frame changed
Context — console: 1 entry; network: 1 request
Signed in? Save this session with framewatch_save_auth so every later call starts here.
Changed: 10.1% — region: 20,20 360x240
Console:
  [info] auth token stored
Network:
  POST http://localhost:5173/api/login → 200 (124ms)

Hot update landed after 1158ms: /src/App.vue — Vue 3.5.42 — route /login (login)

Every frame carries its reasons

A screenshot says something is wrong. The context from the same moment says why.

Quick start

Four steps, and the first one is the only install.

1. Register it with Claude Code

   claude mcp add framewatch npx framewatch-mcp-server

2. Let it see full results

   Claude Code caps a tool result at 25,000 tokens and counts images toward it, which holds about two screenshots of a real page. Raise it once in the shell you start Claude Code from, and add the line to your shell profile.

   export MAX_MCP_OUTPUT_TOKENS=100000

3. Start your app and ask

   Run your dev server as usual, open Claude Code in the project, and talk to it normally. It picks the tools itself.

   The header looks wrong on mobile. Check it at phone width and fix it.

   Open the settings page and tell me what you see.

4. Sign in once, if your app has a login

   Ask Claude Code to log in and save the session. From then on every tool opens pages already signed in, and says so.

   Log in at localhost:5173/login with my test account and save the session.

Not using Claude Code? Every other agent takes the same server, in its own config file.

Install in any AI coding agent

FrameWatch is a standard MCP server over stdio. Pick your agent; the snippet is the whole setup.

claude mcp add framewatch -- npx -y framewatch-mcp-server

{
  "mcpServers": {
    "framewatch": { "command": "npx", "args": ["-y", "framewatch-mcp-server"] }
  }
}

{
  "mcpServers": {
    "framewatch": { "command": "npx", "args": ["-y", "framewatch-mcp-server"] }
  }
}

{
  "servers": {
    "framewatch": { "type": "stdio", "command": "npx", "args": ["-y", "framewatch-mcp-server"] }
  }
}

[mcp_servers.framewatch]
command = "npx"
args = ["-y", "framewatch-mcp-server"]

{
  "mcpServers": {
    "framewatch": { "command": "npx", "args": ["-y", "framewatch-mcp-server"] }
  }
}

{
  "mcpServers": {
    "framewatch": { "command": "npx", "args": ["-y", "framewatch-mcp-server"] }
  }
}

{
  "mcpServers": {
    "framewatch": { "command": "npx", "args": ["-y", "framewatch-mcp-server"] }
  }
}

mcpServers:
  - name: framewatch
    command: npx
    args: ["-y", "framewatch-mcp-server"]

{
  "context_servers": {
    "framewatch": { "source": "custom", "command": "npx", "args": ["-y", "framewatch-mcp-server"], "env": {} }
  }
}

{
  "mcpServers": {
    "framewatch": { "command": "npx", "args": ["-y", "framewatch-mcp-server"] }
  }
}

Every client needs Node 20.9 or newer on the PATH. The first run downloads Chromium through Playwright; if that fails, run npx playwright install chromium once. Any agent not listed that can run a stdio MCP server takes the same npx -y framewatch-mcp-server command.

Eighteen tools, one browser

Grouped by what the agent is trying to do.

How it differs from a browser MCP

Playwright MCP and Chrome DevTools MCP give the agent a browser. FrameWatch gives it judgement about what it sees.

Questions