Prototyper UI
The UI framework for the AI era
56 accessible components that agents can read, compose, and render. Open source. One prompt to set up.
Built on Base UI. Styled with Tailwind CSS v4. Themed with OKLCH tokens. A typed catalog guarantees what agents generate actually renders.
Select a prompt above to see streaming UI generation
From prompt to preview
One prompt. Your agent installs, builds, and previews — live in the browser. Powered by Yjs for conflict-free collaboration.
Real-Time Preview
Watch components appear as the AI generates them. Every change streams to the browser instantly via Yjs.
56 Components
The full Prototyper UI library is available. Build entire pages from buttons to complex forms.
Operation Streaming
Fine-grained operations (add, update, move, remove) stream over the wire. No full-spec re-renders.
Undo & Redo
Full undo/redo powered by Yjs history. Roll back any AI change with a single keystroke.
Connect your agent
Paste this into Claude Code, Cursor, Codex, VS Code, or another local coding agent once.
It installs the Prototyper UI MCP server, runs setup when the workspace needs it, and then moves straight into the first live design_create flow from one prompt.
The bridge auto-starts on the first design tool call, so this is usually a one-time machine setup.
Full docs: MCP setup · Live Canvas docs
Paste this into your agent, then let it handle the rest
Install Prototyper UI for me.
Prototyper UI is a component library with a Live Canvas — a shared browser preview powered by Yjs, so we can both see changes instantly. No local servers needed.
Read https://prototyper-ui.com/agent-setup.txt and install Prototyper UI for this agent.
If you cannot fetch that URL, use the inline install below.
Claude Code:
claude mcp add prototyper-ui -- npx -y @prototyperco/mcp@latest
Claude Desktop / Cursor / VS Code / Codex:
Add to your MCP config: { "command": "npx", "args": ["-y", "@prototyperco/mcp@latest"] }
After install, call list_components to verify, then call design_create to open the Live Canvas.
If this workspace needs component setup, run: bunx @prototyperco/cli setupWorks with Claude Code, Codex, Cursor, OpenCode, and any MCP-compatible agent. Once wired up, design_create opens the canvas and returns a preview URL.
Prototyper UI CLI
A terminal-first workflow for browsing, installing, and managing components. Health checks, theme builder, and AI tooling built in. Read the CLI docs
56 Components
Copy-paste into your project. No runtime dependency. Accessible, interactive, and styled out of the box.
Manage your account preferences.
Typed component catalog
Agents get structured MCP access to every component. Type-safe generation means what agents build actually renders.
Copy-paste ownership
Components are files you copy into your project. No runtime dependency, no lock-in. Read the source, change anything.
OKLCH design tokens
Perceptually uniform colors with role-based surfaces. One set of tokens controls everything — agents can theme in real time.
Base UI native
Built on the successor to Radix. WCAG 2.1 AA, keyboard navigation, and ARIA are structural — not bolted on.
CLI & shadcn compatible
One command to set up. Works with the shadcn CLI. Full --json mode for agent-driven workflows.
CSS-first animation
Signature easing curves and micro-interactions with no JS runtime. Agents include animations automatically.
Architecture
One library. Agents connect via MCP. The canvas streams over Yjs. The CLI installs components.
Start building
Install your first component in seconds. Or connect your agent and let it handle everything.