MCP Server

Active

Apache-2.0

MarkLayer MCP Server

io.github.thevrus/marklayer

Turn any webpage into a collaborative review board—AI agents can work annotations as a to-do list.

What is the MarkLayer MCP server?

MarkLayer is a web annotation tool that lets you draw, highlight, and comment on live webpages, then share one link for real-time collaboration. An AI agent can connect via the marklayer-mcp MCP server to watch annotations and acknowledge, fix, and resolve them like a work queue. Every mark carries the exact element context the agent needs to act.

MarkLayer transforms webpage feedback into actionable work for AI agents. Draw or highlight on any live page, pin threaded comments, and share a link—no sign-up required. Connect an agent via MCP to watch the annotation queue, acknowledge items, make fixes, and resolve them with summaries. Humans and AI work the same board in real time, with full element context (selectors, styles, layout) attached to each comment.

How to install MarkLayer

Copy-paste configuration for popular MCP clients.

transport: stdio

Config generated by PluginBench — verify against the source before use.

Environment / auth

MARKLAYER_ROOM
Same as --room: the share URL or room id to join at startup.
MARKLAYER_API_BASE
Override the MarkLayer worker base URL. Defaults to https://marklayer.app; useful against a local dev worker.
MARKLAYER_AGENT
Name shown to the humans in the room for this agent. Defaults to claude-code.

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "marklayer": {
      "command": "npx",
      "args": [
        "-y",
        "marklayer-mcp",
        "--room"
      ],
      "env": {
        "MARKLAYER_ROOM": "<YOUR_MARKLAYER_ROOM>",
        "MARKLAYER_API_BASE": "<YOUR_MARKLAYER_API_BASE>",
        "MARKLAYER_AGENT": "<YOUR_MARKLAYER_AGENT>"
      }
    }
  }
}

Tools & capabilities

Tools this server exposes to the agent.

marklayer_watch_annotations — Watch a queue of annotations on a MarkLayer board in real time.
marklayer_list_annotations — List all annotations on a MarkLayer board.
marklayer_acknowledge — Acknowledge an annotation, marking it as seen by the agent.
marklayer_resolve — Resolve an annotation with a summary of the fix or action taken.
marklayer_dismiss — Dismiss an annotation without resolving it.
marklayer_reply — Reply to an annotation thread.
marklayer_create_annotation — Create a new annotation on a MarkLayer board.
marklayer_suggest_edit — Suggest an edit for an annotation.
marklayer_connect_room — Connect to a MarkLayer room by share ID.

Use cases

Have an AI agent watch a MarkLayer board and automatically fix issues flagged by QA or clients, then report back with summaries.
Collect design feedback or bug reports from clients without requiring accounts—they annotate the live page and the agent reads the queue.
Run a code review where an agent inspects flagged elements, checks their selectors and styles, and proposes fixes inline.
Seed a review board for a URL ahead of time and let an agent work through annotations autonomously while humans watch changes land live.
Measure UI dimensions and gaps between elements, then have an agent adjust layout or spacing based on the measurements.

MarkLayer MCP server FAQ

What is MarkLayer?

MarkLayer is a webpage annotation tool where you draw, highlight, and comment on any live page, then share one link. An AI agent can connect via MCP to work annotations as a to-do list: acknowledge, fix, resolve, and reply.

Is MarkLayer free?

Yes. MarkLayer requires no sign-up, no trial clock, and no account. Shared boards expire 90 days after their last view. It is open source under Apache-2.0.

How do I connect an agent in Cursor or Claude?

Install the marklayer-mcp MCP server via npm: `claude mcp add marklayer -- npx -y marklayer-mcp`. Then ask your agent to watch your MarkLayer annotations and work them like a to-do list.

What context does each annotation carry?

Every annotation includes the exact element it refers to: CSS selector, computed styles, parent layout, viewport details, and framework component info, packaged as markdown so the agent can act on it immediately.

Do I need to host MarkLayer myself?

No. MarkLayer is available at marklayer.app with no install required. You can also self-host by cloning the repository and running `bun run dev`.

Can agents create their own boards?

Yes. The share ID is the access token, so an agent can mint a new room with one unauthenticated POST request, useful for seeding a review per URL ahead of time.

README (reference)

Source of truth, from the repository.

