Your agent's favorite way to build UI
59 components designed for agents and humans to build together. Open source, free, and one prompt to set up.
59 accessible components built on Base UI, styled with 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.
A typed component catalog guarantees what agents generate actually renders. A Live Canvas lets you watch it happen in the browser. Powering prototyper.co.
Paste one prompt into Claude Code or Codex and watch your agent build UI in real time. A shared browser canvas powered by Yjs — you see every component the moment the agent creates it.
Watch components appear as the AI generates them. Every change streams to the browser instantly via Yjs.
The full Prototyper UI library is available. Build entire pages from buttons to complex forms.
Fine-grained operations (add, update, move, remove) stream over the wire. No full-spec re-renders.
Full undo/redo powered by Yjs history. Roll back any AI change with a single keystroke.
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
Install Prototyper UI for me.
Prototyper UI is a component library with a Live Canvas — a shared browser preview for humans and agents powered by Yjs, so we can both see changes instantly.
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 -- bunx @prototyperco/mcp@latest
Other agents (Cursor, VS Code, OpenCode, Codex):
Add to your MCP config: { "command": "bunx", "args": ["@prototyperco/mcp@latest"] }
If this workspace needs Prototyper UI setup, run: bunx @prototyperco/cli setup
If you cannot install MCP servers or run local commands in this chat, tell me to use Claude Code, Cursor, Codex, or another agent that can.
After install, call list_components to verify the MCP server is working.
During setup, ask me exactly one question:
Which starting point should I use?
1. This existing project
2. A fresh demo app
Then finish the install and tell me which agent/editor is active.Works with Claude Code, Codex, Cursor, OpenCode, and any MCP-compatible agent. Once wired up, design_create opens the canvas and returns a preview URL.
Drop generative UI into any app. Compose is a rendering engine that streams type-safe components from any model — validated against a typed catalog so what agents generate is guaranteed to render.
Add a generative UI surface to any React app. One provider, one renderer — the model streams, your app renders.
Every component is validated against a typed catalog. Agents can only produce UI that compiles and renders correctly.
One click to copy the generated JSX into your project. No lock-in — it’s the same components you already use.
The building blocks agents compose with and humans customize. Accessible, interactive, and styled out of the box.
Designed end-to-end for generative UI — from structured agent access to perceptually uniform design tokens.
Agents get structured MCP access to every component. Type-safe generation means what agents build actually renders.
Components are files you copy into your project. No runtime dependency, no lock-in. Read the source, change anything.
Perceptually uniform colors with role-based surfaces. One set of tokens controls everything — agents can theme in real time.
Built on the successor to Radix. WCAG 2.1 AA, keyboard navigation, and ARIA are structural — not bolted on.
One command to set up. Works with the shadcn CLI. Full --json mode for agent-driven workflows.
Signature easing curves and micro-interactions with no JS runtime. Agents include animations automatically.
Install your first component in seconds, or connect your agent and let it handle everything.