staging.studio.devComment mode
01
Your client clicks what they mean
In comment mode, a click pins the comment to that exact element on the live or staging site. Try it: click an element on the page.
Website feedback for AI coding agents
Your clients point at it.Your agent fixes it.
Clients pin comments to elements on your live or staging site. Margin stores the selector, a screenshot, the viewport and the browser. Your agent reads all of it over MCP, makes the fix and replies in the thread.
One email when your invite is ready. Nothing else. Privacy
Connects to these agents over MCP
Claude Code
Codex
Cursor
GitHub Copilot
Windsurf
Gemini CLI
01 How it works
From a client's click to a fix in review.
Margin sits between the people who see the problem and the agent that fixes it.
#04 Close menu0%
- selector
- viewport
- browser
- build
02
Margin captures the context
Selector, screenshot, viewport, browser and build are saved with every comment.
margin · MCP
Every MCP clientMCP
4 read tools · 2 more with write access
03
Any agent picks it up over MCP
Claude Code, Codex, Cursor and other MCP clients read the same comments through the same tools.
src/components/site-nav.tsx+6 −2
<button aria-label="Close menu" onClick={() => setOpen(true)} onClick={() => setOpen(false)}>
Claude Code replied on #04
Fixed the close button. Checked at 390 px in Safari.
Moved to In review
04
The agent fixes it and replies
It edits your code, then answers in the thread, so the client sees what changed and how it was checked.
To do2
In progress1
In review1
#03/pricingTighten the pricing tableClaude Code
Claude CodeResolved1
Activity
- Claude Code moved #03 to In review
- LLena resolved #02
05
You check it, the comment closes
Every comment moves from To do to Resolved, and each step lands in the activity log. Click a card to move it.
02 Why Margin
Your agent can't fix a screenshot with a red arrow.
The same five pieces of feedback, once sent by email and once pinned in Margin. Drag the divider to compare.
By emailScreenshot attached
Which element“The button at the top”
Which pageA cropped screenshot, no URL
Which device“On my phone”
What it looks likeA red arrow on a blurry crop
Is it fixed“Did you see my email?”
In MarginOne comment
Which elementa.cta-primary, plus 4 fallback selectors
Which page/pricing on staging, build 9f3c2e1
Which deviceSafari 26, iOS, 390 × 844 @3x
What it looks likeRendered at 390 px, element outlined
Is it fixedAgent reply in the thread, In review
Drag the divider, or focus it and use the arrow keys
03 Setup
Works with the agent you already use.
One script tag on the site, one link for your client, one MCP entry for your agent.
- layout.html
<script src="https://app.margin-comments.com/widget.js" data-project="YOUR_PROJECT_ID" data-environment="staging" defer></script>01Add one script tag
Paste it into your staging layout. On a live site, a small loader stays silent until a reviewer opens review mode.
Guests · Studio Nord
LLenaLast visit 2 h agoActive?margin=1#margin_invite=…
Link valid for 90 days
02Send your client a link
A personal invite for one project. No account, no password. Revoke it and access ends at once.
$ claude mcp add --transport http margin …
03Connect your agent
Create a token in the dashboard, read-only by default, and add Margin as an MCP server.
Pick your agent for its config
04 Security
Agents get the access you give them, nothing more.
Margin speaks MCP over Streamable HTTP with a bearer token. Every token belongs to one project, starts read-only and expires.
- 01
Read-only by default
Write access is a separate token you choose to create.
- 02
One project per token
An agent working on one client never sees another client's feedback.
- 03
Feedback is data
The server and every tool description tell the agent that comments, screenshots and page text are untrusted, never instructions.
- 04
Nothing to delete
No tool deletes feedback, creates projects or changes which sites may load the widget.
- 05
Tokens expire
Tokens run for 90 days, are stored as SHA-256 digests and can be revoked at any time.
| Tool | Access | Returns |
|---|---|---|
| list_projects | Read | The project this token belongs to |
| list_comments | Read | Comments with page, anchor, viewport and status. Filterable, paginated. |
| get_comment | Read | One comment with its replies and activity |
| get_screenshot | Read | The rendered screenshot as an image |
| add_reply | Write | A reply attributed to the agent |
| update_comment | Write | New status, priority or tags, logged in the activity |
05 Waitlist
Margin is in private use. Get an invite.
Leave your email and get one message when your invite is ready.
No newsletter. Your address is only used for the invite. Privacy
06 FAQ
Before you join.
Any MCP client that connects over Streamable HTTP with a bearer token, for example Claude Code, Codex, Cursor, GitHub Copilot, Windsurf and Gemini CLI. Clients that only support OAuth can't connect yet.
A read token only reads. A write token can reply and change status, priority and tags, and every change lands in the activity log. No token can delete feedback.
Margin labels comments, page text, URLs and screenshots as untrusted data in its server instructions and in every tool description, so your agent sees that warning before it reads any feedback.
No. Each client gets a personal invite link for one project. They comment and reply on any page and resolve their own comments. Revoke the link and access ends immediately.
In comment mode, they press C or right-click anything. Margin highlights the meaningful element, the link rather than the icon inside it, and Alt+↑ widens the selection.
Yes. One project covers production, staging and preview URLs. Comments are grouped by page across all of them, so feedback from staging is still there after you ship.
On Cloudflare: comments in D1, screenshots privately in R2. Screenshots of resolved comments are deleted after 30 days. Comments and threads stay.
Server screenshots can't reach pages behind a login, so reviewers upload a screenshot there instead. Pins and device context work as usual.