Source : Anthropic - Claude code in action

UIGen 是一個 AI 驅動的 React 組件生成器，具有即時預覽功能。它允許用戶用自然語言描述組件，然後生成可運行的 React 組件並提供即時預覽。

主要功能包括：

透過聊天界面描述組件需求
AI 自動生成 React 組件代碼
虛擬文件系統管理（無需寫入硬碟）
即時預覽生成的組件
用戶認證和專案持久化存儲

AI-powered React component generator with live preview.

• Node.js 18+
• npm

1. Optional Edit .env and add your Anthropic API key:

ANTHROPIC_API_KEY=your-api-key-here

The project will run without an API key. Rather than using a LLM to generate components, static code will be returned instead.

2. Install dependencies and initialize database

npm run setup

This command will:

• Install all dependencies
• Generate Prisma client
• Run database migrations

npm run dev

Open http://localhost:3000

1. Sign up or continue as anonymous user
2. Describe the React component you want to create in the chat
3. View generated components in real-time preview
4. Switch to Code view to see and edit the generated files
5. Continue iterating with the AI to refine your components

• AI-powered component generation using Claude
• Live preview with hot reload
• Virtual file system (no files written to disk)
• Syntax highlighting and code editor
• Component persistence for registered users
• Export generated code

• Next.js 15 with App Router
• React 19
• TypeScript
• Tailwind CSS v4
• Prisma with SQLite
• Anthropic Claude AI
• Vercel AI SDK