100% browser-only preview
Babel + @tailwindcss/browser + ESM import maps. No containers, no WebContainer boot, no per-user server sandboxes. Scales multi-tenant for free.
Open source · MIT · Built with Claude
Prompt → live React UI, built with your design system.
Describe what you want in plain English. Claude writes real React code against any design system you plug in — public npm, private registry, or your own monorepo package. The preview runs entirely in your browser. No servers to spin up, no WebContainers to boot, no infra to maintain.
demo · muted · loop
What's inside
Not another AI prompt box over a fixed stack.
Every other AI UI prototyper ships heavy runtime infra and a hardcoded design system. This one treats the design system as a plug-in.
Bring your own design system
Public npm, private GitHub Packages, pnpm link, file: deps, or a monorepo workspace. Point one config file at Material UI, HeroUI, or your internal @your-scope/ds-core — no engine changes.
Security by default
Tool use writes to an in-memory virtual filesystem, not your disk. The preview runs in a browser iframe, not on your host. Private packages resolve inside that sandbox — nothing ever lands in your node_modules. A malicious skill or prompt injection has no shell, no filesystem, nowhere to go.
Starts from a template, not from zero
Every session begins inside an isolated template — not a blank create-next-app. The agent only sees your design system and the canvas, so tokens go into your components instead of Claude re-scaffolding a Next.js project on every turn. Short context, cheap sessions, fast iteration.
A real agent loop
Tool use (Read / Write / Edit / Grep / Skill) over a virtual filesystem. Prompt caching and context compression via Haiku for long sessions.
On-demand skills
Design-system-specific reference docs in markdown. The agent loads them only when needed — mirrors Claude Agent Skills.
Multimodal chat
Drop a screenshot into the chat, paste from clipboard, or attach from disk. Say ‘build this’ next to a mock — Claude gets the image alongside your text, in the same turn.
Visual inspector
Click any element in the preview to attach its tag, classes, source file, and line to your next message. The agent edits the right thing.
File locks
Mark Navbar.tsx, Footer.tsx, or index.css as locked and the agent's Write / Edit tools refuse to touch them.
Progressive rendering
Components appear in the preview as the agent writes them, not at the end of a long batch response.
Share links
Publish a read-only /share/[projectId] URL for design review. Full-screen preview with an ‘Open in editor’ handoff — your design partner sees the prototype without installing anything.
Download as ZIP
Export the virtual filesystem with an auto-generated package.json and a README explaining how to wire it into Vite, Next.js, or CRA.
~/react-ui-gen
$ pnpm install $ cp .env.example .env $ echo "ANTHROPIC_API_KEY=sk-ant-..." >> .env $ pnpm dev > ready on http://localhost:3000
Compare
Where it stands vs. v0, Bolt, and Lovable.
| Capability | react-ui-gen | v0 | Bolt.new | Lovable |
|---|---|---|---|---|
| Your own design system | Yes | shadcn only (beta) | No | No |
| Preview compute | Browser | Server | WebContainer | Server |
| Open source | MIT | No | Partial | No |
| Private registry support | Yes | No | No | No |
Stack
Built on tools you already trust.
Next.js 16React 19TypeScriptTailwind v4PrismaClaude Agent SDK
Read the code. Run it locally.
The live demo needs an Anthropic API key, so there's no hosted playground. Clone the repo, drop in your key, and you're prototyping in a minute.