v0_generate_uiLABSCO SUMMARY
A component from a screenshot, refined in the same conversation.
The image path is the one that saves real time — hand it a design and get working React back — and because refinement is a separate call, the third attempt builds on the second instead of starting over.
What it is
A connector to the Vercel v0 Model API for building UI. It covers the three ways a component actually gets made: described in words, copied from an image of a design, or refined turn by turn until it is right.
What you get
v0_generate_ui— a React component from a natural-language descriptionv0_generate_from_image— working React code from an image of a designv0_chat_complete— iterative refinement, so the component is improved through conversation rather than regenerated from scratchv0_setup_check— verifies the API connectivity before you start, which is what turns a silent failure into a clear message- A choice of model: v0-1.5-md, v0-1.5-lg and v0-1.0-md, with Zod schema validation on the inputs and streaming for generation progress
Requirements
A v0 API key from your Vercel account, held in V0_API_KEY. Clone the repository, npm install, npm run setup to create the .env, and npm run build; then register it with claude mcp add v0-mcp --env V0_API_KEY=... -- node $(pwd)/dist/main.js, or put the absolute path to dist/main.js in your client config. The key can also live in your shell profile, which is the option that keeps it out of both the config file and your command history. MCP_SERVER_NAME renames the server if you need it to. Node and TypeScript are assumed, and the verification script reports whether the server is registered, the key is configured, and the v0 API actually answers.
Setup effort
Build from source — git clone https://github.com/hellolucky/v0-mcp.git
USE CASES
01
Building a form you have described in words
Say what fields it needs and get a React component back in the editor you are already working in.
02
Implementing a design someone sent you
Pass the image and get working code, instead of reading the mockup and typing it out.
03
Getting the component right in a few passes
Refine through conversation so each change builds on the last version rather than regenerating from the original prompt.
04
Working out why nothing is coming back
Run the setup check to see whether the server is registered, the key is present and the API answers.
05
Trading quality for speed
Pick the model that fits the job — the larger one when the component is complex, the smaller when it is a first draft.
4 tools
Listed in project docs. Your client may show a different list.
v0_generate_from_imagev0_chat_completev0_setup_checkBEFORE YOU INSTALL
What to know first
Tools you get
4 tools named in the project's documentation.
Requires
- node on PATH
- V0_API_KEY in your environment
Where it runs
All 3 documented clients run the server on your machine.
INSTALLATION
Connect your client
You clone and build this one yourself.
Server setup
TERMINAL
git clone https://github.com/hellolucky/v0-mcp.git
cd v0-mcp
npm install
npm run setup
npm run buildMCP Clients
Claude Code
CLAUDE CODE · JSON
{
"mcpServers": {
"v0-mcp": {
"type": "stdio",
"command": "node",
"args": [
"<YOUR_PATH_TO_V0_MCP>/dist/main.js"
],
"env": {
"V0_API_KEY": "<YOUR_V0_API_KEY>"
}
}
}
}~/.claude.json (macOS/Linux) · %USERPROFILE%\.claude.json (Windows)
Claude Desktop
CLAUDE DESKTOP · JSON
{
"mcpServers": {
"v0-mcp": {
"command": "node",
"args": [
"<YOUR_PATH_TO_V0_MCP>/dist/main.js"
],
"env": {
"V0_API_KEY": "<YOUR_V0_API_KEY>"
}
}
}
}claude_desktop_config.json
Cursor
CURSOR · JSON
{
"mcpServers": {
"v0-mcp": {
"command": "node",
"args": [
"<YOUR_PATH_TO_V0_MCP>/dist/main.js"
],
"env": {
"V0_API_KEY": "<YOUR_V0_API_KEY>"
}
}
}
}
