VIBN Frontend for Coolify deployment

V0-SETUP.md

@@ -0,0 +1,98 @@
+# 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`! 🚀
+