AI agent이 실시간 협업 피드백 루프를 통해 웹페이지 어노테이션을 수신, 확인, 수정 및 해결할 수 있도록 합니다.
다른 이름 thevrus/MarkLayer, marklayer-mcp
- 스타
- 52
- Tools
- —
- 다운로드, 30일
- —
- 최신 버전
- —
- 마지막 커밋
- 2026년 11월 10일
- 라이선스
- Apache-2.0
MarkLayer MCP란?
MarkLayer은(는) MCP server입니다. AI agent이 실시간 협업 피드백 루프를 통해 웹페이지 어노테이션을 수신, 확인, 수정 및 해결할 수 있도록 합니다.
프로젝트 README에서 생성된 요약
MarkLayer MCP server 정보
MarkLayer는 AI agent이 직접 상호작용할 수 있는 웹 피드백용 협업 인터페이스를 제공합니다. 사용자는 로컬 개발 서버를 포함한 모든 라이브 웹페이지에 그림을 그리거나, 하이라이트를 표시하거나, 댓글을 달 수 있으며, 협업자를 위해 단일 링크를 공유할 수 있습니다. 이 링크는 구조화된 어노테이션 큐를 통해 사람과 AI agent이 함께 작업하는 실시간 리뷰 보드 역할을 합니다.
개발자는 공유 링크에 /mcp를 추가하거나 npx를 통해 marklayer-mcp package를 로컬에 설치하여 remote HTTP transport 방식의 Model Context Protocol로 AI agent을 연결할 수 있습니다. 이 MCP server를 통해 agent는 작업 확인, 수정, 해결과 같은 특정 작업을 수행할 수 있습니다. 또한 agent가 어떤 요소에 주의를 기울여야 하는지 정확히 이해할 수 있도록 CSS selector 및 computed style과 같은 기술적 컨텍스트를 markdown 형식으로 제공합니다.
이 도구는 시각적 피드백과 자동화된 코드 수정 사이의 간극을 메워야 하는 QA 테스터, 디자이너, 개발자를 위해 설계되었습니다. 사람 검토자를 위한 계정이나 extension이 필요하지 않으며, WebSockets를 통한 실시간 업데이트를 지원합니다.
활용 사례
- 1UI 버그 수정 자동화AI agent이 웹페이지 어노테이션 목록을 모니터링하며 작업을 자동으로 확인, 수정 및 해결할 수 있습니다.
- 2실시간 디자인 리뷰 수행팀원들이 공유 보드를 사용하여 라이브 사이트에서 커서를 표시하며 아이디어를 스케치하거나 세부 사항을 하이라이트할 수 있습니다.
- 3자동화된 페이지 감사 수행agent가 페이지의 텍스트와 컨트롤을 읽고 특정 문구 수정을 제안하거나 직접 댓글을 남길 수 있습니다.
프로젝트의 README를 바탕으로 작성되었습니다. 모든 활용 사례는 해당 내용의 인용문과 대조하여 확인합니다.
MarkLayer MCP 설치 방법
형식 확인: 2026년 11월 10일Cursor에 추가Goose에 추가Claude Code에 MarkLayer MCP 설치
$ claude mcp add marklayer -- npx -y marklayer-mcpCursor에 MarkLayer MCP 설치
~/.cursor/mcp.json
{
"mcpServers": {
"marklayer": {
"command": "npx",
"args": [
"-y",
"marklayer-mcp"
]
}
}
}VS Code에 MarkLayer MCP 설치
.vscode/mcp.json
{
"servers": {
"marklayer": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"marklayer-mcp"
]
}
}
}VS Code CLI에 MarkLayer MCP 설치
$ code --add-mcp '{"name":"marklayer","type":"stdio","command":"npx","args":["-y","marklayer-mcp"]}'Claude Desktop에 MarkLayer MCP 설치
claude_desktop_config.json
{
"mcpServers": {
"marklayer": {
"command": "npx",
"args": [
"-y",
"marklayer-mcp"
]
}
}
}Codex에 MarkLayer MCP 설치
$ codex mcp add marklayer -- npx -y marklayer-mcpCodex config.toml에 MarkLayer MCP 설치
~/.codex/config.toml
[mcp_servers.marklayer] command = "npx" args = ["-y", "marklayer-mcp"]
Gemini CLI에 MarkLayer MCP 설치
$ gemini mcp add -s user marklayer npx -- -y marklayer-mcpGemini settings.json에 MarkLayer MCP 설치
~/.gemini/settings.json
{
"mcpServers": {
"marklayer": {
"command": "npx",
"args": [
"-y",
"marklayer-mcp"
]
}
}
}자동 검사
2026년 11월 13일에 실행됨전체 보고서 →자동 검사를 통과했습니다. 이는 보안 감사가 아닙니다. 코드를 직접 읽고 서버에 필요한 최소한의 권한만 부여하십시오. 검사 방식
- 소스 저장소 연결 및 접근 가능통과
- 오픈 소스 라이선스 (OSI)통과
- 최근 1년 내 커밋 또는 릴리스통과
- 패키지 이름이 인기 패키지와 유사하지 않음통과
- 원격 엔드포인트가 HTTPS 사용검사되지 않음
- 파괴적인 도구에 라벨 표시됨검사되지 않음
- 모델에 대한 숨겨진 지침 없음통과
- 패키지 및 해당 종속성에 중요한 보안 권고 없음검사되지 않음
README
GitHub에서 보기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: give an agent the share link over MCP and it works the annotations as a live queue: acknowledge, fix, resolve. Nothing to install. 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
localhostdev 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 the same link over MCP instead, and the thread becomes its work queue.
No sign-up. No trial clock. No client install.
What you can do
| Send an agent to work the page | Every share link is also a remote MCP server, so an AI agent can watch annotations and acknowledge, fix, and resolve them live, or review the page and leave notes of its own. |
| 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, with nothing installed. Every share link is also a remote MCP server. Add /mcp to it:
claude mcp add --transport http marklayer https://marklayer.app/s/<id>/mcp
Any client that accepts a remote (Streamable HTTP) server URL takes the same address. Add ?agent=cursor, or any name, so the people in the room can see who is doing the work. The share panel on every link shows the command with the id filled in.
If a client only runs local servers, marklayer-mcp has the same tools as a stdio package, installed once for every room:
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. It can go first, too: read_page hands it the page's text and controls with their selectors, so an agent asked to review a page leaves its own comments and suggests exact copy edits as diffs. The full toolset 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.
Or from inside the browser. 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, an MCP server card, an agent skill, 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 chrome://extensions/ and turn on Developer mode.
- Choose Load unpacked and select apps/extension/.output/chrome-mv3-dev.
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 (remote at every share link, plus a stdio package), WebMCP, OpenAPI |
Scripts
| Command | What it does |
|---|---|
| bun run dev | Run the workspace in development mode |
| bun run build | Build all apps |
| bun run check | Type-check the workspace |
| bun run lint | Lint and format-check with Biome |
| bun run lint:fix | Apply lint and formatting fixes |
| cd apps/worker && bun run deploy | Deploy the Worker to Cloudflare |
| cd apps/mcp && bun run build | Build the MCP server (marklayer-mcp) to dist/cli.js |
| cd apps/site && bun run indexnow:submit | 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
MarkLayer MCP 질문
MarkLayer MCP를 Claude Code에 추가하려면 어떻게 하나요?
터미널에서 claude mcp add marklayer -- npx -y marklayer-mcp를 실행합니다. 모든 프로젝트에서 사용할 수 있게 하려면 --scope user를 추가합니다.
MarkLayer MCP를 Cursor에 추가하려면 어떻게 하나요?
~/.cursor/mcp.json를 열고 mcpServers 아래에 서버를 추가합니다. 위 설치 섹션에 표시된 Cursor 구성을 사용합니다.
MarkLayer를 사용하려면 계정이 필요한가요?
아니요, MarkLayer는 보드를 검토하거나 공유하기 위해 별도의 가입이나 계정이 필요하지 않습니다.
로컬 개발 서버에서 MarkLayer를 사용할 수 있나요?
네, Chrome extension을 사용하여 인터넷 연결 없이도 localhost 개발 서버의 페이지에 어노테이션을 추가할 수 있습니다.
공유된 보드는 시간이 지나면 어떻게 되나요?
공유된 보드는 영구적이지 않으며 마지막으로 조회된 후 90일이 지나면 만료됩니다.