v0-mcp Server

How to use

You connect Claude Code to the v0-mcp server and interact through natural language prompts. Start a session, then ask it to generate UI components, convert a design image to code, or iterate on components through a chat flow. The server runs locally and exposes a standard input/output interface so Claude Code can send requests and receive responses in real time.

Typical usage patterns include: creating a login form from a description, turning a wireframe into a React component, or refining a component through a conversation. You can also specify a preferred v0 model and enable streaming to see progress as it happens.

How to install

Prerequisites: Node.js and npm installed on your machine. You should also have a Claude Code setup ready to integrate MCP servers.

Step 1: Clone the project and enter the directory.

git clone <repository-url> && cd v0-mcp

Step 2: Install dependencies.

npm install

Step 3: Create and populate your environment file with your v0 API key. Then build the project.

npm run setup
# Edit .env with V0_API_KEY
npm run build

Step 4: Add the MCP server to Claude Code and verify the connection.

claude mcp add v0-mcp --env V0_API_KEY=$(grep V0_API_KEY .env | cut -d '=' -f2) -- node $(pwd)/dist/main.js

Step 5: Start using it in Claude Code. Try a simple prompt like creating a login form with email and password fields.

Configuration and usage notes

Get your v0 API key before configuring the MCP server. You’ll use this key to authorize requests from Claude Code.

Claude Code can integrate via several configurations. The recommended approach is to configure a local stdio MCP server using Node.js and the built dist/main.js entry point.

You can also configure a JSON/TOML/YAML-style MCP entry if you are organizing multiple MCP servers or sharing a configuration across tools.

Configuration: MCP server connection examples

The following examples show how to configure the MCP server for Claude Code. Use the format that matches your setup.

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

Another common integration is to place the MCP server in your Claude Code configuration file to enable desktop or cursor integrations.

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

Security, reliability, and troubleshooting

Keep your V0_API_KEY secure. Prefer storing it in environment variables rather than hard-coding it into scripts. Use the most secure method available in your environment to expose the key to Claude Code.

The MCP server uses a Node runtime and requires a build of the project before runtime. If you encounter connectivity or validation errors, verify that the API key is correct and that the dist/main.js path is accessible from the Claude Code environment.

Usage examples

Direct usage in Claude Code: say commands like creating a modern login form or converting a wireframe to a React component. Claude Code will route requests to v0-mcp and return generated UI code.

Hey v0-mcp, create a login form with email and password fields

Iterative refinement through chat: ask to add a Remember me checkbox or a Forgot password link, then continue refining the component.

Development and testing notes

You can run in development mode with hot reloading if provided by your project setup. Use package scripts to lint, test, and verify Claude Code integration.

Run checks to verify Claude Code setup and API connectivity as part of your validation process.

v0_generate_ui

Generate UI components from text descriptions. Parameters include prompt, model, stream, and context.

v0_generate_from_image

Generate UI components from an image reference. Parameters include imageUrl, prompt, and model.

v0_chat_complete

Chat-based UI development with conversation context. Parameters include messages, model, and stream.

v0_setup_check

Validate API configuration and connectivity.