Vercel v0

Vercel v0 MCP Server for Claude Code - Generate beautiful UI components using AI through the Model Context Protocol.

✨Collaborative Development: This project was built through innovative collaboration between Claude Code and Gemini CLI using Vibe Coding methodology - demonstrating the power of AI-assisted development workflows.

- Generate UI Components: Create React components from natural language descriptions
- Image to UI: Convert design images into working React code
- Chat-based Iteration: Iteratively refine components through conversation
- Multiple Models: Support for v0-1.5-md, v0-1.5-lg, and v0-1.0-md
- TypeScript Support: Full type safety with Zod schema validation
- Streaming Support: Real-time generation progress

# 1. Clone and enter the project git clone <repository-url> && cd v0-mcp # 2. Install dependencies npm install # 3. Create .env file and add your v0 API key npm run setup # Edit .env file with your V0_API_KEY # 4. Build the project npm run build # 5. Add to Claude Code (ensure you are in the project root) claude mcp add v0-mcp --env V0_API_KEY=$(grep V0_API_KEY .env | cut -d '=' -f2) -- node $(pwd)/dist/main.js # 6. Start using it in Claude Code! # Try: "Hey v0-mcp, create a login form with email and password fields"

git clone <repository-url> cd v0-mcp

npm run setup # Edit .env file with your v0 API key

Before configuring v0-mcp, you'll need a v0 API key:

📖Quick setup guide - choose the method that works best for you

Method 1: CLI Configuration (Recommended)

# Navigate to your v0-mcp directory first cd /path/to/your/v0-mcp # Add the MCP server using current directory claude mcp add v0-mcp -- node $(pwd)/dist/main.js

# When adding the server, include the API key (run from v0-mcp directory) claude mcp add v0-mcp --env V0_API_KEY=your_v0_api_key_here -- node $(pwd)/dist/main.js

Option B: Edit.claude.jsonfile after setup

After running theclaude mcp addcommand, edit the generated.claude.jsonfile:

{ "mcpServers": { "v0-mcp": { "type": "stdio", "command": "node", "args": ["/absolute/path/to/your/v0-mcp/dist/main.js"], "env": { "V0_API_KEY": "your_v0_api_key_here" } } } }

Option C: System environment variable (Most secure)

# Add to your shell profile (.bashrc, .zshrc, etc.) echo 'export V0_API_KEY="your_v0_api_key_here"' >> ~/.zshrc # Reload your shell configuration source ~/.zshrc

claude mcp list node scripts/verify-claude-code-setup.js

Verifying v0 API connection... ✓ v0-mcp server found in Claude configuration ✓ API key is configured ✓ Successfully connected to v0 API Setup is complete! You can now use v0-mcp in Claude Code.

Method 2: Manual Configuration (Advanced)

Create or edit the Claude Code configuration file:

- macOS/Linux:~/.claude.json
- Windows:%USERPROFILE%\.claude.json

{ "mcpServers": { "v0-mcp": { "type": "stdio", "command": "node", "args": ["/absolute/path/to/v0-mcp/dist/main.js"], "env": { "V0_API_KEY": "your_v0_api_key_here" } } } }

- Restart Claude Codefor the changes to take effect.

After configuration, you should see v0-mcp tools available in Claude Code:

- ✅v0_generate_ui- Generate UI components from text
- ✅v0_generate_from_image- Generate UI from image references
- ✅v0_chat_complete- Iterative UI development chat
- ✅v0_setup_check- Verify API connectivity

- Seamless Integration: Tools appear natively in Claude without API juggling
- Enhanced Context: Claude understands your v0 workflow and provides better assistance
- Real-time Availability: Tools are always accessible during your coding sessions
- Type Safety: Full parameter validation and error handling built-in
- Persistent State: Maintains conversation context across tool calls

How It Works:When you mention v0-mcp or UI generation in Claude, the tools automatically become available. Claude can intelligently choose the right tool based on your request, making the development process feel natural and integrated.

Add to yourclaude_desktop_config.json:

{ "mcpServers": { "v0-mcp": { "command": "node", "args": ["/path/to/v0-mcp/dist/main.js"], "env": { "V0_API_KEY": "your_v0_api_key_here" } } } }

