UIGen is an AI-powered React component generator. Describe a UI in plain English and watch it materialise — live — in the browser. No boilerplate, no scaffolding, no context switching.

Built as a portfolio project to explore what a minimal, thoughtfully designed AI coding tool looks like when you care about the details.

You type a prompt. Claude generates a complete, working React component. A sandboxed iframe renders it immediately. You iterate in natural language until it looks exactly right, then copy or extend the code.

Nothing is written to disk during generation. UIGen maintains an in-memory virtual file system per session, so the preview always reflects the current state of every file without polluting your working directory.

• Conversational component generation — multi-turn chat with Claude; each message refines the current component or builds on it
• Live preview — JSX is Babel-compiled in the browser and rendered in a sandboxed iframe with no full-page reload
• Virtual file system — all generated files exist only in memory; the preview and code editor both read from the same in-memory tree
• Monaco editor — full syntax highlighting and editing for every generated file
• Multi-file awareness — Claude can create, edit, rename, and delete files across a session using structured tool calls (str_replace_editor, file_manager)
• Project persistence — registered users have their full message history and virtual FS saved to SQLite via Prisma; anonymous users can work without signing up
• GitHub OAuth + password auth — flexible sign-in; anonymous projects can be claimed after registration
• Runs without an API key — a static fallback is returned when no Anthropic key is configured, so the UI and architecture are fully explorable locally

User prompt
    │
    ▼
ChatInterface  ──→  POST /api/chat
                         │
                         ▼
                  Claude (streaming)
                  tool calls:
                  • str_replace_editor  ──→  virtual FS update
                  • file_manager        ──→  rename / delete
                         │
                         ▼
                  FileSystemProvider (React context)
                         │
                    ┌────┴────┐
                    ▼         ▼
              Monaco       PreviewFrame (iframe)
              Editor       Babel + import maps

1. The chat context sends messages plus the current virtual FS to /api/chat.
2. The API route streams a Claude response; tool calls carry file diffs or management operations.
3. Tool results update the in-memory virtual FS, shared via React context.
4. The preview iframe picks up the change, re-resolves @/ aliases and CDN npm packages via dynamic import maps, and re-renders without a full reload.
5. On stream completion, the project (messages + FS snapshot) is persisted to SQLite.

The generation prompt instructs Claude to treat /App.jsx as the entry point, use Tailwind CSS v4 utility classes, and resolve local imports via @/ aliases.

• Node.js 18 or later
• npm

git clone https://github.com/TheMyth01/uigen.git
cd uigen
npm run setup

npm run setup installs dependencies, generates the Prisma client, and runs database migrations.

Create a .env file in the project root and add your Anthropic API key:

ANTHROPIC_API_KEY=sk-ant-...

The application runs without a key — a static component is returned instead of a generated one, which is useful for exploring the UI and architecture without incurring API costs.

npm run dev

Open http://localhost:3000.

npm run dev        # Start dev server with Turbopack
npm run build      # Production build
npm run start      # Start production server
npm run lint       # Run ESLint
npm run test       # Run Vitest unit tests
npm run db:reset   # Reset database (destructive)

src/
├── app/                      # Next.js App Router pages and API routes
│   ├── api/
│   │   ├── auth/github/      # GitHub OAuth callback
│   │   └── chat/             # Streaming chat endpoint
│   └── [projectId]/          # Per-project route
├── components/
│   ├── chat/                 # ChatInterface, MessageList, MessageInput
│   ├── editor/               # Monaco-based code editor and file tree
│   └── preview/              # Sandboxed iframe renderer
├── lib/
│   ├── contexts/             # FileSystemProvider, ChatContext
│   ├── tools/                # str_replace_editor, file_manager tool definitions
│   ├── prompts/              # Generation system prompt
│   ├── transform/            # In-browser JSX transformer
│   ├── file-system.ts        # In-memory virtual FS
│   └── auth.ts               # JWT + bcrypt auth helpers
prisma/
└── schema.prisma             # User + Project models

Tests are co-located with the code they cover, under __tests__/ directories within each module.

• Export as a zip archive or copy individual files
• Shareable project URLs (read-only public links)
• NPM package resolution hints in the prompt (e.g. prefer date-fns over moment)
• Diff view between iterations
• Deployment to Vercel with a hosted demo