Handoff for developers
Visual feedback from a live page, read by your agent over MCP.
Install
Handoff is a browser extension, installed from the Chrome Web Store — the same link as every "Add to Chrome" button on this site. No account required to start: it mints a key the first time it runs.
Because it runs as an extension rather than a package, it works on any live page — production, staging, a client's site, or a page behind a login.
Connect your agent
One HTTP endpoint, standard Bearer auth. The extension's Connect AI agent screen prints this command with your own key already filled in — copy it from there, or substitute the key yourself:
claude mcp add --scope user --transport http design-review \
https://makhtriiptwkicmksbdr.supabase.co/functions/v1/mcp \
--header "Authorization: Bearer fbt_your_key"The server registers under the name design-review. Cursor and Codex point at the same endpoint and token through their own MCP config files — ~/.cursor/mcp.json and ~/.codex/config.toml respectively. Any other MCP client works the same way: no plugin per agent.
The loop
Point at the element
Click it on the running page and leave a severity and a sentence. The pin sticks to the element, not to a screenshot coordinate.
Context attaches itself
Selector, computed styles, HTML, console output, URL, viewport and a screenshot travel with the note automatically.
Your agent reads it and fixes it
It picks up every open pin over MCP, greps the repo for the selector, and lands the change locally.
The fix comes back on the same pin
The agent replies on the pin's thread with what changed and marks it resolved. You accept it or reopen it.
Example
A click-through mock of the interface below — not the extension running. It shows the shape of the loop; the real capture needs the extension installed on your own page.
click the button to leave a pin
Claude Code · via MCP: Fixed the contrast on the pro-plan button and removed the failing pricing-experiment call. Commit 4f21ac.
Button text is unreadable on the navy background.
No inline error when the email is invalid.
Link wraps to a second line at 768px.
What a pin carries
Everything a developer would open DevTools for, captured at the moment the pin is left.
| Field | Example | Where it comes from |
|---|---|---|
| selector | main section.hero button[data-plan="pro"] | generated from the DOM node you clicked |
| computed styles | color, background, padding, font-size | read from the element at pin time |
| HTML | HTML structure of the element | the node's markup, captured with the pin |
| console | [warning] Failed to load pricing experiment | page console output at pin time |
| URL | /pricing | the page's address when the pin was left |
| viewport | 1280 × 800 | browser viewport size at pin time |
| screenshot | attached automatically | captured of the page around the element |
| severity | High | set in the pin popover when the note is left |
A recorded walkthrough
Not part of the pin loop above: an agent can also record a click-through walkthrough of a flow and hand you a link. This one covers this very landing page, captured by our own CLI — unlike the mock earlier on this page, it is real output.
Recorded with handoff walk. See how these demos work →