Overview
Install and configure the UI Lab MCP server for Claude and other AI agents.
MCP Server Installation
The UI Lab MCP server gives AI agents direct, structured access to the component library, design tokens, patterns, elements, and sections. Instead of pasting documentation into prompts, agents call tools to look up exactly what they need in real time.
How it works
The server implements the Model Context Protocol over stdio (stdin/stdout). When connected, AI agents can call 10 tools and read 4 resource types to discover and use UI Lab's design system.
The server is the ui-lab-mcp package. It runs as a child process that your AI client (Claude Desktop, Cursor, etc.) manages automatically.
Prerequisites
- Node.js ≥ 18 — the server is pure ES Module
- UI Lab installed in your project — see Installation
Quick start: Claude Desktop
Add this to your Claude Desktop config file.
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Restart Claude Desktop. The server connects automatically on startup.
Quick start: Cursor
Add to .cursor/mcp.json in your project root (or the global Cursor settings):
Quick start: Local install
If you prefer not to use npx, install the package directly:
Then point your client to the installed binary:
Verifying the connection
When the server starts successfully it logs to stderr:
In Claude Desktop, the MCP icon in the chat input turns active when the server is connected. You can test it by asking Claude:
"Search for a button component using UI Lab tools"
Claude will call search_components and return structured results from the registry.
What the server exposes
Once connected, the agent has access to:
| Category | Tools | Resources |
|---|---|---|
| Components | search_components, get_component | component://<id> |
| Design tokens | get_semantic_color | — |
| Theme | get_theme_setup | — |
| Patterns | search_patterns, get_pattern | pattern://<id> |
| Elements | search_elements, get_element | element://<id> |
| Sections | search_sections, get_section | section://<id> |
See Workflows for details on each tool.
Troubleshooting
Server doesn't start
Verify Node.js version:
Test the server manually:
If it hangs silently, the server is running and waiting for MCP protocol input over stdin — that's correct behavior.
"Module not found" errors
The registry package must be built. If you're running from a local monorepo clone:
Claude doesn't call any tools
Verify the server name in config matches what you expect — Claude Desktop uses the key name (e.g., "ui-lab") as the server identifier. Check that the config file is valid JSON.
npx downloads every time
Install the package locally in your project and reference the local binary instead of using npx.
Running from source
If you're developing UI Lab itself or want to run the server from the monorepo:
Point your client config to the absolute path:
Next steps
- Workflows — all 10 tools, resource URIs, design guidelines, and example agent conversations
- Design System — understand the color token system the MCP enforces