<a href="https://marklayer.app"> <img src=".github/icon.svg" width="112" height="112" alt="MarkLayer logo"> </a> <h1 align="center">MarkLayer</h1> Website feedback your AI agent can act on. Draw, highlight, and comment on any live webpage, then share one link. A human reviews it in real time, or an AI agent connects over MCP and works it like a to-do list: acknowledge, fix, resolve, reply. <a href="https://marklayer.app">Try MarkLayer</a> · <a href="https://chromewebstore.google.com/detail/marklayer/fnfobegjifomgobgilaemihpcpidjamc">Add to Chrome</a> · <a href="#built-for-ai-agents">Connect an agent</a> · <a href="#self-hosting--development">Build from source</a> <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-5b47d6?style=flat-square" alt="Apache-2.0 license"></a> <a href="https://marklayer.app"><img src="https://img.shields.io/badge/no%20account-required-1f9d68?style=flat-square" alt="No account required"></a> <a href="https://www.npmjs.com/package/marklayer-mcp"><img src="https://img.shields.io/npm/v/marklayer-mcp?style=flat-square&label=mcp&color=5b47d6" alt="marklayer-mcp on npm"></a> <a href="https://github.com/thevrus/MarkLayer"><img src="https://img.shields.io/github/stars/thevrus/MarkLayer?style=flat-square" alt="GitHub stars"></a> <a href="https://marklayer.app"><img src="https://raw.githubusercontent.com/thevrus/MarkLayer/main/apps/worker/static/product-review-wikipedia.webp" alt="A MarkLayer review board open on Wikipedia, showing highlights, threaded comments, and live cursors" width="900"></a>

One URL. A shared board. A faster decision.

MarkLayer turns any webpage into a collaborative review surface. Instead of passing screenshots back and forth, send a link. Teammates or clients can open the original page in their own browser, leave feedback where it belongs, and see changes land live. So can an AI agent: each comment arrives with the exact element it refers to already attached.

For AI-assisted work: connect marklayer-mcp and hand an agent a live queue of annotations to acknowledge, fix, and resolve. Or inspect an element yourself for a stable selector and an AI-ready markdown snapshot.
For client feedback: let clients point to exactly what they mean, without an account or extension.
For design review: sketch ideas, highlight details, and keep the conversation attached to the page.
For QA: pin reproducible issues to the actual UI, then share a clean link with the team.

How it works

Open a page: paste any public URL at marklayer.app, or use the Chrome extension on the page you are already viewing — including a page on your own localhost dev server, which never has to be reachable from the internet.
Make the feedback visible: draw, highlight text, measure space, pin a threaded comment, or inspect an element.
Share one link: collaborators join the same board and see cursors, marks, replies, and calls in real time. Point an AI agent at it instead, and marklayer-mcp turns the thread into a work queue.

No sign-up. No trial clock. No client install.

What you can do


Send an agent to work the page	Connect `marklayer-mcp`, a standard MCP server, so an AI agent can watch annotations and acknowledge, fix, and resolve them live.
Annotate freely	Pen, highlighter, eraser, shapes, arrows, text, and text-selection highlights.
Keep feedback in context	Pin threaded comments to the page, reply inline, and track status.
Review live	Real-time cursors, drawings, and comments via WebSocket, plus peer-to-peer voice and video chat.
Hand off agent-ready context	Inspect an element for a stable selector, computed styles, parent layout, viewport details, and framework component info, packaged as markdown built for a coding agent's prompt.
Measure the UI	Check element dimensions and edge-to-edge gaps between two elements.
Share or export	Create shareable links with preview cards, or export annotations to PNG.
Make it yours	Reorder toolbar tools; drafts persist locally and restore when you return.

Built for AI agents

Every annotation is part of a structured queue: an agent can read it, act on it, and report back, the same way a human would.

Connect over MCP. marklayer-mcp is a standard stdio MCP server: no Claude-specific wiring, works with Claude Code, Cursor, Windsurf, VS Code, Codex CLI, or any MCP client.

claude mcp add marklayer -- npx -y marklayer-mcp

Then just ask: "Watch my MarkLayer annotations. For each one, acknowledge it, make the fix, then resolve it with a summary." The agent calls marklayer_watch_annotations in a loop, and the human watches every status change land live. The full toolset (connect_room, list_annotations, watch_annotations, acknowledge, resolve, dismiss, reply, create_annotation, suggest_edit) is documented in apps/mcp.

