The UI framework for the AI era
56 accessible components that agents can read, compose, and render. Open source. One prompt to set up.
Every component is a file. Agents read, compose, and render them through structured MCP access. Humans read the source, change anything, ship it as their own.
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
One prompt. Your agent installs, builds, and previews — live in the browser. Powered by Yjs for conflict-free collaboration.
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.
A terminal-first workflow for browsing, installing, and managing components. Health checks, theme builder, and AI tooling built in.
Copy-paste into your project. No runtime dependency. Accessible, interactive, and styled out of the box.
Manage your account preferences.
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.
One library. Agents connect via MCP. The canvas streams over Yjs. The CLI installs components.
Install your first component in seconds. Or connect your agent and let it handle everything.