vibn-frontend/V0-INTEGRATION.md

# v0 SDK Integration

## Overview

The UI UX section integrates with [v0.dev](https://v0.dev) - Vercel's AI-powered UI generator - to enable rapid prototyping, style exploration, and collaborative design feedback.

## Features

### ✨ AI-Powered Design Generation
- **Natural Language Prompts**: Describe your UI in plain English
- **Style Variations**: Choose from Modern, Minimal, Colorful, Dark, and Glass themes
- **Instant Generation**: Get production-ready React/Next.js code in seconds

### 🎨 Design Gallery
- **Organized Collection**: Browse all generated designs in one place
- **Preview & Stats**: View thumbnails, engagement metrics (views, likes, feedback)
- **Quick Actions**: Share, copy, or open in v0 for further editing

### 🔗 Sharing & Collaboration
- **Shareable Links**: Generate unique URLs for each design
- **Permission Control**: Toggle comments, downloads, and authentication
- **Feedback System**: Collect team comments and suggestions

### 📊 Style Management
- **Multiple Themes**: Experiment with different visual styles
- **Filter by Style**: Quickly find designs matching your aesthetic
- **Consistent Design Language**: Maintain visual coherence across your project

## Technical Implementation

### Installation

The v0 SDK is already installed in the project:

```bash
pnpm add v0-sdk
```

### API Setup

1. Get your API key from [v0.dev/chat/settings/keys](https://v0.dev/chat/settings/keys)
2. Add to your `.env.local`:

```bash
V0_API_KEY=your_api_key_here
```

### Basic Usage

```typescript
import { v0 } from 'v0-sdk'

// Create a new design chat
const chat = await v0.chats.create({
  message: 'Create a responsive navbar with Tailwind CSS',
  system: 'You are an expert React developer',
})

console.log(`Chat created: ${chat.webUrl}`)
```

### Advanced Features

#### Generate with Style Preferences

```typescript
const chat = await v0.chats.create({
  message: 'Create a modern hero section with gradient background',
  system: 'Use Tailwind CSS and create a minimal, clean design',
})
```

#### Iterate on Designs

```typescript
// Continue an existing chat
const updatedChat = await v0.chats.messages.create(chat.id, {
  message: 'Make the gradient more subtle and add a CTA button',
})
```

#### Access Generated Code

```typescript
// Get the latest message with code
const latestMessage = chat.messages[chat.messages.length - 1]
const code = latestMessage.code // Generated React/Next.js component
```

## Integration Points

### Current Implementation

The UI UX page (`/design`) currently uses **mock data** for:
- Design gallery items
- Feedback comments
- Share links
- Style filters

### Next Steps for Full Integration

1. **API Route for v0 Integration** (`/api/v0/generate`)
   ```typescript
   // app/api/v0/generate/route.ts
   import { v0 } from 'v0-sdk'
   
   export async function POST(request: Request) {
     const { prompt, style } = await request.json()
     
     const chat = await v0.chats.create({
       message: prompt,
       system: `Create a ${style} design using React and Tailwind CSS`,
     })
     
     return Response.json({ chatId: chat.id, webUrl: chat.webUrl })
   }
   ```

2. **Database Schema for Designs**
   ```sql
   CREATE TABLE designs (
     id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
     project_id INTEGER REFERENCES projects(id),
     name VARCHAR(255),
     prompt TEXT,
     v0_chat_id VARCHAR(255),
     v0_url TEXT,
     style VARCHAR(50),
     thumbnail_url TEXT,
     code TEXT,
     views INTEGER DEFAULT 0,
     likes INTEGER DEFAULT 0,
     created_at TIMESTAMP DEFAULT NOW(),
     updated_at TIMESTAMP DEFAULT NOW()
   );
   
   CREATE TABLE design_feedback (
     id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
     design_id UUID REFERENCES designs(id),
     user_id INTEGER,
     comment TEXT,
     created_at TIMESTAMP DEFAULT NOW()
   );
   ```

3. **Share Link Generation**
   ```typescript
   // Generate a unique shareable link
   const shareToken = generateSecureToken()
   const shareUrl = `https://vibn.co/share/${shareToken}`
   
   // Store in database with permissions
   await db.query(
     'INSERT INTO share_links (design_id, token, allow_comments, allow_downloads) VALUES ($1, $2, $3, $4)',
     [designId, shareToken, true, true]
   )
   ```

4. **Real-time Feedback**
   - Use WebSockets or Server-Sent Events for live comment updates
   - Integrate with notification system for new feedback

## UI Components

### Design Card
Displays a generated design with:
- Thumbnail preview
- Name and prompt
- Engagement stats (views, likes, feedback count)
- Style badge
- Action buttons (Share, Open in v0, Copy)

### Generator Form
- Textarea for design prompt
- Style selector (Modern, Minimal, Colorful, etc.)
- Generate button with loading state
- Example prompts for inspiration

### Share Modal
- Unique share link with copy button
- Permission toggles (comments, downloads, auth)
- Share to social media options

### Feedback Panel
- List of recent comments
- User avatars and timestamps
- Design reference badges
- Reply functionality

## Best Practices

### Writing Effective Prompts

✅ **Good Prompt:**
```
Create a responsive pricing section with 3 tiers (Starter, Pro, Enterprise). 
Each card should have:
- Plan name and price
- List of 5 features with checkmarks
- A "Get Started" button (primary for Pro tier)
- Hover effect that lifts the card
Use Tailwind CSS and make it modern and clean.
```

❌ **Bad Prompt:**
```
Make a pricing page
```

### Style Consistency

- Use the same style preference across related components
- Document your chosen style in project settings
- Create a style guide based on generated designs

### Feedback Loop

1. Generate initial design
2. Share with team for feedback
3. Iterate based on comments
4. Track versions in design gallery
5. Export final code to your codebase

## Resources

- [v0 SDK Documentation](https://v0-sdk.dev)
- [v0 SDK GitHub](https://github.com/vercel/v0-sdk)
- [v0.dev Platform](https://v0.dev)
- [Example Apps](https://github.com/vercel/v0-sdk/tree/main/examples)

## Future Enhancements

- **Version History**: Track design iterations and allow rollback
- **Component Library**: Extract reusable components from designs
- **A/B Testing**: Compare different style variations
- **Export Options**: Download as React, Vue, or HTML
- **Design Tokens**: Automatically extract colors, spacing, typography
- **Figma Integration**: Sync designs with Figma for designer collaboration
- **Analytics**: Track which designs get the most engagement
- **AI Suggestions**: Recommend improvements based on best practices