Agent Setup

What is Prototyper UI?

A component library designed end-to-end for generative UI. 59 accessible React components built on Base UI, Tailwind CSS v4, and OKLCH design tokens. Every component is a file — agents can read, compose, and render them in real time through structured MCP access. Humans can read the source, change anything, and ship it as their own.

The Live Canvas is a live browser preview powered by Yjs. It lets agents and humans see the same UI in real time.

Install the MCP server

The @prototyperco/mcp package gives your agent structured access to components, docs, tokens, and the Live Canvas. Any MCP-compatible agent works — Claude Code, Cursor, OpenCode, Codex, VS Code, and more.

Claude Code

claude mcp add prototyper-ui -- bunx @prototyperco/mcp@latest

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "prototyper-ui": {
      "command": "bunx",
      "args": ["@prototyperco/mcp@latest"]
    }
  }
}

VS Code / OpenCode

Add to .vscode/mcp.json:

{
  "servers": {
    "prototyper-ui": {
      "type": "stdio",
      "command": "bunx",
      "args": ["@prototyperco/mcp@latest"]
    }
  }
}

Codex CLI

mkdir -p ~/.codex && cat >> ~/.codex/config.json << 'EOF'
{
  "mcpServers": {
    "prototyper-ui": {
      "command": "bunx",
      "args": ["@prototyperco/mcp@latest"]
    }
  }
}
EOF

Other agents

Any agent that supports MCP can use the same config. The command is always bunx @prototyperco/mcp@latest.

Set up the project

If the workspace doesn't already have Prototyper UI configured, run:

bunx @prototyperco/cli setup

This installs dependencies, writes design tokens, and configures Tailwind.

Verify

After installing the MCP server, call list_components. If it returns a list of components, the server is working.

Start designing

Call design_create to open a live Live Canvas session. The bridge server starts automatically on the first call.

design_create({ title: "Login Page" })

This returns a previewUrl — open it in a browser to see live updates as the agent builds UI.

Key MCP tools

Further reading

• MCP Server docs — full tool reference and environment variables
• Live Canvas docs — architecture, sessions, and advanced usage
• Component list — browse all components