日本語 English

ベセルv0 MCP Claudeコード用のサーバー - モデルコンテキストプロトコルを介してAIを使用して美しいUIコンポーネントを生成します。

✨コラボレーション開発: このプロジェクトは、Claude CodeとGemini CLIとVib Codingの手法を用いた革新的なコラボレーションによって構築されました。

欲求の特徴

-UIコンポーネントを生成する: 自然言語の説明から React コンポーネントを作成する

• UIへのイメージ: 設計イメージを作業に変える React コード
• チャットベースの反復: 会話を通じてコンポーネントを反復
• 複数のモデル:v0-1.5-md、v0-1.5-lg、v0-1.0-mdのためのサポート
• TypeScript Support: Zodスキーマ検証によるフルタイプの安全 -Streaming Support:リアルタイム生成の進捗

すぐにスタート

インストール

##1. クローンまたはダウンロード

##2. 依存関係のインストール

##3. セットアップ環境

##4. プロジェクトの構築

¢ 設定

は 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"],