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-serverThree 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. request dispatches {resource, action, params} for everything else — deploy, list/get/delete chats, versions, projects, env vars, reports. search returns the manifest of what request can do.
Create or continue a chat; returns chatId, webUrl, files (path + content)
Generic {resource, action, params} dispatcher: deploy, list/get/delete chats, versions, projects, env vars, reports.
On-demand manifest of every resource, action, and parameter.
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>
)
}