{ "mcpServers": { "v0-mcp": { "command": "node", "args": ["/path/to/v0-mcp/dist/main.js"], "env": { "V0_API_KEY": "your_v0_api_key_here" } } } }

Generate UI components from text descriptions.

- prompt(required): Description of the UI component
- model: v0 model to use (default: v0-1.5-md)
- stream: Enable streaming response (default: false)
- context: Optional existing code context

Generate UI components from image references.

- imageUrl(required): URL of the reference image
- prompt: Additional instructions
- model: v0 model to use (default: v0-1.5-md)

Chat-based UI development with conversation context.

- messages(required): Array of conversation messages
- model: v0 model to use (default: v0-1.5-md)
- stream: Enable streaming response (default: false)

Validate v0 API configuration and connectivity.

Once configured, you can use v0-mcp in multiple ways:

Simply mention v0-mcp in your request, and Claude will automatically select the appropriate tool:

Hey v0-mcp, create a modern login form with email and password fields

v0-mcp: Generate a dashboard component with charts and KPI cards

@v0-mcp convert this wireframe to a React component: [image URL]

Use v0_generate_ui to create a modern login form with email, password fields, and a blue submit button with rounded corners.

Use v0_generate_from_image with this Figma design URL: https://example.com/design.png

Use v0_chat_complete to refine the previous login form by adding a "Remember me" checkbox and "Forgot password" link.

Use v0_setup_check to verify your v0 API connection and configuration.

Use v0_generate_ui with the following prompt: "Create a modern dashboard component with a sidebar navigation, header with user profile dropdown, and a main content area with grid layout for cards. Include metrics cards showing KPIs with charts. Use shadcn/ui components and Tailwind CSS."

Use v0_generate_from_image with your wireframe image URL and add: "Convert this wireframe into a fully functional React component. Add proper spacing, modern styling, and make it responsive for mobile devices."

Use v0_chat_complete with conversation history: [ {"role": "user", "content": "Create a pricing table component"}, {"role": "assistant", "content": "[Previous pricing table code]"}, {"role": "user", "content": "Add a popular plan highlight and annual/monthly toggle"} ]

# Development mode with hot reload npm run dev # Type checking npm run lint # Run tests npm test # Test with coverage npm run test:coverage # Test in CI mode npm run test:ci # Clean build artifacts npm run clean # Test configuration npm run test:config # Test basic functionality npm run test:basic # Verify Claude Code setup npm run verify:claude-code

- Winston-based loggingwith JSON format
- Contextual informationfor API calls and tool usage
- Error trackingwith stack traces and metadata
- Configurable log levelsviaLOG_LEVELenvironment variable

- Categorized error types(API, Network, Timeout, Rate Limit, etc.)
- Retry logicwith exponential backoff for transient errors
- User-friendly error messageswith actionable guidance
- Comprehensive error metadatafor debugging

- Jest testing frameworkwith TypeScript support
- Comprehensive unit testsfor all core components
- Test coverage reportingwith configurable thresholds
- Mock implementationsfor external dependencies

- Input validationusing Zod schemas
- Graceful error handlingfor all failure modes
- Performance monitoringwith request timing
- Health checksfor API connectivity

If you find this project helpful, please consider supporting it:

Your support helps maintain and improve v0-mcp!

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Integrates the Dify AI API to generate Ant Design business component code. Supports text, image inputs, and streaming responses.

next-devtools-mcp is a MCP server that provides Next.js development tools and utilities for AI coding assistants like Claude and Cursor.

Word search, crossword, and sudoku generator MCP server with printable PDF worksheets, themed word banks, and verifiable LLM evals. Local-first, from the makers of puzzletide.com.

A demonstration server for ActionKit, providing access to Slack actions via Claude Desktop.

MCP server that lets Claude Code agents delegate tasks to agents in other project directories, with parallel dispatch, sessions, and async jobs.

Statistical regression testing for LLM agents: p-value, effect size, and CI on behavior change.

A Python MCP package that gives your LLM agents complete file system and shell capabilities — production-ready, sandboxed, and wired to any LLM in minutes.