---

name: v0-api description: | Integrates Claude Code with Vercel's v0 API for AI-powered UI generation. Generate production-ready React and Next.js components from natural language prompts. Create UI with v0, generate components, build interfaces with v0 API, Vercel generative UI, v0 chat completions, generate React component, generate Next.js app, v0 project, deploy to v0. license: Apache-2.0 compatibility: Requires v0 Premium ($20/mo) or Team ($30/user/mo) plan, V0_API_KEY environment variable, network access metadata: author: Claude Agent version: "1.0.0" allowed-tools: Bash Write Read Edit WebFetch

v0 API Integration

Integrate with Vercel's v0 generative UI system to create production-ready React and Next.js components from natural language descriptions. This skill provides access to both the Model API for component generation and the Platform API for project management.

Prerequisites

Before using this skill, ensure you have:

1. v0 Premium or Team Plan: Required for API access ($20/mo Premium or $30/user/mo Team)
2. V0_API_KEY: Set your API key as an environment variable

   export V0_API_KEY="your-api-key-here"
   

3. Get your API key: Visit https://v0.dev/chat/settings/keys

Core Capabilities

Model API (Chat Completions)

• Generate UI components via OpenAI-compatible chat completions endpoint
• Available models: v0-1.5-md (everyday tasks), v0-1.5-lg (complex reasoning), v0-1.0-md (legacy)
• Supports streaming responses via Server-Sent Events
• Endpoint: https://api.v0.dev/v1/chat/completions

Platform API (Project Management)

• Create and manage v0 projects programmatically
• Trigger deployments to Vercel
• Manage integrations and webhooks
• TypeScript SDK: v0-sdk npm package

Output Options

• Display generated code directly in chat
• Write components to local files
• Provide v0.dev URLs for sharing and further editing

Instructions

Generating UI Components (Model API)

Step 1: Verify V0_API_KEY is set

echo $V0_API_KEY | head -c 10  # Should show first 10 chars

Step 2: Describe your UI component with specific details:

• Component type (button, form, navbar, card, etc.)
• Styling preferences (Tailwind CSS, shadcn/ui, etc.)
• Functionality requirements (state, handlers, props)
• Framework target (React, Next.js)

Step 3: Make the API request

curl -s https://api.v0.dev/v1/chat/completions \
  -H "Authorization: Bearer $V0_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "v0-1.5-md",
    "messages": [{"role": "user", "content": "Your prompt here"}]
  }'

Step 4: Parse the response and extract generated code

Step 5: Optionally save to local files and provide v0.dev URL

Managing Projects (Platform API)

For advanced project management, use the v0-sdk:

npm install v0-sdk

import { V0Client } from 'v0-sdk';

const client = new V0Client({ apiKey: process.env.V0_API_KEY });

// Create a new project
const project = await client.projects.create({
  name: 'my-app',
  framework: 'nextjs'
});

// List chats
const chats = await client.chats.list();

Usage Examples

Example 1: Generate a Simple Component

Input: "Create a responsive navbar with v0"

Process:

curl -s https://api.v0.dev/v1/chat/completions \
  -H "Authorization: Bearer $V0_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "v0-1.5-md",
    "messages": [{
      "role": "user",
      "content": "Create a responsive navbar with a logo on the left, navigation links in the center, and a sign-in button on the right. Use Tailwind CSS and shadcn/ui components. Make it mobile-friendly with a hamburger menu."
    }]
  }'

Output:

• TypeScript/React component code displayed in chat
• Saved to components/navbar.tsx
• v0.dev URL for editing: https://v0.dev/chat/abc123

Example 2: Generate a Full Application

Input: "Build a todo app with Next.js using v0"

Process: Use detailed prompt specifying all requirements

curl -s https://api.v0.dev/v1/chat/completions \
  -H "Authorization: Bearer $V0_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "v0-1.5-lg",
    "messages": [{
      "role": "user",
      "content": "Create a complete todo application with Next.js App Router. Include: task list with checkboxes, add new task form, delete task button, filter by status (all/active/completed), persist to localStorage. Use Tailwind CSS and shadcn/ui."
    }]
  }'

Output:

• Multi-file component structure
• Main page, TodoList, TodoItem, AddTodo components
• Written to appropriate directories

Example 3: Stream Component Generation

Input: "Generate a landing page with real-time updates"

Process: Use streaming for live updates

curl -N https://api.v0.dev/v1/chat/completions \
  -H "Authorization: Bearer $V0_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "v0-1.5-md",
    "messages": [{
      "role": "user",
      "content": "Create a modern SaaS landing page with hero section, features grid, pricing table, and footer."
    }],
    "stream": true
  }'

Output: Server-Sent Events with incremental code generation

Guidelines

Model Selection

• v0-1.5-md: Use for everyday tasks - faster response, lower cost
• v0-1.5-lg: Use for complex reasoning - multi-component apps, sophisticated logic
• v0-1.0-md: Legacy model, use only for compatibility

Prompt Best Practices

1. Be specific about component structure and functionality
2. Specify styling framework (Tailwind CSS recommended)
3. Include accessibility requirements (ARIA labels, keyboard navigation)
4. Mention responsive design needs explicitly
5. Reference design systems (shadcn/ui, Radix UI, etc.)

Output Handling

1. Always display generated code in chat for review
2. Ask user before writing to files
3. Preserve existing code when adding new components
4. Provide v0.dev URL for visual editing

Rate Limits and Credits

• API usage consumes credits from your v0 plan
• Monitor usage at v0.dev dashboard
• Implement retry logic with exponential backoff

Error Handling

Missing API Key

Error: V0_API_KEY not set

Solution: Set your API key: export V0_API_KEY="your-key"

401 Unauthorized

{"error": {"message": "Invalid API key"}}

Solution: Verify key at https://v0.dev/chat/settings/keys

429 Rate Limited

{"error": {"message": "Rate limit exceeded"}}

Solution: Wait and retry, or upgrade plan for higher limits

400 Bad Request

{"error": {"message": "Invalid request"}}

Solution: Check prompt format and model name

Helper Scripts

Use the provided scripts for common operations:

# Generate component (non-streaming)
./scripts/v0_model_api.sh "v0-1.5-md" "Create a button component"

# Generate with streaming
./scripts/v0_stream.sh "v0-1.5-md" "Create a responsive navbar"

References

For detailed technical documentation:

• API_REFERENCE.md - Complete API specification
• EXAMPLES.md - Extended examples and patterns
• scripts/ - Executable helper scripts

Limitations

• Paid Plan Required: v0 API access requires Premium ($20/mo) or Team plan
• Credit-Based Billing: API calls consume credits; monitor usage
• Rate Limits: Requests are rate-limited based on plan tier
• Code Review Needed: Generated code may require manual refinement for production
• No Guaranteed Uptime: API availability subject to Vercel's service status
• Context Limits: Long conversations may exceed token limits