Getting Started

Prerequisites

• Node.js 18+ or Bun
• An MCP-compatible AI client (Claude Code, Cursor, Windsurf, VS Code, or Zed)

Configure MCP

Add the Prototyper UI MCP server to your AI client. The bridge server starts automatically when the first design tool is invoked.

Claude Code

claude mcp add prototyper-ui -- npx -y @prototyperco/mcp@latest

Or add to .mcp.json:

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

Cursor

Add to .cursor/mcp.json:

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

VS Code

Add to .vscode/mcp.json:

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

Create Your First Session

Ask your AI assistant to create a design. The assistant will call design_create automatically:

Build me a signup form with name, email, and password fields

The tool returns a session ID and preview URL:

{
  "sessionId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "previewUrl": "http://localhost:4321/?session=a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "revision": 0,
  "source": "bridge"
}

Open the Preview

Open the previewUrl in your browser. You will see the initial design rendered with Prototyper UI components.

The browser connects to the bridge server over WebSocket. Every change the AI agent makes from this point forward appears live — no refresh needed.

Watch It Build

As you continue talking to the AI, it calls design_update to add elements, change props, and restructure the layout. Each operation is applied to the shared Yjs document and synced to your browser in real time.

Add a "Remember me" checkbox below the password field.
Make the submit button full width.
Change the theme to warm sunset colors.

Each instruction triggers one or more MCP tool calls:

• design_update adds the checkbox and modifies the button
• design_theme updates the color tokens

Customize the Theme

You can describe the theme in natural language:

Make it dark blue with sharp corners and Inter font

Or be precise with numeric values:

Set the theme to hue 220, chroma 0.3, radius 4, font "Inter"

The design_theme tool accepts both styles. Natural language descriptions are parsed into theme parameters automatically. Presets like "forest", "sunset", and "midnight" are also recognized.

Export the Design

When the design looks right, export it as a React component:

Export this design as a React component

The AI calls design_export, which returns:

• A React component file using Prototyper UI imports
• Theme CSS tokens to add to your globals.css
• A list of component packages to install

Close the Session

Close the design session

The AI calls design_close. Add exportFirst: true to export automatically before closing.

Environment Variables

Next Steps

• MCP Tools Reference — Full parameter docs for every design tool
• API Reference — REST and WebSocket protocol details