ai-gen

A bare-bones v0 clone - an AI-powered UI code generator that creates HTML/Tailwind CSS components from natural language descriptions.

Features

• AI Code Generation - Describe a UI component in plain English and get HTML/Tailwind CSS code
• Real-time Streaming - Watch the code generate live with instant preview updates
• Live Preview - See your generated UI rendered in a sandboxed iframe
• Code Modification - Iteratively refine generated code through conversation
• Split-Pane Layout - Resizable chat and preview panels
• Syntax Highlighting - View generated code with VSCode Dark+ theme
• Copy to Clipboard - One-click code copying

Tech Stack

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS 4
• OpenAI Agents SDK
• Bun

Getting Started

1. Clone the repo and install dependencies:

bun install

2. Create a .env.local file with your OpenAI API key:

OPENAI_API_KEY=your_api_key_here

3. Run the development server:

bun dev

4. Open http://localhost:3000

How It Works

1. Enter a description of the UI you want (e.g., "Create a login form with email and password fields")
2. The AI generates HTML/Tailwind CSS code streamed in real-time
3. Preview updates live as code streams in
4. Continue the conversation to modify or enhance the generated UI