Circle a button. Point at a heading. Type "make this tonal". Pinta hands the annotation to your coding agent — Claude Code, Cursor, Aider, or any MCP-compatible tool — which edits the matching source files for you.
The extension talks only to the companion. The companion talks to any agent. Nothing is hard-wired to a vendor.
Open the side panel. Press Alt+S to pick an element, or Alt+P to draw — arrow, rect, pen, pin. Type a comment per annotation.
Selectors and nearby text are usually enough — screenshot is opt-in (auto-on for drawings). The session is posted to the companion at localhost:7878.
Your agent (woken via push) presents a per-file plan, applies after you confirm, and the side panel auto-reloads the tab once HMR detects the changes.
Phases 0–5 of the spec are live. Source mapping (Phase 6) and polish (Phase 7) are next.
Svelte 5 + CRXJS. Side panel, popup, content-script overlay. Drawing canvas isolated in a Shadow DOM root so host CSS can't leak in.
Hover-highlight, click-to-lock, computed selector, captured outerHTML, computed styles, and nearby text for grep fallback.
Arrow, rectangle, pen, pin. Page-relative coords; drawings translate with scroll. Edge-aware comment popup positioning.
Scroll-and-stitch capture, composited with annotations baked in. Off by default to save ~1.5–2k vision tokens; auto-locks-on the moment a drawing lands in the batch.
Node 20+. Native HTTP, WebSocket via ws, MCP via the official SDK. Sessions persisted as JSON in .pinta/sessions/. npx pinta-companion . — no clone needed.
Claude Code skill ships with the repo. MCP server for Cursor / Cline / Continue / Zed / Windsurf. Aider poll script. Copy-to-clipboard for claude.ai web / ChatGPT. HTTP API is the floor.
Side panel detects Vite, Webpack/Next.js, and Parcel HMR clients on the active tab and offers to refresh once the agent's edits land. Each annotation card flips to ✓ as it's applied.
Popup, side panel, and this landing page. Warm cream by day, indigo/violet by night, brand pink on either. Picks up prefers-color-scheme on first run; one-click toggle thereafter.
The Claude Code skill defaults to push (/pinta) — wakes the agent the moment the companion has a session. Sandboxed setups can fall back to long-poll with /pinta --polling.
Run a companion per project — each picks the next free port (7878, 7879, …) and registers in ~/.pinta/registry.json. Side panel auto-routes the active tab via .pinta.json URL patterns; the /pinta skill finds the companion whose root matches the agent's pwd. No more wrong-project submits.
Extension knows nothing about agents. Companion knows nothing about specific agents. Agents know nothing about the extension. That separation is the entire point.
The extension only knows about the companion.
The companion is generic — no agent-specific logic.
Agents read sessions, present plans, then edit. HMR closes the loop.
Each integration below works against the same running companion — no extension changes, no rebuild.
| Agent | Integration | Status |
|---|---|---|
| Claude Code | Skill (~/.claude/skills/pinta/) — push by default (/pinta), long-poll fallback (/pinta --polling) |
Reference, V1 |
| Cursor / Cline / Continue / Zed / Windsurf | MCP stdio server (pinta-mcp) proxies the companion |
Shipped V1 |
| Aider | Poll script under adapters/aider/ |
Shipped V1 |
| claude.ai web / ChatGPT / etc. | Side-panel Copy button — formats the session as markdown for paste-into-chat | Shipped V1 |
| Anything else | HTTP API (/v1/sessions/poll, /v1/sessions/:id/status) |
Universal floor |
Install the Chrome extension, run the companion in your project, annotate. Node 20+ and Chrome (or any Chromium-based browser).
# 1. Install the extension
# Chrome Web Store: https://chrome.google.com/webstore (search "Pinta")
# 2. Run the companion in your project root
npx pinta-companion .
# 3. Open Pinta in your browser, annotate, hit Submit
# Then in Claude Code: /pinta
For Cursor / Cline / Continue / Zed, add the MCP bridge to your agent's config:
{
"mcpServers": {
"pinta": {
"command": "npx",
"args": ["-y", "-p", "pinta-companion", "pinta-mcp"]
}
}
}
Want to hack on Pinta itself? See Development in the README — clone, npm install, npm run build, load unpacked.
V1 covers the core loop end-to-end. Next milestones, in priority order.
Drag-to-reorder annotations, group by file in the side panel, undo via git, plan-then-execute toggle.