Design generation using V0 (v0.dev) via the official MCP server. Generates production React/Tailwind/Shadcn components with live preview URLs. Use for all design generation — original designs and clone workflows. Replaces Stitch for primary generation.
sendChatMessage on same chatIdMCPORTER_CALL_TIMEOUT=300000 mcporter call v0.createChat \
message="YOUR PROMPT" \
chatPrivacy="private" \
--output json
Returns: chatId, files (with path + source code), demo URL, webUrl.
MCPORTER_CALL_TIMEOUT=300000 mcporter call v0.sendChatMessage \
chatId="CHAT_ID" \
message="Fix: change background to #080C18, increase card padding to 24px" \
--output json
mcporter call v0.getChat chatId="CHAT_ID" --output json
mcporter call v0.findChats --output json
mcporter call v0.getUser --output json
Include exact brand tokens, layout spec, component names, content.
Template:
Create a [screen type] for [product name].
Tech: React, Next.js App Router, TypeScript, Tailwind CSS, Shadcn UI, Lucide icons.
Design specs:
- Background: [hex]
- Card surface: [hex]
- Primary text: [hex]
- Accent: [hex]
- Font: [name]
- Border radius: [value]
Layout: [detailed section-by-section]
Components: [exact Shadcn components]
Content: [realistic data, not placeholder]
Requirements:
- Mobile-first responsive
- WCAG AA contrast
- 44px touch targets
- Loading + empty states
Call createChat with the prompt. Save:
Call sendChatMessage with specific fixes on the same chatId.
stitch-pulls/[project]/| Stitch | V0 | |
|---|---|---|
| Output | Raw HTML/CSS | React/TypeScript + Tailwind |
| Preview | Must render locally | Live demo URL |
| Iteration | edit_screens (limited) | sendChatMessage (full chat) |
| Quality | Good structure, basic styling | Production components |
| Timeout | 180s | 300s (longer but better) |
| Components | Generic HTML | Shadcn UI + Lucide |
MCPORTER_CALL_TIMEOUT=300000 — V0 generation takes 60-120schatPrivacy="private" for client workstitch.* tools