V0 Platform MCP

v0平台mcp

](https://www.npmjs.com/package/v0-platform-mcp)

Vercel v0 MCP Server for Claude Code-通过模型上下文协议进行多屏幕UI原型设计和增量开发。

使用Vibe编码方法，使用Claude Code构建

快速开始

# 1. Get your v0 API key from https://vercel.com/docs/v0/model-api

# 2. Add to Claude Code
claude mcp add v0-platform-mcp --env V0_API_KEY=YOUR_KEY -- npx v0-platform-mcp

就是这样！立即开始构建原型。

两个工作流

原型工作流（新项目）

从想法到实施的快速通道分为3个步骤：

1. prepare_prototype_context  → Parse description into structured context
2. generate_prototype         → Generate multi-screen UI prototype
3. handoff_to_claude_dev      → Create implementation brief

用途： MVP、快速原型制作、概念验证

MCP工作流程（现有项目）

分5个步骤进行具有持久上下文的增量开发：

1. load_project_context       → Load existing project state
2. plan_increment             → Analyze patterns & plan feature
3. generate_prototype         → Generate UI following patterns
4. handoff_to_claude_dev      → Create implementation brief
5. update_project_context     → Save feature & components

用途： 生产应用程序、增量功能、模式一致性

核心工具

示例：电子商务商店

Step 1: Parse Requirements
Use prepare_prototype_context to "building ShopZen - an e-commerce platform
with product catalog, detail page, cart, checkout, and user account. For web."

Step 2: Generate Prototype
Use generate_prototype with the context from prepare_prototype_context

Step 3: Create Implementation Brief
Use handoff_to_claude_dev with the prototype from generate_prototype

结果： 完整的5屏原型，包含18+个组件和实施简报

MCP工作流程：增量开发

MCP工作流跨功能维护项目上下文：

创建 project-context.json:

{
  "product_name": "TaskMaster Pro",
  "domain": "Project Management",
  "features": {
    "done": ["Dashboard Overview"],
    "in_progress": ["Task List"],
    "planned": ["Settings Page"]
  },
  "routes": ["/dashboard"],
  "reusable_components": ["DataTable", "FilterBar"],
  "design_rules": ["Use Tailwind CSS", "Follow shadcn/ui patterns"],
  "constraints": ["All pages fit within dashboard shell"]
}

5步工作流程：

1. load_project_context       Load state from project-context.json
2. plan_increment             Plan "Settings Page" using existing patterns
3. generate_prototype         Generate UI following project patterns
4. handoff_to_claude_dev      Create implementation brief
5. update_project_context     Mark feature done, add routes/components

优点：

• ✅ 跨功能的一致性
• ✅ 自动重用组件
• ✅ 情境感知规划
• ✅ 增量开发
• ✅ 持久项目状态

配置

环境变量

手动配置

编辑 ~/.claude.json:

{
  "mcpServers": {
    "v0-platform-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["v0-platform-mcp"],
      "env": {
        "V0_API_KEY": "your_v0_api_key_here"
      }
    }
  }
}

发展

# Install dependencies
npm install

# Development mode
npm run dev

# Testing
npm test
npm run test:coverage

# Build
npm run build

# Lint
npm run lint

建筑

v0平台mcp遵循干净的分层架构：

• 客户端层：克劳德代码、克劳德桌面、光标IDE（通过MCP）
• 工具层：7个用于原型生成和规划的MCP工具
• 服务层：业务逻辑（上下文、原型、交接、规划服务）
• 基础设施：配置、日志记录（Winston）、验证（Zod）
• 外部服务：v0 API，文件系统

看 diagrams/ 用于详细架构图的文件夹。

v0型号选项

集成

克劳德桌面版

编辑 claude_desktop_config.json:

{
  "mcpServers": {
    "v0-platform-mcp": {
      "command": "npx",
      "args": ["v0-platform-mcp"],
      "env": {"V0_API_KEY": "your_key"}
    }
  }
}

光标IDE

添加到光标MCP配置：

{
  "mcpServers": {
    "v0-platform-mcp": {
      "command": "npx",
      "args": ["v0-platform-mcp"],
      "env": {"V0_API_KEY": "your_key"}
    }
  }
}

工作流原理

v0生成：

• ✅ UI设计和布局
• ✅ 视觉组件
• ✅ 造型（顺风CSS）
• ✅ 部件结构

Claude Dev实现了：

• ✅ 后端逻辑
• ✅ API集成
• ✅ 数据管理
• ✅ 认证
• ✅ 测试

链接

• v0模型API文档
• 模型上下文协议
• 克劳德代码

许可证

MIT-有关详细信息，请参阅许可证文件

作者

龙阮