AI agent'larının web sayfası anotasyonlarını gerçek zamanlı bir iş birliği geri bildirim döngüsü aracılığıyla almasını, onaylamasını, düzeltmesini ve çözmesini sağlar.
Ayrıca bilinen adı thevrus/MarkLayer, marklayer-mcp
- Yıldızlar
- 52
- Araçlar
- —
- İndirmeler, 30 gün
- —
- En son sürüm
- —
- Son commit
- 10 Kas 2026
- Lisans
- Apache-2.0
MarkLayer MCP nedir?
MarkLayer bir MCP sunucusudur. AI agent'larının web sayfası anotasyonlarını gerçek zamanlı bir iş birliği geri bildirim döngüsü aracılığıyla almasını, onaylamasını, düzeltmesini ve çözmesini sağlar.
Özet, projenin README dosyasından oluşturuldu
MarkLayer MCP sunucusu hakkında
MarkLayer, AI agent'larının doğrudan etkileşime girebileceği web geri bildirimi için iş birliğine dayalı bir arayüz sunar. Kullanıcılar, yerel geliştirme sunucuları dahil olmak üzere herhangi bir canlı web sayfasında çizim yapabilir, vurgulama yapabilir veya yorum bırakabilir ve tek bir bağlantıyı iş arkadaşlarıyla paylaşabilir. Bu bağlantı, insanların ve AI agent'larının yapılandırılmış bir anotasyon kuyruğu üzerinden birlikte çalıştığı gerçek zamanlı bir inceleme panosu görevi görür.
Geliştiriciler, bir paylaşım bağlantısının sonuna /mcp ekleyerek veya marklayer-mcp paketini npx aracılığıyla yerel olarak kurarak, Model Context Protocol kullanarak uzak bir HTTP transport üzerinden AI agent'larını bağlayabilirler. Sunucu, agent'ların görevleri onaylama, düzeltme ve çözme gibi belirli eylemleri gerçekleştirmesine olanak tanır. Ayrıca, agent'ların tam olarak hangi öğelerin dikkat gerektirdiğini anlamalarına yardımcı olmak için markdown formatında CSS selector'ları ve hesaplanmış stiller gibi teknik bağlamlar sağlar.
Bu araç, görsel geri bildirim ile otomatik kod düzeltmeleri arasındaki boşluğu kapatması gereken QA test uzmanları, tasarımcılar ve geliştiriciler için tasarlanmıştır. İnsan incelemeciler için hesap veya uzantı gerektirmez ve WebSockets aracılığıyla gerçek zamanlı güncellemeleri destekler.
Neler yapabilirsiniz
- 1UI hata düzeltmelerini otomatize edinBir AI agent, web sayfası anotasyonlarını izleyerek bunları otomatik olarak onaylayabilir, düzeltebilir ve çözebilir.
- 2Gerçek zamanlı tasarım incelemeleri yapınEkipler, görünür imleçlerle canlı bir site üzerinde fikirleri taslak haline getirmek ve detayları vurgulamak için paylaşılan panoyu kullanabilir.
- 3Otomatik sayfa denetimleri gerçekleştirinBir agent, belirli metin düzenlemeleri önermek veya kendi yorumlarını bırakmak için bir sayfanın metnini ve kontrollerini okuyabilir.
Projenin README dosyasından alınmıştır. Her kullanım durumu, oradaki bir alıntı ile kontrol edilir.
MarkLayer MCP nasıl yüklenir
Biçimler 10 Kas 2026 tarihinde doğrulandıCursor'a ekleGoose'a ekleMarkLayer MCP'yi Claude Code içine yükleyin
$ claude mcp add marklayer -- npx -y marklayer-mcpMarkLayer MCP'yi Cursor içine yükleyin
~/.cursor/mcp.json
{
"mcpServers": {
"marklayer": {
"command": "npx",
"args": [
"-y",
"marklayer-mcp"
]
}
}
}MarkLayer MCP'yi VS Code içine yükleyin
.vscode/mcp.json
{
"servers": {
"marklayer": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"marklayer-mcp"
]
}
}
}MarkLayer MCP'yi VS Code CLI içine yükleyin
$ code --add-mcp '{"name":"marklayer","type":"stdio","command":"npx","args":["-y","marklayer-mcp"]}'MarkLayer MCP'yi Claude Desktop içine yükleyin
claude_desktop_config.json
{
"mcpServers": {
"marklayer": {
"command": "npx",
"args": [
"-y",
"marklayer-mcp"
]
}
}
}MarkLayer MCP'yi Codex içine yükleyin
$ codex mcp add marklayer -- npx -y marklayer-mcpMarkLayer MCP'yi Codex config.toml içine yükleyin
~/.codex/config.toml
[mcp_servers.marklayer] command = "npx" args = ["-y", "marklayer-mcp"]
MarkLayer MCP'yi Gemini CLI içine yükleyin
$ gemini mcp add -s user marklayer npx -- -y marklayer-mcpMarkLayer MCP'yi Gemini settings.json içine yükleyin
~/.gemini/settings.json
{
"mcpServers": {
"marklayer": {
"command": "npx",
"args": [
"-y",
"marklayer-mcp"
]
}
}
}Otomatik kontroller
Çalıştırıldı 13 Kas 2026Tam rapor →Otomatik kontrollerimizden geçti. Bu bir güvenlik denetimi değildir: kodu okuyun ve sunucuya ihtiyaç duyduğu en dar erişimi verin. Kontroller nasıl çalışır
- Kaynak deposu bağlantılı ve erişilebilirGeçti
- Açık kaynak lisansı (OSI)Geçti
- Son bir yıl içinde commit veya sürüm mevcutGeçti
- Paket adı popüler bir pakete yakın değilGeçti
- Uzak uç nokta HTTPS kullanıyorKontrol edilmedi
- Yıkıcı araçlar etiketlenmişKontrol edilmedi
- Modele yönelik gizli talimat yokGeçti
- Pakette veya bağımlılıklarında kritik uyarı yokKontrol edilmedi
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 soruları
MarkLayer MCP'yi Claude Code'a nasıl eklerim?
Terminalinizde claude mcp add marklayer -- npx -y marklayer-mcp komutunu çalıştırın. Her projede kullanılabilir olması için --scope user ekleyin.
MarkLayer MCP'yi Cursor'a nasıl eklerim?
~/.cursor/mcp.json dosyasını açın ve yukarıdaki yükleme bölümünde gösterilen Cursor yapılandırmasını kullanarak sunucuyu mcpServers altına ekleyin.
MarkLayer kullanmak için bir hesaba ihtiyacım var mı?
Hayır, MarkLayer pano incelemek veya paylaşmak için herhangi bir kayıt veya hesap gerektirmez.
MarkLayer'ı yerel geliştirme sunucumda kullanabilir miyim?
Evet, Chrome uzantısını kullanarak, internetten erişilebilir olmasına gerek kalmadan kendi localhost geliştirme sunucunuzdaki sayfaları anotasyonlayabilirsiniz.
Paylaşılan panolarım zamanla ne oluyor?
Paylaşılan panolar kalıcı değildir ve son görüntülenme tarihinden itibaren 90 gün sonra geçerliliğini yitirir.