使用说明

v0 mcp

英语 | 中文

Vercel v0 MCP Server for Claude Code-通过模型上下文协议使用AI生成漂亮的UI组件。

✨ 协作开发：该项目是通过Claude Code和Gemini CLI之间的创新合作，使用Vibe Coding方法构建的，展示了人工智能辅助开发工作流程的强大功能。

🎯 特性

生成UI组件：根据自然语言描述创建React组件
图像到UI：将设计图像转换为可用的React代码
基于聊天的迭代：通过对话迭代优化组件
多种型号：支持v0-1.5-md、v0-1.5-lg和v0-1.0-md
TypeScript支持：通过Zod模式验证实现完全类型安全
流媒体支持：实时生成进度

🚀 快速开始

# 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"

🛠 安装

1.克隆或下载

git clone <repository-url>
cd v0-mcp

2.安装依赖项

npm install

3.设置环境

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

4.建设项目

npm run build

⚙️ 配置

🔑 获取v0 API密钥

在配置v0-mcp之前，您需要一个v0 API密钥：

访问 v0 API模型文档
登录您的Vercel帐户
导航到API密钥部分
生成新的API密钥
安全地复制并保存您的密钥

Claude代码集成

📖 快速设置指南-选择最适合您的方法

方法1:CLI配置（推荐）

使用Claude Code CLI添加v0 mcp：

# 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

设置您的v0 API密钥：

选项A：在CLI设置期间添加密钥

# 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

选项B：编辑 .claude.json 安装后的文件

运行后 claude mcp add 命令，编辑生成的 .claude.json 文件：

{
  "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"
      }
    }
  }
}

选项C：系统环境变量（最安全）

# 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.

方法2：手动配置（高级）

创建或编辑Claude Code配置文件：
- macOS/Linux: ~/.claude.json
- 视窗: %USERPROFILE%\.claude.json
添加v0 mcp服务器配置：

{
  "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"
      }
    }
  }
}

重新启动Claude代码 以使更改生效。

验证

配置后，您应该在Claude Code中看到v0 mcp工具：

✅ v0_generate_ui -从文本生成UI组件
✅ v0_generate_from_image -从图像引用生成UI
✅ v0_chat_complete -迭代UI开发聊天
✅ v0_setup_check -验证API连接

🔗 为什么使用MCP（模型上下文协议）？

MCP优势：

无缝集成：工具在Claude中原生出现，没有API杂耍
增强的上下文：Claude了解您的v0工作流程，并提供更好的帮助
实时可用性：在编码会话期间，工具始终可用
类型安全：内置完整的参数验证和错误处理
持久状态：跨工具调用维护对话上下文

工作原理： 当你在Claude中提到v0 mcp或UI生成时，这些工具会自动可用。Claude可以根据您的要求智能地选择合适的工具，使开发过程感觉自然和完整。

Claude桌面集成

添加到您的 claude_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"
      }
    }
  }
}

光标集成

添加到光标MCP配置中：

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

🔧 可用工具

`v0_generate_ui`

根据文本描述生成UI组件。

参数：

prompt （必填）：UI组件的描述
model：要使用的v0模型（默认值：v0-1.5-md）
stream：启用流式响应（默认值：false）
context：可选的现有代码上下文

`v0_generate_from_image`

从图像引用生成UI组件。

参数：

imageUrl （必填）：参考图像的URL
prompt：附加说明
model：要使用的v0模型（默认值：v0-1.5-md）

`v0_chat_complete`

基于对话上下文的聊天UI开发。

参数：

messages （必填）：对话消息数组
model：要使用的v0模型（默认值：v0-1.5-md）
stream：启用流式响应（默认值：false）

`v0_setup_check`

验证v0 API配置和连接。

🔑 环境变量

变量	必填	默认	描述
`V0_API_KEY`	✅	-	您的v0 API密钥
`V0_BASE_URL`	❌	`https://api.v0.dev/v1`	v0 API基础URL
`V0_DEFAULT_MODEL`	❌	`v0-1.5-md`	要使用的默认模型
`V0_TIMEOUT`	❌	`60000`	API超时（ms）
`MCP_SERVER_NAME`	❌	`v0-mcp`	MCP服务器名称
`LOG_LEVEL`	❌	`info`	日志记录级别

🚀 使用示例

克劳德密码

配置后，您可以通过多种方式使用v0 mcp：

直接v0 mcp使用

只需在您的请求中提到v0 mcp，Claude就会自动选择合适的工具：

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.

检查API设置

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的日志记录 JSON格式
上下文信息 用于API调用和工具使用
错误追踪 具有堆栈跟踪和元数据
可配置的日志级别 通过 LOG_LEVEL 环境变量

高级错误处理

分类错误类型 （API、网络、超时、速率限制等）
重试逻辑 瞬态误差的指数回退
用户友好的错误消息 提供可操作的指导
全面的错误元数据 用于调试

测试基础设施

Jest测试框架 支持TypeScript
综合单元测试 适用于所有核心组件
测试覆盖率报告 具有可配置的阈值
模拟实现 对于外部依赖关系

提高了可靠性

输入验证 使用Zod模式
优雅的错误处理 适用于所有故障模式
性能监控 带请求定时
健康检查 用于API连接

💖 支持这个项目

如果你觉得这个项目有帮助，请考虑支持它：

您的支持有助于维护和改进v0 mcp！

📄 许可证

麻省理工学院

使用说明

v0 mcp

🎯 特性

🚀 快速开始

🛠 安装

1.克隆或下载

2.安装依赖项

3.设置环境

4.建设项目

⚙️ 配置

🔑 获取v0 API密钥

Claude代码集成

方法1:CLI配置（推荐）

方法2：手动配置（高级）

验证

🔗 为什么使用MCP（模型上下文协议）？

Claude桌面集成

光标集成

🔧 可用工具

v0_generate_ui

v0_generate_from_image

v0_chat_complete

v0_setup_check

🔑 环境变量

🚀 使用示例

克劳德密码

直接v0 mcp使用

特定工具使用

生成登录表单

将设计转换为代码

迭代开发

检查API设置

高级使用示例

创建仪表板组件

从线框构建

迭代优化

🧪 发展

🛡️ 增强功能

结构化日志记录

高级错误处理

测试基础设施

提高了可靠性

💖 支持这个项目

📄 许可证

相关 MCP

设计转代码服务

Figma设计转代码工作流服务

UI组件协议服务器

Neon MCP服务器测试

Storybook故事生成服务器

Figma MCP代码生成工具

`v0_generate_ui`

`v0_generate_from_image`

`v0_chat_complete`

`v0_setup_check`