vibn-frontend/V0-INTEGRATION.md

v0 SDK Integration

Overview

The UI UX section integrates with 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:

pnpm add v0-sdk

API Setup

1. Get your API key from v0.dev/chat/settings/keys
2. Add to your .env.local:

V0_API_KEY=your_api_key_here

Basic Usage

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

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

// 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

// 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)

   // 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

   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

   // 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
• v0 SDK GitHub
• v0.dev Platform
• Example Apps

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