Web-Apps
Margin pins client comments to the element, stores selector, screenshot and device, and passes it all via MCP to coding agents like Claude Code.
Animation from the landing page: the client pins a comment on her phone, the agent reads it via MCP and replies, then it gets checked off.
8 h 32 min
from the first commit to the version for internal use
git log, commits db3b24e and a022582, Oct 6, 2026
28.7 KiB
is the compressed size of the widget, with no dependencies
esbuild build of dist/widget.js, gzip -9, Oct 9, 2026
100
Lighthouse score for mobile performance, median of 5 runs
Lighthouse 12.8.2, margin-comments.com, Oct 9, 2026
The starting point
Even if you build websites with coding agents like Claude Code, Codex or Cursor, client feedback still arrives the old way: as a screenshot with a red arrow by email, as a Slack message or as a PDF. Before the agent can fix anything, a person has to translate which page, which element, which viewport and which browser the client means.
I wanted to get rid of that translation step in my own projects. So I built Margin, first as an internal tool and using only Cloudflare services. Two conditions were set from the start: clients don't need an account, and an agent only gets the permissions I give it.
Approach
01
In comment mode, one click pins the feedback to the element the client means. Margin also stores up to five verified selectors, the URL, viewport, pixel density, browser and color scheme. If the widget can no longer find an element after a redesign, it searches by text and, as a last resort, by the stored position.
Animation from the landing page: the highlight glides onto an element, the pin jumps to the click point, and the input field opens.
02
After submission, the Worker opens the page in Cloudflare Browser Run with the client's viewport, pixel density, color scheme and scroll position. It hides common cookie banners, waits for images, fonts and animations, and then draws in the outline and the pin. My first version redrew the DOM onto a canvas and got GSAP and scroll animations wrong.
Server-rendered screenshot in the dashboard: the commented element has a dashed outline, and the pin sits at the click point.
03
The same Worker runs an MCP server with six tools: four read, two write, none deletes. The agent fetches the comment, selector, device context and screenshot, fixes the issue and replies right below the comment, where the client sees the reply too. A token is valid for one project, starts out read-only and expires after 90 days.
In the dashboard, the reply from Claude Code sits below the client's comment: the agent read the comment via MCP and checked the page at 390 × 844 pixels.
04
Clients reach the widget through a personal link and never see the dashboard. They can only resolve their own comments, and the server checks this, not the widget. Checking off is a single motion: the checkmark draws itself, the row and the pin dissolve into smoke, and the list closes up beneath it.
In the widget on a demo website, a comment gets checked off: the row and the pin dissolve into smoke, and the list closes up.
Result
Margin is in use in my own projects, and the landing page is collecting a waitlist. I haven't measured yet how much time it saves per feedback round.
What I have measured is the technology. On mobile, the landing page's Lighthouse median over five runs is 100 for performance and 100 for accessibility, and nothing shifts while it loads. The widget is 28.7 KiB compressed, and all 25 unit tests pass.
Cloudflare Workers, Cloudflare D1, Cloudflare R2, Cloudflare Access, Cloudflare Browser Run, Cloudflare Email Service, MCP, React, Hono, Astro
Testimonial
More case studies
Free 30-minute check
The quickest way to sort out the rest is a conversation: 30 minutes by video call, no sales pressure.
Prefer email? [email protected]
