Built with ☕, 🐈‍⬛, and far too many oklch values.

v0 UI Generator

Bring a design specialist to your project.

Generate, iterate, and consult on UI right in your editor — using your favourite AI assistant, powered by v0, delivered through MCP.

What this does

Your AI coding assistant is great at logic, architecture, and implementation. It is not always great at visual design. v0 is.

v0 UI Generator gives MCP-compatible assistants 12 tools for UI generation, design consultation, iterative refinement, project management, and deployment diagnostics. Your assistant can send v0 the right design context, receive generated React/TSX or design guidance, then adapt the result to your codebase conventions.

Claude Code is supported through the standalone MCP server. GitHub Copilot and other VS Code assistants can use the VS Code extension path. Other MCP-compatible tools can launch the npm package directly.

⚇ Agent in the loop

The real power is in how your assistant and v0 work together. Your assistant reads your code — the design tokens, the surface colors, the existing patterns — and gives v0 the context it needs. v0 comes back with expert design recommendations. Your assistant adapts them to your codebase conventions and applies the changes. One conversation, three capabilities working together.

✨ Two modes of working

❧ Design consultation

Tell your assistant what feels wrong — "the hover states feel invisible" or "this button doesn't match the rest of the UI." It reads your code, sends v0 the design context, and v0 comes back with specific fixes: oklch values, className snippets, multiple options ranked from subtle to expressive, and the rationale behind each choice.

"Why do my hover states disappear in dark mode?" "Is this button accessible on this surface?" "Give me three options for this card's focus state — subtle to bold."

✧ Component generation

Describe what you want in natural language. v0 generates production-ready React/TSX. Your assistant refines it with follow-up messages, extracts the files, and adapts them to your codebase patterns.

Perfect for: scaffolding new components, building themed interfaces, generating design system lookbooks, prototyping layouts.

↻ Iterative by design

v0 conversations persist across tool calls. Ask for a color palette, refine it with your constraints, generate a full interface, then iterate on the details — each message builds on the last. v0 learns your design language as the conversation progresses.

First pass not quite right? Send v0 your design system principles and it adjusts. Getting close but the shadows feel too heavy? Refine again. The conversation keeps its context so you're building on progress, not starting over.

Real workflow example:

v0_generate_ui — "Establish a celestial astrology color palette with oklch tokens"
v0_refine_ui — "Now build a chat interface using that palette"
v0_refine_ui — "Add a design manifest lookbook page"
v0_get_files — Extract the generated components

✻ Use cases

Scenario	What happens
"Fix the hover states on these buttons"	Your assistant reads the code and surface colors, v0 returns three options with oklch values, contrast ratios, and rationale — ranked subtle to expressive
"Build a dark celestial chat interface"	v0 generates a full themed component — custom color tokens, micro-interactions, SVG icons, responsive layout
"These don't match our design system"	Send v0 your design principles, it adjusts its recommendations to match your conventions
"Create a design system lookbook"	v0 produces a visual reference page with color swatches, typography scale, and interactive component states
"The shadow feels too heavy, make it more raised"	Refines the previous generation with your feedback — no re-explaining context, it remembers the conversation

Getting started

Option A — VS Code extension

Use this path for GitHub Copilot and other VS Code assistants that consume VS Code MCP server definitions.

Requirements

VS Code 1.97+
A v0 Premium or Team plan
A v0 API key from v0.app/chat/settings/keys

Setup

Install v0 UI Generator from the VS Code Marketplace.
Run v0: Set API Key from the Command Palette (Ctrl+Shift+P).
Confirm the status bar shows ✓ v0.
Ask your VS Code assistant to use the v0 tools, or verify with v0_setup_check.

Option B — Standalone npm MCP server

Use this path for Claude Code, other MCP-compatible CLIs, IDEs, and agent runtimes.

Requirements

Node.js 22+
A v0 Premium or Team plan
A v0 API key from v0.app/chat/settings/keys
An MCP-compatible client that can launch stdio servers

Generic MCP command

npx v0-ui-generator

Configure your MCP client to launch that command with V0_API_KEY in the server environment.

Claude Code example

claude mcp add v0-ui-generator -e V0_API_KEY=your-key-here -- npx v0-ui-generator

Restart your client session and verify with v0_setup_check.

⌘ 12 MCP tools

Tool	What it does
Generation
`v0_generate_ui`	Generate UI from a text prompt — returns source files + chat URL
`v0_refine_ui`	Iterate on an existing generation with follow-up context
Extraction
`v0_get_chat`	Retrieve full chat history and metadata
`v0_get_files`	Extract generated source files from a chat
Chat management
`v0_list_chats`	List chats from the v0 API
`v0_list_active_chats`	List chats tracked in the current session
`v0_set_active_chat`	Switch which chat receives refinements
Projects
`v0_create_project`	Create a v0 project with shared design instructions
`v0_list_projects`	List all projects
`v0_assign_to_project`	Assign a chat to a project
Operations
`v0_check_deployment`	Get deployment logs and errors
`v0_setup_check`	Validate API connectivity and account info

Model selection

v0_generate_ui and v0_refine_ui accept current v0 model IDs:

v0-auto
v0-mini
v0-pro
v0-max
v0-max-fast

Omit model to let v0 choose the default model.

Built with

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

License

MIT

v0 UI Generator (Preview)

skie-art