Layout Debug MCP server
io.github.AntonChuraev99/layout-debug-mcp·v0.3.0·2 starsSelect a layout layer on a live web or Android UI, move it, and hand the edit to any MCP agent.
not scanned yet
2 stars450 downloads/wk
Reviews
Write oneNobody has reviewed Layout Debug yet.
If you have run it, two minutes of your experience saves the next person an afternoon.
Layout Debug tools
No tool declarations could be read from the package source. They show once the server is installed.
How Layout Debug compares
Against every graded AI and agents MCP server, from our own scans and uptime checks. Updated after each scan run.
- Safety score
- 92/100
- higher than 90% of 4,460 AI and agents servers
- GitHub stars
- 2
- more than 65% of 2,711 AI and agents servers
- Downloads a week
- 450
- more than 85% of 1,538 AI and agents servers with a package
Release history: 2 versions in the registry since 2026-10-08, latest 2026-10-20, typically one every 12 days.
Install Layout Debug in Claude Code, Cursor or VS Code
Runs npx -y layout-debug-mcp on your machine. Read the scan report first; the gateway never runs local packages.
claude mcp add layout-debug-mcp -- npx -y layout-debug-mcp
What the publisher says
From the Layout Debug repository's README, as published. We do not edit it. Read it on GitHub
layout-debug-mcp
Point at the element. Tell your agent what to change.
Stop describing UI to your AI agent in words. Alt+click any layer in your running page or Android app and type the change in its chat. Your agent (Claude Code, Codex, Cursor, Copilot…) gets the element's anchors, box and parents over MCP, edits the code and answers in the same chat while the frame refreshes with the result.
Need it 16 px lower? Drag it on the real screen first; the measured delta goes along.
Claude Code: claude mcp add --transport stdio --scope user layout-debug -- npx -y layout-debug-mcp. Other clients: Connect your MCP client.
20-second loop recorded from the real tool; the agent's side is a scripted MCP client, its wait sped up 2×. Watch the MP4 for full quality.
Русская версия
What the tool sees. It captures screenshots and the layout tree of the UI you point it at and hands them to the agent you connect. Don't run it against screens that show data you wouldn't paste into that agent.
Why
UI fixes with an agent go "by text": describe the element, the agent edits a different div, rebuild, look, describe again. Half the time goes into explaining which element you mean.
layout-debug-mcp is a local window over your running UI. You pick the element on the picture, so there's nothing to explain. If you want it 16 px lower, you drag it and the real page (or the phone) moves, no rebuild. The agent gets measurements, not adjectives.
One window, two targets, one snapshot format:
Shortened. The full README is on GitHub.
Nothing above is checked by us. What we check is on the safety report.
Layout Debug: common questions
- Is Layout Debug MCP server safe?
- Yes, by our scan: it is graded A (92/100). Read the Layout Debug safety report
- How do I install Layout Debug?
- It runs on your machine. Copy the Claude Code, Cursor, VS Code or Claude Desktop config from the install section.
- Does Layout Debug need an API key?
- Not as far as the registry entry and our scan can tell: no credentials are declared or required.
- Is Layout Debug maintained?
- The last commit was 27 days ago (2026-10-08). The latest release is v0.3.0.
- What can I use instead of Layout Debug?
- Servers from other publishers that do the same job: agent-device MCP server, agent-device MCP server and Openflowkit MCP server. Compare all Layout Debug alternatives.
- How does Layout Debug compare with other AI and agents MCP servers?
- safety score 92/100 (higher than 90% of 4,460 AI and agents servers); github stars 2 (more than 65% of 2,711 AI and agents servers); downloads a week 450 (more than 85% of 1,538 AI and agents servers with a package). Full comparison.
Alternatives to Layout Debug
Same job from other publishers: the closest match first, then the best rated.
- agent-deviceLet AI agents inspect, control, and debug real iOS, Android, desktop, and TV appsnot reviewedWidely usedA
- agent-deviceOpen source device layer for AI agents: control mobile, web, TV, and desktop apps over MCPnot reviewedWidely usedA
- OpenflowkitArchitecture diagrams for your agent: draw on the live OpenFlowKit canvas or edit diagram files.not reviewedEstablishedA
- Agent-Native SlidesAgent-Native Google Slides - generate and edit React presentationsnot reviewedEstablishedA
- Watch SkillWatch video and live sessions, keep timestamped evidence, and verify an agent's own work.not reviewedEstablishedB
