Point an AI coding agent at a UI element on your local dev server
Describing a UI problem to a coding agent in words is the slow path. "The spacing under the third card is wrong" sends the agent hunting through your components. MarkLayer lets you click the element on your running localhost page and hand the agent the exact selector, computed styles, and framework component name, then watch it mark the annotation in progress and resolve it without leaving the page.
Install the MarkLayer extension, open your localhost dev server, drop a pin or inspect an element, and run one "claude mcp add" command. The agent reads the annotation with its selector and component name, fixes the code, and resolves the pin in place. Free, no account. Share links need a publicly reachable URL, so use staging or a tunnel when you want someone else to see the page too.
On this page
The problem
The gap is that your coding agent cannot see your screen. You know exactly which element is wrong, because you are looking at it, but conveying that costs a paragraph of prose, a screenshot the agent reads imprecisely, or a hand-copied selector from devtools. Then the agent goes quiet, and you have no idea whether it understood which element you meant until the diff lands.
Why MarkLayer fits developers running a local dev server alongside an AI coding agent
- The extension annotates localhost directly. It draws on the page in your browser, so there is no proxy or tunnel involved and your dev server never has to be reachable from the internet.
- The inspector captures a CSS selector, a text fingerprint, computed styles, and the detected React, Vue, or Svelte component: the context an agent needs to find the code, not just the pixel.
- The MCP loop runs both ways. The agent marks an annotation in progress, resolves it with a summary, or replies with a question, and the status changes on the pin in front of you.
- Annotations are threads, not one-shot prompts. A pin stays open with its history until it is resolved, so a half-finished fix does not vanish from the conversation.
- It works the same on staging and production, so the workflow you learn on localhost is the one you use when a designer or client is in the room.
- Free, with no account and no per-seat cost.
How it works
- Install the extension and open localhost. Add the MarkLayer Chrome extension and open your local dev server as usual (localhost:3000, localhost:5173, whatever your framework uses). Activate MarkLayer on the page.
- Point at the element. Use the Inspect tool to click the element that is wrong, or drop a comment pin on it. Inspect captures the selector, computed styles, and the framework component behind that node.
- Say what should change. Type the instruction on the annotation: "this card should align with the one above it." The element context travels with your sentence, so you never describe the location in prose.
- Connect your agent once. Open Share and copy the Claude Code command: "claude mcp add --transport http marklayer https://marklayer.app/s/<id>/mcp". Run it in the project directory. Nothing gets installed, because the share link is the MCP server. Clients that only run local servers take the npx command from the same panel.
- Let the agent work the room. Ask the agent to watch the room. It pulls each annotation with its selector and component name, marks the one it is working on as in progress, edits the code, and resolves the pin with a summary reply.
- Reload and confirm. Your dev server hot-reloads the fix. Re-inspect the same element to confirm, or reopen the pin if it is not right; the thread is still there.
Frequently asked questions
- Does MarkLayer work on localhost?
- Yes. The Chrome extension annotates any page your browser can open, including localhost dev servers on any port. The extension draws the overlay client-side, so nothing about your local page is sent through a proxy for you to annotate it.
- Can someone else open a share link to my localhost page?
- No, and no tool can do this honestly. A share link is rendered by fetching the page server-side, and marklayer.app cannot reach your machine. Annotations on a localhost page still sync to the room, so your AI agent sees them, but a human viewer cannot load the page itself. To put another person on the same page, point MarkLayer at a staging URL or expose your dev server through a tunnel such as cloudflared or ngrok and annotate the tunnel URL instead.
- How is this different from stagewise or other localhost agent toolbars?
- They solve the developer half of this: point at an element in your own dev app and pipe context to your agent. MarkLayer does that too, and also works on staging and production URLs, keeps annotations as threads with statuses, and lets the agent report progress back into a room other people can be in. If you never need anyone but yourself and your agent, the difference is small; the moment a designer, PM, or client has to leave the feedback, it is the whole difference.
- What exactly does the agent receive?
- For each annotation: your instruction, the CSS selector, a text fingerprint that survives DOM changes, the element position and size, computed styles, and the detected React, Vue, or Svelte component name where one is found. Console and network logs are not captured today.
- Which agents can connect?
- Anything that speaks MCP. A client that accepts a remote server URL connects to the share link plus /mcp with nothing installed, and Claude Code does it in one command. Clients that only run local servers take "npx -y marklayer-mcp --room <id>" in their MCP config, from the marklayer-mcp package on npm.
- Can the agent close annotations on its own?
- Yes. The MCP server exposes acknowledge, resolve, dismiss, and reply, so the agent can mark work in progress, resolve a pin with a summary, dismiss one with a reason, or ask a question without changing status. Every change shows up live for the humans in the room. There's a fifth status, approved, reserved for the human confirming the fix; see the [full MCP setup guide](/guides/claude-code-visual-feedback) for the complete tool reference.
Other use cases
Try MarkLayer
Paste any URL at marklayer.app and annotate the live page in your browser. No install, no account, no sign-up. Recipients of your share links don't need to install anything either.
Annotate a page