Simple v0: v0 Platform API Demo

Simple v0

The simplest way to use v0. Just prompt and see your app generated instantly - no chat management, no complexity. Build AI-powered apps with real-time generation and seamless deployment to Vercel.

[Image blocked: Screenshot]

Deploy Your Own

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

Setup

1. Install dependencies:

   1
   pnpm install

2. Configure environment: Create a .env.local file in the root directory:

   1
   V0_API_KEY=your_api_key_here
   2
   
   3
   # Optional: For rate limiting (if not provided, rate limiting is disabled)
   4
   KV_REST_API_URL=your_kv_rest_api_url
   5
   KV_REST_API_TOKEN=your_kv_rest_api_token

   • Get your v0 API key from v0.dev/settings
   • Optionally get your Upstash Redis credentials from upstash.com for rate limiting

3. Run development server:

   1
   pnpm dev

   Open http://localhost:3000 to view the application.

Features

• AI App Generation: Create applications from natural language prompts using v0's AI
• Project Management: Organize your work into projects with multiple chat conversations
• Live Preview: Instantly preview generated applications in an embedded iframe
• Chat Management: Continue conversations, fork chats, rename, and delete as needed
• One-Click Deployment: Deploy generated apps directly to Vercel
• File Attachments: Upload images and files to enhance your prompts
• Voice Input: Use speech-to-text for hands-free prompt creation
• Rate Limiting: Built-in rate limiting (3 AI generations per 12 hours) to prevent abuse
• Responsive Design: Works seamlessly on desktop and mobile devices
• Session Caching: Improved performance with intelligent caching of projects and chats

API Routes

• GET /api/validate - Validate API key
• GET /api/projects - List all projects
• GET /api/projects/[id] - Get project details with associated chats
• POST /api/generate - Generate or continue app conversation
• GET /api/chats/[id] - Retrieve chat details and history
• DELETE /api/chats/[id] - Delete a chat conversation
• PATCH /api/chats/[id] - Update chat (rename)
• POST /api/chats/fork - Create a new chat from an existing one
• POST /api/deployments - Deploy generated apps to Vercel

Tech Stack

• Framework: Next.js 15 with App Router
• Runtime: React 19 with TypeScript
• Styling: Tailwind CSS 4
• UI Components: Radix UI primitives with custom styling
• API Integration: v0-sdk for Platform API communication
• Rate Limiting: Upstash Redis with sliding window algorithm
• Fonts: Geist Sans and Geist Mono via next/font
• Build Tool: Turbopack for fast development

Rate Limiting

This application implements optional rate limiting to prevent abuse and ensure fair usage:

• Limit: 3 AI generations per 12 hours per IP address
• What counts as 1 generation: Each call to v0.chats.create() or v0.chats.sendMessage()
• Scope: Applies to all AI generation requests regardless of chat type
• Implementation: Uses Upstash Redis with a sliding window algorithm
• Optional: If Upstash credentials are not provided, rate limiting is disabled
• Fallback: If rate limiting service is unavailable, requests are allowed (fail-open strategy)

When the rate limit is exceeded, users receive a 429 status code with information about when they can try again.

Project Structure

1
├── app/
2
│   ├── api/                    # API route handlers
3
│   │   ├── chats/[chatId]/     # Chat CRUD operations
4
│   │   ├── deployments/        # Vercel deployment handling
5
│   │   ├── generate/           # AI app generation
6
│   │   ├── projects/           # Project management
7
│   │   └── validate/           # API key validation
8
│   ├── components/             # App-specific components
9
│   ├── projects/[projectId]/   # Dynamic project pages
10
│   │   └── chats/[chatId]/     # Individual chat pages
11
│   ├── globals.css             # Global styles and Tailwind config
12
│   ├── layout.tsx              # Root layout with metadata
13
│   └── page.tsx                # Homepage with main interface
14
├── components/
15
│   └── ui/                     # Reusable UI components (buttons, dialogs, etc.)
16
├── lib/
17
│   ├── hooks/                  # Custom React hooks
18
│   └── utils.ts                # Utility functions
19
└── public/                     # Static assets

Environment Variables

Development Commands

1
# Install dependencies
2
pnpm install
3

4
# Start development server with Turbopack
5
pnpm dev
6

7
# Build for production
8
pnpm build
9

10
# Start production server
11
pnpm start
12

13
# Run linting
14
pnpm lint
15

16
# Format code
17
pnpm format
18

19
# Check formatting
20
pnpm format:check

Usage

1. Start Creating: Enter a prompt describing the app you want to build
2. Organize Work: Create projects to group related conversations
3. Iterate: Continue conversations to refine and improve your apps
4. Deploy: One-click deployment to Vercel for sharing and testing
5. Manage: Rename, delete, or fork chats as your projects evolve

Learn More

• v0 Platform API Documentation
• Next.js Documentation
• Tailwind CSS
• Radix UI