Английский | 中

Vercel v0 MCP Сервер для Claude Code - Генерировать красивые компоненты пользовательского интерфейса с использованием ИИ через протокол Model Context.

orСовместное развитие: Этот проект был построен благодаря инновационному сотрудничеству между Claude Code и Gemini CLI с использованием методологии Vibe Coding, демонстрирующей возможности рабочих процессов разработки с помощью ИИ.

Feature Особенности

** Собрать компоненты пользовательского интерфейса**: Создание компонентов React из описания естественного языка ** Изображение UI**: Преобразование изображений в рабочий код React ** Итерация на основе чата**: Итеративно усовершенствовать компоненты через разговор Множественные модели: поддержка v0-1.5-md, v0-1.5-lg и v0-1.0-md ** Поддержка сценариев типа**: полная безопасность с валидацией схемы Zod -Потоковая поддержка: прогресс в генерации в режиме реального времени

Быстрый старт

###Установка

###1 Клон или скачать

###2 Установите зависимость

###3 - Настройка среды

###4 Построить проект

️ Конфигурация

Получение ключа API v0

Перед конфигурацией v0-mcp вам понадобится ключ API v0:

1. ** Посмотреть документацию V0 Model API**
2. ** Зарегистрируйтесь в своем аккаунте Vercel**
3. ** Перейти к разделу ключей API**
4. ** Создайте новый API-ключ**

v0-mcp

English | 中文

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.

🎯 Features

• 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

🚀 Quick Start

# 1. Clone and enter the project
git clone  && 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"

🛠 Installation

1. Clone or Download

git clone 
cd v0-mcp

2. Install Dependencies

npm install

3. Setup Environment

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

4. Build Project

npm run build

⚙️ Configuration

🔑 Getting Your v0 API Key

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

1. Visit the v0 Model API documentation
2. Sign in to your Vercel account
3. Navigate to the API Keys section
4. Generate a new API key
5. Copy and save your key securely

Claude Code Integration

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

Method 1: CLI Configuration (Recommended)

1. Add v0-mcp using the Claude Code CLI:

   # 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
   

2. Set your v0 API key:

   Option A: Add key during CLI setup

   # 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.json file after setup

   After running the claude mcp add command, edit the generated .claude.json file:

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