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 description
`v0_generate_from_image` — working React code from an image of a design
`v0_chat_complete` — iterative refinement, so the component is improved through conversation rather than regenerated from scratch
`v0_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

One command plus a key — npx -y v0-mcp-node, then supply credentials