英语

Vercel v0 磁共振 Claude Code的服务器 - 通过"模型背景协议"使用AI生成美丽的UI组件.

** 协作发展**: 这个项目是通过克洛德码和双子座CLI之间的创新合作而建立起来的,使用维比编码方法——展示AI辅助开发工作流程的力量.

□ * * * * 特点

• ** 遗传物UI组件**: 从自然语言描述创建反应组件
• 乌伊图图**: 将设计图像转换为工作反应代码
• ** 基于聊天的重复**: 通过对话逐步完善组件
• 多式模型:支持v0-1.5-md、v0-1.5-lg和v0-1.0-md
• ** TypeScript Support**:全型安全,Zod schema验证
• ** 结构支持**:实时生成进度

# # # 快速启动 # # # # # # QQ Quick start

□ 安装

1. 克隆或下载

2. 安装附属物

3. 设置环境

4. 建设项目

□ QQ 配置

获取您的 v0 API 密钥

在配置 v0- mcp 之前, 您需要 v0 API 键 :

1. 查看v0型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"],