Point at a layer in a live UI (web DOM, Android Compose), drag it on the real screen, hand it to your AI agent via MCP
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add layout-debug -- npx -y layout-debug-mcp~/.codex/config.toml
[mcp_servers.layout-debug]
command = "npx"
args = ["-y", "layout-debug-mcp"]
# codex mcp add layout-debug -- npx -y layout-debug-mcp~/.cursor/mcp.json
{
"mcpServers": {
"layout-debug": {
"command": "npx",
"args": [
"-y",
"layout-debug-mcp"
]
}
}
}.vscode/mcp.json
{
"servers": {
"layout-debug": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"layout-debug-mcp"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"layout-debug": {
"command": "npx",
"args": [
"-y",
"layout-debug-mcp"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"layout-debug": {
"command": "npx",
"args": [
"-y",
"layout-debug-mcp"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"layout-debug": {
"command": "npx",
"args": [
"-y",
"layout-debug-mcp"
]
}
}
}