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's not great at visual design. v0 is.

This extension connects v0 to Claude Code, GitHub Copilot, and any MCP-compatible agent — so your assistant can generate components, consult on design decisions, and iterate on UI without leaving your editor. No tab-switching, no copy-pasting — v0's design expertise becomes part of your assistant's toolkit through 12 MCP tools.

⚇   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.

❧   Design consultation

Tell your assistant what's 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.

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:

1. v0_generate_ui — "Establish a celestial astrology color palette with oklch tokens"
2. v0_refine_ui — "Now build a chat interface using that palette"
3. v0_refine_ui — "Add a design manifest lookbook page"
4. 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

1. Get an API key

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

2. Set your key

VS Code / GitHub Copilot:

Run v0: Set API Key from the Command Palette (Ctrl+Shift+P). The status bar shows ✓ v0 when connected. The v0 tools are immediately available to Copilot and other VS Code MCP consumers.

Claude Code:

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

Restart your Claude Code session and verify with v0_setup_check.

3. Start building

Ask your AI assistant to generate UI. It will call the v0 tools automatically.

| 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 |

Requirements

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

Built with

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

License

MIT