v0 UI Generator

Generate, refine, and manage UI components through the Vercel v0 Platform API — directly from VS Code.

This extension provides 12 MCP tools that let AI assistants (Claude, Copilot) create production-ready React components by talking to v0.

Features

• Generate UI — describe what you want, get back working React/TSX code
• Iterate — refine generated components with follow-up messages
• Projects — organize work into v0 projects with shared instructions
• Chat state — automatic tracking of active chats across tool calls
• Deployment diagnostics — check logs and errors for v0 deployments
• Secure — API key stored in VS Code's encrypted SecretStorage

Getting Started

1. Get an API key

Go to v0.app/chat/settings/keys (requires v0 Premium or Team plan) and create a key.

2. Set your key in VS Code

Run v0: Set API Key from the Command Palette (Ctrl+Shift+P). The status bar shows $(check) v0 when connected.

This stores the key in VS Code's encrypted SecretStorage and makes the v0 tools available to GitHub Copilot and other VS Code MCP consumers automatically.

3. Set up for Claude Code (additional step)

Why is this needed? Claude Code has its own MCP configuration — it doesn't read VS Code's SecretStorage. You need to make V0_API_KEY available as an environment variable that Claude Code can see.

Option A — System environment variable (recommended)

Set V0_API_KEY as a persistent environment variable, then register the server:

# PowerShell — set as a permanent user-level variable
[System.Environment]::SetEnvironmentVariable('V0_API_KEY', 'your-key-here', 'User')

# macOS / Linux — add to your shell profile (~/.bashrc, ~/.zshrc, etc.)
export V0_API_KEY="your-key-here"

Then restart VS Code (so the new variable is inherited) and register:

claude mcp add v0-ui-generator -- node /path/to/v0-mcp/dist/main.js

No -e flag needed — the server inherits V0_API_KEY from your environment.

Option B — Inline with -e flag

Pass the key directly when registering (the key is stored in Claude's config file):

claude mcp add v0-ui-generator -e V0_API_KEY=your-key-here -- node /path/to/v0-mcp/dist/main.js

Note: The -e flag requires KEY=value format — V0_API_KEY alone won't work.

After registering, restart your Claude Code session (the tool list loads at startup). Then verify with v0_setup_check.

Tools

Requirements

• VS Code 1.97 or later
• Node.js 22 or later
• v0 Premium or Team plan

Standalone MCP Server (without the extension)

You can use the MCP server directly without the VS Code extension:

git clone https://github.com/Skie-Art/v0-mcp.git
cd v0-mcp
npm install && npm run build

# Set the key as a persistent environment variable (see Getting Started § 3 above)
# Then register the server:
claude mcp add v0-ui-generator -- node dist/main.js

# Or pass inline:
claude mcp add v0-ui-generator -e V0_API_KEY=your-key-here -- node dist/main.js

Built with

• v0-sdk — official Vercel v0 Platform API SDK
• @modelcontextprotocol/sdk — MCP server framework

License

MIT