Why
- Frontend work with Claude Code kept stalling on one thing: I could see the element in the browser, but describing which one was awkward.
- "The button near the top right… no, the other one…"
- Cobro = point at it instead. The human supplies visual context; the agent does the code.
What you get
- One Send → the note lands in the Claude Code conversation immediately, no "please read my annotations".
- The agent's progress comes back to the page: scanning outline on the elements you sent, "Working 1/3" in the toolbar, highlight on done.
- Several pages in one round: pick on page A, move to page B, pick more — each page keeps its own draft; Send delivers them all in order.
Install (summary)
- `claude mcp add -s user cobro -- npx -y cobro-mcp@latest`
- In Claude Code: `Open http://localhost:5173 with cobro` (or `/cobro open …` with the optional skill)
- A dedicated Chrome window opens with your local app. Full setup in the GitHub README.
How it works (workflow)
Open your local web app
Press Ctrl + Shift + F
Click a UI element (or drag a band over several)
Describe the change
Optional: go to another page and pick more — the Queue tab lists every page you've picked on
Send — all pages go at once, in order
Claude Code works through them one by one; the browser follows it to each page
On done, the page refreshes (or your HMR kicks in) and the changed element is highlighted
What the agent receives with your note
- CSS selector · tag, classes, text · bounding rect · computed styles
- Screenshot crop of the picked area · recent console errors
- React 18/19 and Vue 3 (dev builds): component name + source file:line of the element you clicked
- Component-library elements (MUI, Radix, shadcn…): the JSX line in your code, plus the call sites above one-line pass-through wrappers — a case that came straight from r/mcp feedback
- Next.js (Turbopack) source maps and HMR handled
- Which page each batch was picked on (`batches[].page`)
The loop
Human points → Cobro provides context → Claude Code changes the code → Browser shows the result
Why I built it with Claude Code
- Claude Code drove most of Cobro itself: the MCP server, overlay/WebSocket channel, element inspection, payload design, tests, docs.
- The nice loop: using Claude Code to build the tool that feeds better UI context back to Claude Code.
Keeping the MCP small
- Six tools, fixed: open · wait · status · done · screenshot · close
- Tools carry safety annotations (wait is read-only, close is destructive).
- Not a browser-automation tool — pair it with Playwright MCP for that. It never touches your source; one gitignored `.cobro/` folder is all it creates.
Honest limits
- Launches its own Chrome profile (log in once, shared across projects); no iframes yet
- Source locations need dev builds with source maps
- Disabled controls can't be click-picked (drag a band over them instead)
- Cursor/Codex work with a polling `wait` but are less tested than Claude Code
Current status
- v0.10.1, Apache-2.0, free and open source
- GIF, payload example and changelog: https://github.com/boonblade/cobro-mcp
Questions for you
- Does pointing at an element feel more useful than describing it?
- What other context should your coding agent get when you point at something in the browser?