Every mark carries the context an agent needs. Inspecting an element captures its CSS selector, computed styles, parent layout, and framework component info as a markdown snapshot, so a comment arrives with the exact node attached instead of a vague description.

No install, no server. On a browser agent with WebMCP support, the same list, acknowledge, resolve, and reply actions are exposed straight from the page via document.modelContext. Nothing to configure.

Agents can open their own boards, too. The share id is the access token, so minting a room is one unauthenticated POST, handy for seeding a review per URL ahead of time:

curl -X POST https://marklayer.app/api/$ID \
  -H 'Content-Type: application/json' \
  -d '{"ops":[],"url":"https://example.com","width":1440}'

Discoverable machine-first. /llms.txt, /llms-full.txt, /.well-known/api-catalog, and a full OpenAPI spec describe the whole surface for an agent that's never seen MarkLayer before.

Built to respect the reviewer's time and privacy

No accounts or tracking: start reviewing immediately.
Links expire thoughtfully: shared boards expire 90 days after their last view.
Open source and self-hostable: MarkLayer is released under Apache-2.0, so your workflow is not tied to a pricing change.

Want the non-technical version? Read How MarkLayer works.

Self-hosting & development

git clone https://github.com/thevrus/MarkLayer.git
cd MarkLayer
bun install
bun run dev

For the Chrome extension in development:

Build or run the extension app.
Open <code>chrome://extensions/</code> and turn on Developer mode.
Choose Load unpacked and select <code>apps/extension/.output/chrome-mv3-dev</code>.

Repository layout

├── apps/extension/         Chrome extension (WXT + Preact)
├── apps/worker/            Cloudflare Worker, API, real-time rooms, proxy, OG generator
├── apps/site/              Static marketing site (Astro)
├── apps/mcp/               MCP server for AI agents (published as marklayer-mcp)
├── packages/types/         Shared TypeScript types
└── packages/agent-tools/   Agent tool contract shared by the MCP server

Stack

Area	Technologies
Frontend	Preact, Signals, Tailwind CSS, Vite
Extension	WXT, Chrome APIs
Backend	Cloudflare Workers, Hono, Durable Objects
Storage	D1 (SQLite), R2
Real-time	WebSockets, WebRTC
Agent integration	MCP (stdio server), WebMCP, OpenAPI

Scripts

Command	What it does
<code>bun run dev</code>	Run the workspace in development mode
<code>bun run build</code>	Build all apps
<code>bun run check</code>	Type-check the workspace
<code>bun run lint</code>	Lint and format-check with Biome
<code>bun run lint:fix</code>	Apply lint and formatting fixes
<code>cd apps/worker && bun run deploy</code>	Deploy the Worker to Cloudflare
<code>cd apps/mcp && bun run build</code>	Build the MCP server (<code>marklayer-mcp</code>) to <code>dist/cli.js</code>
<code>cd apps/site && bun run indexnow:submit</code>	Ping IndexNow (Bing and friends) after a deploy that changed pages

Contributing

Found a bug or have an idea? Open an issue. Contributions are welcome.

License

Apache License 2.0 © Dean Rusin

<a href="https://marklayer.app">Try MarkLayer</a> · <a href="https://www.npmjs.com/package/marklayer-mcp">Connect an agent</a> · <a href="https://chromewebstore.google.com/detail/marklayer/fnfobegjifomgobgilaemihpcpidjamc">Add to Chrome</a> · <a href="https://github.com/thevrus/MarkLayer/issues">Report a bug</a> · <a href="https://github.com/thevrus/MarkLayer/issues">Request a feature</a>

Related MCP servers

Theyond

Active

Live jobs from employer career pages. Read-only. Hit Apply on theyond.com. You land on the employer.

View repository →

Base MCP Resolver

Active

Free onboarding tool providing authentic live transaction analysis on Base mainnet.

JavaScript

View repository →

io.github.thijssmudde/agentreacher

Connect your AI to social media. Create, schedule, and publish posts to 9+ platforms.

View repository →

Fiveable for AP Students

Active

AP study content, practice, FRQ feedback, progress, plans, and student tools for AI apps.

View repository →

io.github.thinksuitesolution-coder/visibilityai

Verified Indian business data and AI-visibility reports for MCP-compatible AI agents.

View repository →

io.github.thirdtrail/thirdtrail

Active

Elevation-corrected sun, moon, twilight, solar and tide data for any point on Earth

Python

MIT

View repository →