v0 API Setup

Quick Start

1. Add Your API Key

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

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

Add your v0 API key:

# 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

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

3. Test the Integration

Navigate to UI UX section (http://localhost:3000/1/design)

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.

(Optional) Select a style: Modern, Minimal, Colorful, etc.
Click Generate Design
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

app/api/v0/generate/route.ts - API endpoint that calls v0
app/(dashboard)/[projectId]/design/page.tsx - UI with working form
.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

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:

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

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

2.7 KiB Raw Blame History