UIGen

AI-powered React component generator with live preview.

Prerequisites

• Node.js 18+
• npm

Setup

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

Running the Application

Development

npm run dev

Open http://localhost:3000

Claude GitHub Action Setup

This repository includes a workflow at .github/workflows/claude.yml that lets contributors invoke Claude from PR/issue comments by mentioning @claude.

Required one-time setup in GitHub:

1. Install the Claude GitHub App on this repository: https://github.com/apps/claude
2. Add a repository secret named ANTHROPIC_API_KEY with your Claude API key

After setup, use comments like:

• @claude review this PR for bugs and security issues
• @claude implement the TODO in src/lib/provider.ts

Usage

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

Features

• 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

Tech Stack

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

Test