Connect v0 to your editor. Generate UI, manage chats, deploy—over stdio.
{
"mcpServers": {
"v0": {
"command": "npx",
"args": ["-y", "v0-mcp-server"],
"env": {
"V0_API_KEY": "your-key"
}
}
}
}claude mcp add v0 -e V0_API_KEY=your-key -- npx -y v0-mcp-serverSix tools over MCP (stdio). Your editor or agent sends a tool name and arguments; the server returns structured responses.
generate creates or continues a chat and returns chatId, webUrl, and files with full contents. list_chats, get_chat, and delete_chat manage chats. rate_limits reports quota. deploy deploys a chat to a shareable URL.
Create or continue a chat; returns chatId, webUrl, files (path + content)
List chats (id, name, updatedAt). Pagination: limit, offset.
Get a chat by id; returns name, webUrl, files (path + content).
Delete a chat by id. Irreversible.
Usage and quota (limit, remaining, resetAt).
Deploy a chat to a shareable URL. Returns deploy id, url, status.
Call generate with a prompt. The response includes chatId, webUrl, and files (path + content).
{
"tool": "generate",
"arguments": {
"prompt": "A responsive card component with an avatar, name, role, and follow button."
}
}// components/profile-card.tsx
import { Avatar, AvatarImage, AvatarFallback }
from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
interface ProfileCardProps {
name: string
role: string
avatarUrl?: string
}
export function ProfileCard({
name,
role,
avatarUrl,
}: ProfileCardProps) {
return (
<div className="flex items-center justify-between
rounded-xl border border-border bg-card p-4
shadow-sm">
<div className="flex items-center gap-3">
<Avatar>
<AvatarImage src={avatarUrl} alt={name} />
<AvatarFallback>
{name.slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<p className="text-sm font-medium
text-foreground">{name}</p>
<p className="text-xs text-muted-foreground">
{role}
</p>
</div>
</div>
<Button size="sm" variant="outline">
Follow
</Button>
</div>
)
}