Korean | 한국어

베셀 v0 MCP Claude Code Server - 모델 Context Protocol을 통해 AI를 사용하여 아름다운 UI 구성 요소를 생성합니다.

✨ **관람 개발 **: 이 프로젝트는 Claude Code와 Gemini CLI 사이의 혁신적인 협업을 통해 Vibe Coding 방법론을 사용하여 구축되었습니다. AI-assisted 개발 워크플로우의 힘을 발휘합니다.

특징

• Generate UI 구성 요소: 자연적인 언어 묘사에서 React 구성품 만들기
• ** UI로 이미지**: React code로 디자인 이미지를 변환
• ** 채팅 기반 반복 **: 대화를 통해 Iteratively 정제 성분
• 멀티 모델: v0-1.5-md, v0-1.5-lg 및 v0-1.0-md 지원
• TypeScript 지원: Zod schema 검증을 통한 전체 유형 안전
• Streaming Support: 실시간 생성 진행

⭐ 빠른 시작

 임명

##1. 복제 또는 다운로드

##2. 의존성 설치

##3. 설치 환경

##4. 프로젝트 구축

# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #

☸ 당신의 v0 API 열쇠를 얻기

v0-mcp를 구성하기 전에 v0 API 키가 필요합니다.

1. Visit v0 모델 API 문서
2. ** Vercel 계정에 로그인 **
3. ** API Keys 섹션에 네비게이트 **
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"],