uikit-mcp

An MCP server that lets AI assistants preview, inspect, and debug UIKitML spatial UI files.

Features

• Render - Render .uikitml files to pixel-perfect PNG screenshots with diagnostics and layout analysis in a single call
• Inspect - Traverse the full component tree or drill into a subtree by ID, with dimensions, positions, properties, and source ranges
• Validate - Check markup against UIKitML rules (fast static-only mode or full layout analysis)
• Stateless - Every tool call is self-contained; pass a file path and get the answer. No session setup required
• Cached - Internal mtime-based caching skips re-rendering when the file hasn't changed

Quick Start

Claude Desktop

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "uikit-mcp": {
      "command": "npx",
      "args": ["uikit-mcp"]
    }
  }
}

Claude Code

Create .mcp.json in your project root:

{
  "mcpServers": {
    "uikit-mcp": {
      "command": "npx",
      "args": ["uikit-mcp"]
    }
  }
}

Tools

| Tool | Parameters | Description | |------|-----------|-------------| | render | filePath, width? | Render a .uikitml file and return a PNG screenshot with diagnostics, layout issues, and component count | | inspect | filePath, id?, detail? | Get the component tree (or subtree by ID) with dimensions, positions, and optionally properties and source ranges | | validate | filePath, scope? | Validate markup for errors — "static" (default, ~10ms) or "full" (includes layout analysis) |

Requirements

• Node.js 18+
• Puppeteer downloads Chromium (~280MB) on first install

License

MIT