# v0 API Setup

## Quick Start

### 1. Add Your API Key

Create a `.env.local` file in the `vibn-frontend` directory:

```bash
cd /Users/markhenderson/ai-proxy/vibn-frontend
touch .env.local
```

Add your v0 API key:

```env
# v0 API Key
V0_API_KEY=v1:GjJL450FZD5bJsMSw1NQrvNE:3yLQa91hjOKA0WohS0tLQODg

# Database (already configured in code, but can override here)
DATABASE_URL=postgresql://postgres:jhsRNOIyjjVfrdvDXnUVcXXXsuzjvcFc@metro.proxy.rlwy.net:30866/railway
```

### 2. Restart Your Dev Server

```bash
# Stop the current server (Ctrl+C)
# Then restart:
pnpm dev
```

### 3. Test the Integration

1. Navigate to **UI UX** section (http://localhost:3000/1/design)
2. Enter a design prompt, e.g.:
   ```
   Create a modern pricing section with 3 tiers. Include a hero heading, 
   feature lists with checkmarks, and call-to-action buttons. Use Tailwind CSS.
   ```
3. (Optional) Select a style: Modern, Minimal, Colorful, etc.
4. Click **Generate Design**
5. v0 will open in a new tab with your generated design!

## How It Works

### API Flow

```
User Input → UI UX Page → /api/v0/generate → v0 SDK → v0.dev
                ↓
            New Tab Opens with Generated Design
```

### Files Changed

1. **`app/api/v0/generate/route.ts`** - API endpoint that calls v0
2. **`app/(dashboard)/[projectId]/design/page.tsx`** - UI with working form
3. **`.env.local`** - Your API key (create this manually)

### Features

✅ **Real-time Generation** - Submit prompt → Generate with v0 → Opens in new tab  
✅ **Style Selection** - Choose from 5 different design aesthetics  
✅ **Loading States** - Spinner, disabled inputs, toast notifications  
✅ **Error Handling** - Graceful failures with user-friendly messages  
✅ **Auto-clear Form** - Prompt resets after successful generation  

## Troubleshooting

### "V0_API_KEY not configured" Error

- Make sure `.env.local` exists in `/Users/markhenderson/ai-proxy/vibn-frontend/`
- Verify the file contains `V0_API_KEY=v1:...`
- Restart your dev server (`pnpm dev`)

### Generation Takes Too Long

- v0 typically responds in 5-15 seconds
- Check your internet connection
- Verify API key is valid at [v0.dev/chat/settings/keys](https://v0.dev/chat/settings/keys)

### Design Doesn't Open

- Check browser popup blocker settings
- Manually visit the v0 URL shown in the toast notification

## Next Steps

Once basic generation is working:

1. **Save to Database** - Store generated designs in PostgreSQL
2. **Design Gallery** - Display your created designs (currently shows mock data)
3. **Thumbnail Generation** - Capture screenshots of v0 designs
4. **Feedback System** - Allow team comments on designs
5. **Share Links** - Generate public URLs for client feedback

All implementation details are in `V0-INTEGRATION.md`! 🚀