v0 clone

⚠️ Developer Preview: This SDK is currently in beta and is subject to change. Use in production at your own risk.

Deploy Your Own

You can deploy your own version of the v0 clone to Vercel with one click:

Setup

Environment Variables

Create a .env file with all required variables:

1
# Auth Secret - Generate a random string for production
2
# Generate with: openssl rand -base64 32
3
# Or visit: https://generate-secret.vercel.app/32
4
AUTH_SECRET=your-auth-secret-here
5

6
# Database URL - PostgreSQL connection string
7
POSTGRES_URL=postgresql://user:password@localhost:5432/v0_clone
8
# For Vercel Postgres, use the connection string from your dashboard
9

10
# Get your API key from https://v0.dev/chat/settings/keys
11
V0_API_KEY=your_v0_api_key_here
12

13
# Optional: Use a custom API URL
14
# V0_API_URL=http://localhost:3001/v1

Database Setup

This project uses PostgreSQL with Drizzle ORM. Set up your database:

1. Generate Database Schema:

   1
   pnpm db:generate

2. Run Database Migrations:

   1
   pnpm db:migrate

3. Optional - Open Database Studio:

   1
   pnpm db:studio

Getting Started

Then, run the development server:

1
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Features

This v0 clone includes:

Core Features

• AI Elements Integration: Uses AI Elements components for a polished UI
• v0 SDK Integration: Connects to the v0 Platform API for generating apps
• Real-time Preview: Split-screen interface with chat and preview panels
• Conversation History: Maintains chat history throughout the session
• Suggestion System: Provides helpful prompts to get users started
• Streaming Support: Toggle between streaming and non-streaming AI responses for real-time updates
• Comprehensive Task Support: Full support for all v0 Platform API task types including:
  • task-thinking-v1 - AI reasoning and thought processes
  • task-search-web-v1 - Web search operations with results
  • task-search-repo-v1 - Repository/codebase search functionality
  • task-diagnostics-v1 - Code analysis and issue detection
  • task-read-file-v1 - File reading operations
  • task-coding-v1 - Code generation and editing tasks
  • task-generate-design-inspiration-v1 - Design inspiration generation
  • Graceful fallback for unknown task types with user-friendly display

Authentication & Multi-Tenant Features

• Anonymous Access: Unauthenticated users can create chats directly (with rate limits)
• Guest Access: Users can register as guests for persistent sessions
• User Registration/Login: Email/password authentication with secure password hashing
• Session Management: Secure session handling with NextAuth.js
• Multi-Tenant Architecture: Multiple users share the same v0 API organization
• Ownership Mapping: Authenticated users only see their own chats and projects
• Rate Limiting: Different limits for anonymous, guest, and registered users
• User Navigation: Header dropdown with user info and sign-out options

Usage

Setup

1. Set up all environment variables in .env
2. Run database migrations with pnpm db:migrate
3. Start the development server with pnpm dev or production server with pnpm start

Using the App

1. Anonymous Usage: Visit the homepage and start creating chats immediately (3 chats/day limit)
2. Guest Access: Register as a guest for persistent sessions (5 chats/day limit)
3. Full Account: Create a permanent account for higher limits (50 chats/day)
4. Use the "Streaming" toggle in the header to enable/disable real-time streaming responses
5. Enter a prompt describing the app you want to build
6. Watch as v0 generates your app in real-time in the preview panel
7. Continue the conversation to iterate and improve your app
8. Authenticated users' chats are automatically saved and associated with their account

Architecture

Frontend

• app/page.tsx - Main UI with chat interface, streaming toggle, and preview panel
• components/ai-elements/ - AI Elements components for the UI
• components/shared/app-header.tsx - Navigation header with user authentication
• Uses @v0-sdk/react components for rendering streaming AI responses

Backend & API

• app/api/chat/route.ts - Chat creation and messaging with ownership tracking
• app/api/chats/ - User's chat listing and individual chat access
• app/api/projects/ - User's project listing and individual project access
• app/(auth)/ - Authentication configuration and login/register pages

Database

• Users: Store user accounts with email and hashed passwords
• ProjectOwnership: Maps v0 API project IDs → user IDs (ownership only)
• ChatOwnership: Maps v0 API chat IDs → user IDs with optional project association
• AnonymousChatLog: Tracks anonymous chat creation by IP address for rate limiting

Multi-Tenant Design

• v0 API as Source of Truth: All actual chat/project data stays in v0 API
• Ownership Layer: Database only tracks "who owns what"
• Access Control: API routes filter v0 data based on ownership
• No Data Duplication: Avoids storing redundant data

Streaming Implementation

When streaming is enabled:

• Frontend sends streaming: true to the API route
• API route calls v0.chats.create({ responseMode: 'experimental_stream' })
• Server returns a streaming response with Content-Type: text/event-stream
• Frontend uses StreamingMessage component from @v0-sdk/react to render responses in real-time

Database Commands

• pnpm db:generate - Generate migration files from schema changes
• pnpm db:migrate - Apply pending migrations
• pnpm db:studio - Open Drizzle Studio for database inspection
• pnpm db:push - Push schema changes directly (for development)

Security Features

• Password hashing with bcrypt
• Secure session cookies
• CSRF protection
• SQL injection protection via Drizzle ORM
• User data isolation through ownership mapping

User Types & Rate Limits

• Anonymous Users: No account needed, 3 chats per day, no data persistence
• Guest Users: Auto-created accounts, 5 chats per day, data persists during session
• Registered Users: Permanent accounts, 50 chats per day, data persists across sessions and devices

Rate limits are enforced per 24-hour period and reset daily.

You now have a working multi-tenant v0 clone with authentication! Feel free to explore the v0 Platform API and extend your app with additional features.