Media
6 items
Description
Add comments on any webpage. Your coding agent reads them, with pixel-perfect context it can act on. // Comment on web pages and your AI agent (Claude Code, Codex, etc) reads them Pin visual-feedback comments to elements on any web page, a button that's the wrong colour, a layout that breaks on mobile, copy that needs a rewrite. Your coding agent (Claude Code, Codex, etc) reads them through a local MCP server and makes the changes. You'll no longer need to give your agent screenshots or massive descriptions like "the third button in the sidebar." Each comment carries the exact element selector, so your agent knows precisely what you meant. On React and Vue apps, comments also name the component that rendered the element, so your agent can go straight to the source file instead of hunting for it. // Why I built it If you're anything like me when you're building a website or prototype and iterating with your AI coding agent (Claude Code is my preferred agent), you find yourself giving your agent screenshots, or typing "the second button in the header, no, the other one". It can be slow and frustrating, targeting your AI agent to the elements on the page you want to change. That's where Pinback comes in: you click the exact elements on the page and say what you want. Each comment carries the specific context about the element, so your AI agent knows precisely what element you are talking about on the page. No more vague communication with Claude Code, Codex, etc. // How you use it 1. Open your webpage in Chrome. Click the Pinback icon and enable it for the tab (you'll need to grant it access for the site). 2. Pin comments to anything on the page: "make this bigger", "wrong green", "this overlaps on mobile". 3. Ask Claude Code or Codex: "Grab my Pinback comments." Your AI agent reads each comment, with its element context, through the MCP server. 4. Then tell your AI agent what you want it to do with the comments. Generally i'm wanting my agent to make adjustments to the code. 5. Your AI agent resolves the comments as it works on them. Reload the webpage, look at the result, drop the next round of comments. // It's not just for webpage building Pin comments while browsing any site, a competitor's product, a reference design, a client's current site. Then ask your agent to turn them into a teardown, a PRD, or a deck. //How it technically works The pinback-mcp server runs on your machine, started and stopped by your coding agent itself. It embeds a small HTTP collector that only listens on localhost. The extension syncs your comments to it; Your agent reads them through MCP tools (get_comments, list_origins, resolve_comment, clear_comments). //Private and secure - There are no remote servers, no accounts, no analytics. - The collector binds to localhost only and requires a pairing token. - Your comments live in `~/.claudback/` on your own machine. - I've no interest in commercialising this, it's just a helpful tool for the people. Requires the free `pinback-mcp` npm package (Node 20+) and a coding agent like Claude Code or Codex. Setup guide opens on install. Made by Andy Biggs (NZ) — www.andybiggs.net