99 lines
2.7 KiB
Markdown
99 lines
2.7 KiB
Markdown
# 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`! 🚀
|
|
|