io.github.AntonChuraev99/layout-debug-mcp

layout-debug-mcp

Select a layout layer on a live web or Android UI, move it, and hand the edit to any MCP agent.

2 31/wk 20 tools GitHub npm

No known CVEs

MIT license

Actively maintained

Last commit 6d ago

Works with most clients

Transport: stdio, sse, http

20 tools · ~1.1k tok

Grade B · 0.6% of 200K ctx

MCPpedia last refreshed this data 13h ago

Edit this pageView history

io.github.AntonChuraev99/layout-debug-mcp is an MCP server that select a layout layer on a live web or Android UI, move it, and hand the edit to any MCP agent. Its tool list has not been published yet over stdio, sse and http, requires no API key, and scores 81/100 on MCPpedia's security, maintenance and efficiency rubric.

Other

Step 1

Install in your client

Config is the same across clients - only the file and path differ.

Supported in Claude Desktopstdio, sse, http · Node 18+

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

{
  "mcpServers": {
    "layout-debug": {
      "env": {
        "LD_TARGET_URL": "http://localhost:3000"
      },
      "args": [
        "-y",
        "layout-debug-mcp"
      ],
      "command": "npx"
    }
  }
}

Are you the author?

Add this badge to your README to show your security score and help users find safe servers.

Embed in your READMEAbout badges →

[![MCPpedia Score](https://mcppedia.org/api/badge/io-github-antonchuraev99-layout-debug-mcp)](https://mcppedia.org/s/io-github-antonchuraev99-layout-debug-mcp)

Read me

What io.github.AntonChuraev99/layout-debug-mcp does

Select a layout layer on a live web or Android UI, move it, and hand the edit to any MCP agent.

Test This Server

Run this in your terminal to verify the server starts. Then let us know if it worked - your result helps other developers.

npx -y 'layout-debug-mcp' 2>&1 | head -1 && echo "✓ Server started successfully"

After testing, let us know if it worked:

Loading README…

Scored, not listed

Why this score

Five weighted categories - click any category to see the underlying evidence.

Score breakdown

81/100across 5 weighted dimensions

How we score →

0255075100

−19

Security

Maintenance

Efficiency

Documentation

Compatibility

Categoriesclick a row to see evidence

Security

OSV.dev

No known CVEs.

Checked layout-debug-mcp against OSV.dev.

Inventory

Tools (20)

Click any tool to inspect its schema.

~1.1k tokens total

Community

Reviews

Be the first to review

Have you used this server?

Share your experience - it helps other developers decide.

How easy was setup?Did it work reliably?How was the documentation?

Frequently Asked Questions

Is io.github.AntonChuraev99/layout-debug-mcp safe to use?: io.github.AntonChuraev99/layout-debug-mcp has no known CVEs as of the latest MCPpedia security scan. Authentication requirements were not detected automatically - check the project's documentation before connecting in a shared environment. Licensed under MIT.
How do I install io.github.AntonChuraev99/layout-debug-mcp?: io.github.AntonChuraev99/layout-debug-mcp supports copy-paste install configs on its MCPpedia page for Claude Desktop, Cursor, and Claude Code. Scroll to the Quick Install section and select your client.
What can io.github.AntonChuraev99/layout-debug-mcp do?: io.github.AntonChuraev99/layout-debug-mcp provides 20 tools: Web, Android, open_window, env, Zed and 15 more. See the full tools list on the server page for descriptions and parameters.
What AI clients work with io.github.AntonChuraev99/layout-debug-mcp?: io.github.AntonChuraev99/layout-debug-mcp is compatible with claude-desktop, cursor, claude-code. It uses stdio and sse and http transport.
Is io.github.AntonChuraev99/layout-debug-mcp actively maintained?: io.github.AntonChuraev99/layout-debug-mcp is actively maintained - last commit was 6 days ago. It has 2 GitHub stars.

Similar servers

Others in other

View all →

io.github.sheawinkler/contextlattice95

Private-by-default, local-first memory/context/task orchestrator for MCP apps and agents.

156 4

Headroom95

Compress tool outputs, logs, files, and RAG chunks before they reach the LLM. 60-95% fewer tokens, same answers. Library, proxy, MCP server.

77.9k 3

Dexsql Release95

SQL for Android APK and DEX files: classes, methods, strings, references and smali.

234 2

System1 Agents95

System 1 decision models (Jev, Laya, Cua-S1) as brain for agents: Browser use, computer use, games and robotics

176 8

MCP Security Weekly

Get CVE alerts and security updates for io.github.AntonChuraev99/layout-debug-mcp and similar servers.

Community

Discussion

Start a conversation

Ask a question, share a tip, or report an issue.

Has anyone used this with Cursor?How do you handle auth?Any alternatives?

{ "mcpServers": { "layout-debug": { "env": { "LD_TARGET_URL": "http://localhost:3000" }, "args": [ "-y", "layout-debug-mcp" ], "command": "npx" } } }

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.

layout-debug-mcp: select a button, write to your agent in the element chat, the agent edits the code and replies in the same chat, the frame refreshes with the change

_{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.

Without

With layout-debug-mcp

Screenshot, circle the button, "the grey one under the price, no, the other one"

Alt+click the button and type the change in its chat

"Move it a bit lower"

Drag it 16 px; the real page moves

The agent greps, edits the wrong div, you rebuild and look

The agent gets the element's anchors (test id, classes, file:line where available), box and offset 0, 16, and edits the right element

You check

Frequently Asked Questions

Is io.github.AntonChuraev99/layout-debug-mcp safe to use?

io.github.AntonChuraev99/layout-debug-mcp has no known CVEs as of the latest MCPpedia security scan. Authentication requirements were not detected automatically - check the project's documentation before connecting in a shared environment. Licensed under MIT.

How do I install io.github.AntonChuraev99/layout-debug-mcp?

io.github.AntonChuraev99/layout-debug-mcp supports copy-paste install configs on its MCPpedia page for Claude Desktop, Cursor, and Claude Code. Scroll to the Quick Install section and select your client.

What can io.github.AntonChuraev99/layout-debug-mcp do?

io.github.AntonChuraev99/layout-debug-mcp provides 20 tools: Web, Android, open_window, env, Zed and 15 more. See the full tools list on the server page for descriptions and parameters.

What AI clients work with io.github.AntonChuraev99/layout-debug-mcp?

io.github.AntonChuraev99/layout-debug-mcp is compatible with claude-desktop, cursor, claude-code. It uses stdio and sse and http transport.

Is io.github.AntonChuraev99/layout-debug-mcp actively maintained?

io.github.AntonChuraev99/layout-debug-mcp is actively maintained - last commit was 6 days ago. It has 2 GitHub stars.

layout-debug-mcp

Point at the element. Tell your agent what to change.

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.

Without	With layout-debug-mcp
Screenshot, circle the button, "the grey one under the price, no, the other one"	`Alt`+click the button and type the change in its chat
"Move it a bit lower"	Drag it 16 px; the real page moves
The agent greps, edits the wrong `div`, you rebuild and look	The agent gets the element's anchors (test id, classes, `file:line` where available), box and `offset 0, 16`, and edits the right element
You check

... View full README on GitHub