[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-v0-dev":3,"mdc-mz81di-key":33,"related-repo-openai-v0-dev":5217,"related-org-openai-v0-dev":5335},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":22,"repoUrl":23,"updatedAt":24,"license":25,"forks":26,"topics":27,"repo":28,"sourceUrl":31,"mdContent":32},"v0-dev","generate UI from prompts with v0","v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK\u002FAPI integration, or integrating v0 into development workflows with GitHub and Vercel deployment.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19],{"name":13,"slug":14,"type":15},"Vercel","vercel","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-04-06T18:40:26.336481",null,465,[],{"repoUrl":23,"stars":22,"forks":26,"topics":29,"description":30},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fvercel\u002Fskills\u002Fv0-dev","---\nname: v0-dev\ndescription: v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK\u002FAPI integration, or integrating v0 into development workflows with GitHub and Vercel deployment.\nmetadata:\n priority: 5\n docs:\n - \"https:\u002F\u002Fv0.dev\u002Fdocs\"\n - \"https:\u002F\u002Fvercel.com\u002Fdocs\u002Fv0\"\n sitemap: \"https:\u002F\u002Fv0.dev\u002Fsitemap.xml\"\n pathPatterns: []\n importPatterns:\n - '@v0\u002Fsdk'\n - 'v0'\n bashPatterns:\n - '\\bnpx\\s+v0\\b'\n - '\\bbunx\\s+v0\\b'\n - '\\bv0\\s+(generate|dev|chat)\\b'\n promptSignals:\n phrases:\n - 'generate with v0'\n - 'v0 components'\n - 'use v0'\n - 'v0 generate'\n minScore: 6\n---\n\n# v0 by Vercel\n\nYou are an expert in v0 (v0.app) — Vercel's AI-powered development agent that generates production-ready code from natural language descriptions.\n\n## Overview\n\nv0 transforms prompts into working React\u002FNext.js code. It supports 6M+ developers and 80K+ active teams globally. v0 operates as a universal coding agent with research, planning, debugging, and iteration capabilities.\n\n## Core Capabilities\n\n- **Natural language → code**: Describe what you want, get production React components\n- **Visual input**: Upload Figma designs, screenshots, or sketches → code\n- **Multi-framework**: Outputs React, Vue, Svelte, HTML, Markdown\n- **Agentic intelligence**: Research, plan, debug, iterate autonomously\n- **shadcn\u002Fui + Tailwind CSS**: Default styling system\n- **Full IDE**: Built-in VS Code editor, terminal, and git panel in the web UI\n\n## CLI Usage\n\n### Component Integration CLI (`v0` package)\n\nInstall and pull v0-generated components into your Next.js project:\n\n```bash\n# Initialize v0 in an existing Next.js project (one-time setup)\nnpx v0@latest init\n\n# Add a specific v0-generated component by ID\nnpx v0@latest add \u003Ccomponent-id>\n\n# With pnpm\npnpm dlx v0@latest init\npnpm dlx v0@latest add \u003Ccomponent-id>\n```\n\n`v0 init` installs required dependencies (`@radix-ui\u002Freact-icons`, `clsx`, `lucide-react`) and creates a `components.json` config file.\n\n### \"Add to Codebase\" (Web UI → Local)\n\nFrom the v0.dev web interface, click the \"Add to Codebase\" button (terminal icon) to generate a command:\n\n```bash\nnpx shadcn@latest add \"https:\u002F\u002Fv0.dev\u002Fchat\u002Fb\u002F\u003Cproject_id>?token=\u003Ctoken>\"\n```\n\nRun this in your project root to pull the entire generated project into your codebase.\n\n### Typical Workflow\n\n```bash\n# 1. Scaffold a Next.js app\nnpx create-next-app@latest --typescript --tailwind --eslint\n\n# 2. Initialize v0 integration\nnpx v0@latest init\n\n# 3. Generate a component on v0.dev, get its ID\n# 4. Add the component locally\nnpx v0@latest add a1B2c3d4\n\n# 5. Import and use in your app\n```\n\n### Project Scaffolding CLI\n\n```bash\n# Create a new project from v0 templates\nnpx create-v0-sdk-app@latest my-v0-app\n\n# Use the v0-clone template (full v0.dev replica with auth, DB, streaming)\nnpx create-v0-sdk-app@latest --template v0-clone\n```\n\n## v0 SDK (Programmatic API)\n\n### Installation\n\n```bash\nnpm install v0-sdk\n```\n\n### Authentication\n\n```ts\nimport { v0 } from 'v0-sdk'\n\u002F\u002F Automatically reads from process.env.V0_API_KEY\n\n\u002F\u002F Or create a custom client:\nimport { createClient } from 'v0-sdk'\nconst v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })\n```\n\nGet your API key at: https:\u002F\u002Fv0.app\u002Fchat\u002Fsettings\u002Fkeys\n\n### Create a Chat and Generate Code\n\n```ts\nimport { v0 } from 'v0-sdk'\n\nconst chat = await v0.chats.create({\n message: 'Create a responsive navbar with dark mode toggle using Tailwind',\n system: 'You are an expert React developer',\n})\n\nconsole.log(`Open in browser: ${chat.webUrl}`)\n```\n\n### Full Project Workflow (Create → Chat → Deploy)\n\n```ts\nimport { v0 } from 'v0-sdk'\n\n\u002F\u002F Create a project\nconst project = await v0.projects.create({ name: 'My App' })\n\n\u002F\u002F Initialize a chat with existing code\nconst chat = await v0.chats.init({\n type: 'files',\n files: [{ name: 'App.tsx', content: existingCode }],\n projectId: project.id,\n})\n\n\u002F\u002F Send follow-up instructions\nawait v0.chats.sendMessage({\n chatId: chat.id,\n message: 'Add a sidebar with navigation links and a user avatar',\n})\n\n\u002F\u002F Deploy when ready\nconst deployment = await v0.deployments.create({\n projectId: project.id,\n chatId: chat.id,\n versionId: chat.latestVersion.id,\n})\n\nconsole.log(`Live at: ${deployment.url}`)\n```\n\n### Download Generated Code\n\n```ts\n\u002F\u002F Download files from a specific chat version\nconst files = await v0.chats.downloadVersion({\n chatId: chat.id,\n versionId: chat.latestVersion.id,\n})\n```\n\n### SDK Method Reference\n\n**Chats:**\n- `v0.chats.create(params)` — Create a new chat\n- `v0.chats.sendMessage(params)` — Send a message to an existing chat\n- `v0.chats.getById(params)` — Retrieve a specific chat\n- `v0.chats.update(params)` — Update chat properties\n- `v0.chats.findVersions(params)` — List all versions of a chat\n- `v0.chats.getVersion(params)` — Retrieve a specific version\n- `v0.chats.updateVersion(params)` — Update files within a version\n- `v0.chats.downloadVersion(params)` — Download files for a version\n- `v0.chats.resume(params)` — Resume processing of a message\n\n**Projects:**\n- `v0.projects.create(params)` — Create a new project\n- `v0.projects.getById(params)` — Retrieve a project\n- `v0.projects.update(params)` — Update a project\n- `v0.projects.find()` — List all projects\n- `v0.projects.assign(params)` — Assign a chat to a project\n- `v0.projects.getByChatId(params)` — Get project by chat ID\n- `v0.projects.createEnvVars(params)` — Create env vars for a project\n\n**Deployments:**\n- `v0.deployments.create(params)` — Create deployment from a chat version\n- `v0.deployments.getById(params)` — Get deployment details\n- `v0.deployments.delete(params)` — Delete a deployment\n- `v0.deployments.find(params)` — List deployments\n- `v0.deployments.findLogs(params)` — Get deployment logs\n\n## REST API\n\nBase URL: `https:\u002F\u002Fapi.v0.dev\u002Fv1`\nAuth: `Authorization: Bearer \u003CV0_API_KEY>`\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| `GET` | `\u002Fv1\u002Fprojects` | List projects |\n| `POST` | `\u002Fv1\u002Fprojects` | Create project |\n| `GET` | `\u002Fv1\u002Fprojects\u002F:id` | Get project |\n| `PUT` | `\u002Fv1\u002Fprojects\u002F:id` | Update project |\n| `DELETE` | `\u002Fv1\u002Fprojects\u002F:id` | Delete project |\n| `POST` | `\u002Fv1\u002Fchats` | Create\u002Finitialize chat |\n| `GET` | `\u002Fv1\u002Fchats\u002F:id\u002Fmessages` | Get messages |\n| `POST` | `\u002Fv1\u002Fchats\u002F:id\u002Fmessages` | Send message |\n| `POST` | `\u002Fv1\u002Fdeployments` | Create deployment |\n\n### Rate Limits\n\n- API Requests: 10,000\u002Fday\n- Chat Messages: 1,000\u002Fday\n- Deployments: 100\u002Fday\n- File Uploads: 1 GB\u002Fday\n- Projects per account: 100\n\n### Available Models\n\n- `v0-1.5-md` — Everyday tasks and UI generation\n- `v0-1.5-lg` — Advanced reasoning\n- `v0-1.0-md` — Legacy model\n\n## AI SDK Integration\n\n### Using v0 as an AI Provider\n\n```bash\nnpm i @ai-sdk\u002Fvercel\n```\n\n```ts\nimport { vercel } from '@ai-sdk\u002Fvercel'\nimport { generateText } from 'ai'\n\nconst { text } = await generateText({\n model: vercel('v0-1.5-md'),\n prompt: 'Create a login form with email and password fields',\n})\n```\n\n### v0 AI Tools (Agent Integration)\n\nUse v0's full capabilities as tools within an AI SDK agent:\n\n```bash\nnpm install @v0-sdk\u002Fai-tools ai\n```\n\n```ts\nimport { generateText } from 'ai'\nimport { openai } from '@ai-sdk\u002Fopenai'\nimport { v0Tools } from '@v0-sdk\u002Fai-tools'\n\nconst result = await generateText({\n model: openai('gpt-5.2'),\n prompt: 'Create a new React dashboard project with charts and a data table',\n tools: v0Tools({ apiKey: process.env.V0_API_KEY }),\n})\n```\n\nFor granular control, import specific tool sets:\n\n```ts\nimport { createChatTools, createProjectTools, createDeploymentTools } from '@v0-sdk\u002Fai-tools'\n```\n\nThe `v0Tools` export includes 20+ tools: `createChat`, `sendMessage`, `getChat`, `updateChat`, `deleteChat`, `favoriteChat`, `forkChat`, `listChats`, `createProject`, `getProject`, `updateProject`, `listProjects`, `assignChatToProject`, `createEnvironmentVariables`, `createDeployment`, `getDeployment`, `deleteDeployment`, `listDeployments`, `getDeploymentLogs`.\n\n## MCP Server\n\nConnect v0 to any MCP-compatible IDE (Cursor, Codex, etc.):\n\n```json\n{\n \"mcpServers\": {\n \"v0\": {\n \"command\": \"npx\",\n \"args\": [\n \"mcp-remote\",\n \"https:\u002F\u002Fmcp.v0.dev\",\n \"--header\",\n \"Authorization: Bearer ${V0_API_KEY}\"\n ]\n }\n }\n}\n```\n\nExposes 4 tools: create chat, get chat info, find chats, send messages.\n\n## GitHub Integration\n\n### Setup\n\n1. In the v0 chat sidebar → **Git** section → click **Connect**\n2. Select GitHub account\u002Forg scope and repository name\n3. Click **Create Repository** — links chat to a new private GitHub repo\n4. A Vercel deployment is automatically created\n\n### Branch Behavior (Automatic)\n\n- Every chat creates a new branch (e.g., `v0\u002Fmain-e7bad8e4`)\n- Every prompt that changes code **automatically commits and pushes**\n- You never work directly on `main`\n\n### PR Workflow\n\n1. Click the **Publish** button (shows PR icon when GitHub-connected)\n2. Select **Open PR** — creates PR from `v0\u002Fmain-abc123` → `main`\n3. Review in the GitHub modal or on GitHub.com\n4. Merge the PR → closes the chat permanently\n5. Every PR gets a Preview Deployment; merging triggers Production Deployment\n\n### Importing Existing Repos\n\n1. In v0 prompt bar → click `+` → \"Import from GitHub\"\n2. v0 reads your existing codebase and env vars from Vercel\n3. Iterate with prompts; all changes committed to a new branch\n\n## Prompt Engineering Tips\n\n### 1. Be Specific About Design\n\n```\nWeak: \"Build a dashboard\"\nStrong: \"Build a support ticket dashboard. Mobile-first, light theme, high\n contrast. Color code: red for urgent, yellow for medium, green for low.\n Show agent status badges. Maximum 2 columns on mobile.\"\n```\n\n### 2. Specify Your Tech Stack\n\n```\n\"Build a real-time chat app using: Next.js 16 with App Router,\nSocket.io for messaging, Vercel Postgres for storage,\nNextAuth.js for authentication.\"\n```\n\n### 3. Define User Roles\n\n```\n\"Create a team collaboration tool with admin, manager, and member\nroles, task assignment, progress tracking, and file sharing.\"\n```\n\n### 4. Queue Multiple Prompts\n\nYou can queue up to 10 prompts while v0 is still generating:\n1. \"Create the base layout with navigation\"\n2. \"Add authentication with NextAuth\"\n3. \"Connect the database and add CRUD operations\"\n4. \"Add a settings page with dark mode toggle\"\n\n### 5. Specify Error and Empty States\n\n```\n\"Add comprehensive error handling for network failures, invalid\ninput, and empty states with helpful recovery suggestions.\"\n```\n\n### 6. Use Visual Selection for Precision\n\nClick a specific element in the preview before typing to target exactly what you want to change. Eliminates ambiguity for multi-instance components.\n\n### 7. Use Design Mode vs Prompts\n\n- **Prompts**: Structural changes, adding features, wiring up logic\n- **Design Mode** (click element → adjust): Colors, spacing, typography tweaks\n\n### 8. v0's Default Output Stack\n\nWhen no framework is specified, v0 generates:\n- React with JSX + TypeScript\n- Tailwind CSS\n- shadcn\u002Fui components\n- Lucide React icons\n- Complete, copy-paste-ready code (never partial stubs)\n\n## Design Normalization for v0 Output\n\nv0 is strongest when you specify both structure and aesthetic direction. For Vercel-stack projects, include guidance like: use shadcn\u002Fui primitives, use Geist fonts, default to dark mode, use zinc\u002Fneutral tokens, avoid generic card grids. After importing v0 code, normalize it: replace ad-hoc controls with shadcn components, collapse repeated card grids into stronger patterns, align typography to Geist, remove mixed radii and decorative effects.\n\n## Integration Patterns\n\n### Pattern 1: Generate Components, Import Locally\n\nBest for adding individual UI components to an existing app.\n\n```bash\nnpx v0@latest init\nnpx v0@latest add \u003Ccomponent-id>\n```\n\nThen import the component:\n\n```tsx\nimport { DataTable } from '@\u002Fcomponents\u002Fdata-table'\n\nexport default function DashboardPage() {\n return \u003CDataTable data={rows} columns={columns} \u002F>\n}\n```\n\n### Pattern 2: GitHub Round-Trip\n\nBest for iterating on a full feature branch with non-engineers.\n\n1. Import repo into v0 from GitHub\n2. Non-engineer iterates via prompts\n3. v0 auto-commits each change to a feature branch\n4. Engineer reviews the PR, merges\n\n### Pattern 3: SDK Automation\n\nBest for CI\u002FCD pipelines or programmatic component generation.\n\n```ts\nimport { v0 } from 'v0-sdk'\n\n\u002F\u002F Generate a component from a design spec\nconst chat = await v0.chats.create({\n message: `Create a pricing table component with these tiers:\n - Free: 0\u002Fmo, 1 project, community support\n - Pro: $20\u002Fmo, unlimited projects, priority support\n - Enterprise: Custom, SLA, dedicated support`,\n})\n\n\u002F\u002F Wait for generation, then download\nconst files = await v0.chats.downloadVersion({\n chatId: chat.id,\n versionId: chat.latestVersion.id,\n})\n```\n\n### Pattern 4: v0 as AI Agent Tool\n\nBest for autonomous agents that need to generate and deploy UI.\n\n```ts\nimport { Agent } from 'ai'\nimport { v0Tools } from '@v0-sdk\u002Fai-tools'\n\nconst agent = new Agent({\n model: openai('gpt-5.2'),\n tools: {\n ...v0Tools({ apiKey: process.env.V0_API_KEY }),\n \u002F\u002F ... other tools\n },\n system: 'You are a full-stack developer. Use v0 to generate UI components.',\n})\n\nconst { text } = await agent.generateText({\n prompt: 'Create a dashboard for our analytics data and deploy it',\n})\n```\n\n## Built-in Integrations\n\nv0 has native support for these services in its sandbox:\n\n- **Databases**: Neon (PostgreSQL), Supabase, Upstash Redis, Vercel Blob\n- **AI**: OpenAI, Anthropic, Groq, Grok, fal, Deep Infra (via Vercel AI Gateway)\n- **Payments**: Stripe\n- **External APIs**: Twilio, and others via the \"Vars\" panel\n\n## Limitations\n\n- Best for UI components and layouts (~20% of a full application)\n- Backend, database, auth, and AI integration require separate implementation or explicit prompting\n- Generated code may need manual fixes for complex business logic\n- Enterprise-level scalability needs additional architecture review\n- shadcn\u002Fui is the primary component library; other libraries require explicit prompting\n\n## Official Documentation\n\n- [v0 App](https:\u002F\u002Fv0.app)\n- [v0 Documentation](https:\u002F\u002Fv0.app\u002Fdocs)\n- [v0 API Overview](https:\u002F\u002Fv0.app\u002Fdocs\u002Fapi\u002Fplatform\u002Foverview)\n- [v0 AI Tools](https:\u002F\u002Fv0.app\u002Fdocs\u002Fapi\u002Fplatform\u002Fpackages\u002Fai-tools)\n- [v0 MCP Server](https:\u002F\u002Fv0.app\u002Fdocs\u002Fapi\u002Fplatform\u002Fadapters\u002Fmcp-server)\n- [v0 GitHub Integration](https:\u002F\u002Fv0.app\u002Fdocs\u002Fgithub)\n- [API Keys](https:\u002F\u002Fv0.app\u002Fchat\u002Fsettings\u002Fkeys)\n- [GitHub: v0 SDK](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fv0-sdk)\n",{"data":34,"body":56},{"name":4,"description":6,"metadata":35},{"priority":36,"docs":37,"sitemap":40,"pathPatterns":41,"importPatterns":42,"bashPatterns":45,"promptSignals":49},5,[38,39],"https:\u002F\u002Fv0.dev\u002Fdocs","https:\u002F\u002Fvercel.com\u002Fdocs\u002Fv0","https:\u002F\u002Fv0.dev\u002Fsitemap.xml",[],[43,44],"@v0\u002Fsdk","v0",[46,47,48],"\\bnpx\\s+v0\\b","\\bbunx\\s+v0\\b","\\bv0\\s+(generate|dev|chat)\\b",{"phrases":50,"minScore":55},[51,52,53,54],"generate with v0","v0 components","use v0","v0 generate",6,{"type":57,"children":58},"root",[59,68,74,81,86,92,158,164,179,184,359,401,407,412,450,455,461,593,599,667,673,679,704,710,901,914,920,1158,1164,1869,1875,2012,2018,2026,2128,2136,2216,2224,2282,2288,2307,2565,2571,2599,2605,2641,2647,2653,2677,2887,2893,2898,2926,3225,3230,3291,3436,3442,3447,3686,3691,3697,3703,3746,3752,3788,3794,3849,3855,3881,3887,3893,3903,3909,3918,3924,3933,3939,3944,3967,3973,3982,3988,3993,3999,4022,4028,4033,4061,4067,4072,4078,4084,4089,4142,4147,4294,4300,4305,4328,4334,4339,4642,4648,4653,5035,5041,5046,5089,5095,5123,5129,5211],{"type":60,"tag":61,"props":62,"children":64},"element","h1",{"id":63},"v0-by-vercel",[65],{"type":66,"value":67},"text","v0 by Vercel",{"type":60,"tag":69,"props":70,"children":71},"p",{},[72],{"type":66,"value":73},"You are an expert in v0 (v0.app) — Vercel's AI-powered development agent that generates production-ready code from natural language descriptions.",{"type":60,"tag":75,"props":76,"children":78},"h2",{"id":77},"overview",[79],{"type":66,"value":80},"Overview",{"type":60,"tag":69,"props":82,"children":83},{},[84],{"type":66,"value":85},"v0 transforms prompts into working React\u002FNext.js code. It supports 6M+ developers and 80K+ active teams globally. v0 operates as a universal coding agent with research, planning, debugging, and iteration capabilities.",{"type":60,"tag":75,"props":87,"children":89},{"id":88},"core-capabilities",[90],{"type":66,"value":91},"Core Capabilities",{"type":60,"tag":93,"props":94,"children":95},"ul",{},[96,108,118,128,138,148],{"type":60,"tag":97,"props":98,"children":99},"li",{},[100,106],{"type":60,"tag":101,"props":102,"children":103},"strong",{},[104],{"type":66,"value":105},"Natural language → code",{"type":66,"value":107},": Describe what you want, get production React components",{"type":60,"tag":97,"props":109,"children":110},{},[111,116],{"type":60,"tag":101,"props":112,"children":113},{},[114],{"type":66,"value":115},"Visual input",{"type":66,"value":117},": Upload Figma designs, screenshots, or sketches → code",{"type":60,"tag":97,"props":119,"children":120},{},[121,126],{"type":60,"tag":101,"props":122,"children":123},{},[124],{"type":66,"value":125},"Multi-framework",{"type":66,"value":127},": Outputs React, Vue, Svelte, HTML, Markdown",{"type":60,"tag":97,"props":129,"children":130},{},[131,136],{"type":60,"tag":101,"props":132,"children":133},{},[134],{"type":66,"value":135},"Agentic intelligence",{"type":66,"value":137},": Research, plan, debug, iterate autonomously",{"type":60,"tag":97,"props":139,"children":140},{},[141,146],{"type":60,"tag":101,"props":142,"children":143},{},[144],{"type":66,"value":145},"shadcn\u002Fui + Tailwind CSS",{"type":66,"value":147},": Default styling system",{"type":60,"tag":97,"props":149,"children":150},{},[151,156],{"type":60,"tag":101,"props":152,"children":153},{},[154],{"type":66,"value":155},"Full IDE",{"type":66,"value":157},": Built-in VS Code editor, terminal, and git panel in the web UI",{"type":60,"tag":75,"props":159,"children":161},{"id":160},"cli-usage",[162],{"type":66,"value":163},"CLI Usage",{"type":60,"tag":165,"props":166,"children":168},"h3",{"id":167},"component-integration-cli-v0-package",[169,171,177],{"type":66,"value":170},"Component Integration CLI (",{"type":60,"tag":172,"props":173,"children":175},"code",{"className":174},[],[176],{"type":66,"value":44},{"type":66,"value":178}," package)",{"type":60,"tag":69,"props":180,"children":181},{},[182],{"type":66,"value":183},"Install and pull v0-generated components into your Next.js project:",{"type":60,"tag":185,"props":186,"children":191},"pre",{"className":187,"code":188,"language":189,"meta":190,"style":190},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Initialize v0 in an existing Next.js project (one-time setup)\nnpx v0@latest init\n\n# Add a specific v0-generated component by ID\nnpx v0@latest add \u003Ccomponent-id>\n\n# With pnpm\npnpm dlx v0@latest init\npnpm dlx v0@latest add \u003Ccomponent-id>\n","bash","",[192],{"type":60,"tag":172,"props":193,"children":194},{"__ignoreMap":190},[195,207,228,238,247,285,292,301,323],{"type":60,"tag":196,"props":197,"children":200},"span",{"class":198,"line":199},"line",1,[201],{"type":60,"tag":196,"props":202,"children":204},{"style":203},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[205],{"type":66,"value":206},"# Initialize v0 in an existing Next.js project (one-time setup)\n",{"type":60,"tag":196,"props":208,"children":210},{"class":198,"line":209},2,[211,217,223],{"type":60,"tag":196,"props":212,"children":214},{"style":213},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[215],{"type":66,"value":216},"npx",{"type":60,"tag":196,"props":218,"children":220},{"style":219},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[221],{"type":66,"value":222}," v0@latest",{"type":60,"tag":196,"props":224,"children":225},{"style":219},[226],{"type":66,"value":227}," init\n",{"type":60,"tag":196,"props":229,"children":231},{"class":198,"line":230},3,[232],{"type":60,"tag":196,"props":233,"children":235},{"emptyLinePlaceholder":234},true,[236],{"type":66,"value":237},"\n",{"type":60,"tag":196,"props":239,"children":241},{"class":198,"line":240},4,[242],{"type":60,"tag":196,"props":243,"children":244},{"style":203},[245],{"type":66,"value":246},"# Add a specific v0-generated component by ID\n",{"type":60,"tag":196,"props":248,"children":249},{"class":198,"line":36},[250,254,258,263,269,274,280],{"type":60,"tag":196,"props":251,"children":252},{"style":213},[253],{"type":66,"value":216},{"type":60,"tag":196,"props":255,"children":256},{"style":219},[257],{"type":66,"value":222},{"type":60,"tag":196,"props":259,"children":260},{"style":219},[261],{"type":66,"value":262}," add",{"type":60,"tag":196,"props":264,"children":266},{"style":265},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[267],{"type":66,"value":268}," \u003C",{"type":60,"tag":196,"props":270,"children":271},{"style":219},[272],{"type":66,"value":273},"component-i",{"type":60,"tag":196,"props":275,"children":277},{"style":276},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[278],{"type":66,"value":279},"d",{"type":60,"tag":196,"props":281,"children":282},{"style":265},[283],{"type":66,"value":284},">\n",{"type":60,"tag":196,"props":286,"children":287},{"class":198,"line":55},[288],{"type":60,"tag":196,"props":289,"children":290},{"emptyLinePlaceholder":234},[291],{"type":66,"value":237},{"type":60,"tag":196,"props":293,"children":295},{"class":198,"line":294},7,[296],{"type":60,"tag":196,"props":297,"children":298},{"style":203},[299],{"type":66,"value":300},"# With pnpm\n",{"type":60,"tag":196,"props":302,"children":304},{"class":198,"line":303},8,[305,310,315,319],{"type":60,"tag":196,"props":306,"children":307},{"style":213},[308],{"type":66,"value":309},"pnpm",{"type":60,"tag":196,"props":311,"children":312},{"style":219},[313],{"type":66,"value":314}," dlx",{"type":60,"tag":196,"props":316,"children":317},{"style":219},[318],{"type":66,"value":222},{"type":60,"tag":196,"props":320,"children":321},{"style":219},[322],{"type":66,"value":227},{"type":60,"tag":196,"props":324,"children":326},{"class":198,"line":325},9,[327,331,335,339,343,347,351,355],{"type":60,"tag":196,"props":328,"children":329},{"style":213},[330],{"type":66,"value":309},{"type":60,"tag":196,"props":332,"children":333},{"style":219},[334],{"type":66,"value":314},{"type":60,"tag":196,"props":336,"children":337},{"style":219},[338],{"type":66,"value":222},{"type":60,"tag":196,"props":340,"children":341},{"style":219},[342],{"type":66,"value":262},{"type":60,"tag":196,"props":344,"children":345},{"style":265},[346],{"type":66,"value":268},{"type":60,"tag":196,"props":348,"children":349},{"style":219},[350],{"type":66,"value":273},{"type":60,"tag":196,"props":352,"children":353},{"style":276},[354],{"type":66,"value":279},{"type":60,"tag":196,"props":356,"children":357},{"style":265},[358],{"type":66,"value":284},{"type":60,"tag":69,"props":360,"children":361},{},[362,368,370,376,378,384,385,391,393,399],{"type":60,"tag":172,"props":363,"children":365},{"className":364},[],[366],{"type":66,"value":367},"v0 init",{"type":66,"value":369}," installs required dependencies (",{"type":60,"tag":172,"props":371,"children":373},{"className":372},[],[374],{"type":66,"value":375},"@radix-ui\u002Freact-icons",{"type":66,"value":377},", ",{"type":60,"tag":172,"props":379,"children":381},{"className":380},[],[382],{"type":66,"value":383},"clsx",{"type":66,"value":377},{"type":60,"tag":172,"props":386,"children":388},{"className":387},[],[389],{"type":66,"value":390},"lucide-react",{"type":66,"value":392},") and creates a ",{"type":60,"tag":172,"props":394,"children":396},{"className":395},[],[397],{"type":66,"value":398},"components.json",{"type":66,"value":400}," config file.",{"type":60,"tag":165,"props":402,"children":404},{"id":403},"add-to-codebase-web-ui-local",[405],{"type":66,"value":406},"\"Add to Codebase\" (Web UI → Local)",{"type":60,"tag":69,"props":408,"children":409},{},[410],{"type":66,"value":411},"From the v0.dev web interface, click the \"Add to Codebase\" button (terminal icon) to generate a command:",{"type":60,"tag":185,"props":413,"children":415},{"className":187,"code":414,"language":189,"meta":190,"style":190},"npx shadcn@latest add \"https:\u002F\u002Fv0.dev\u002Fchat\u002Fb\u002F\u003Cproject_id>?token=\u003Ctoken>\"\n",[416],{"type":60,"tag":172,"props":417,"children":418},{"__ignoreMap":190},[419],{"type":60,"tag":196,"props":420,"children":421},{"class":198,"line":199},[422,426,431,435,440,445],{"type":60,"tag":196,"props":423,"children":424},{"style":213},[425],{"type":66,"value":216},{"type":60,"tag":196,"props":427,"children":428},{"style":219},[429],{"type":66,"value":430}," shadcn@latest",{"type":60,"tag":196,"props":432,"children":433},{"style":219},[434],{"type":66,"value":262},{"type":60,"tag":196,"props":436,"children":437},{"style":265},[438],{"type":66,"value":439}," \"",{"type":60,"tag":196,"props":441,"children":442},{"style":219},[443],{"type":66,"value":444},"https:\u002F\u002Fv0.dev\u002Fchat\u002Fb\u002F\u003Cproject_id>?token=\u003Ctoken>",{"type":60,"tag":196,"props":446,"children":447},{"style":265},[448],{"type":66,"value":449},"\"\n",{"type":60,"tag":69,"props":451,"children":452},{},[453],{"type":66,"value":454},"Run this in your project root to pull the entire generated project into your codebase.",{"type":60,"tag":165,"props":456,"children":458},{"id":457},"typical-workflow",[459],{"type":66,"value":460},"Typical Workflow",{"type":60,"tag":185,"props":462,"children":464},{"className":187,"code":463,"language":189,"meta":190,"style":190},"# 1. Scaffold a Next.js app\nnpx create-next-app@latest --typescript --tailwind --eslint\n\n# 2. Initialize v0 integration\nnpx v0@latest init\n\n# 3. Generate a component on v0.dev, get its ID\n# 4. Add the component locally\nnpx v0@latest add a1B2c3d4\n\n# 5. Import and use in your app\n",[465],{"type":60,"tag":172,"props":466,"children":467},{"__ignoreMap":190},[468,476,503,510,518,533,540,548,556,576,584],{"type":60,"tag":196,"props":469,"children":470},{"class":198,"line":199},[471],{"type":60,"tag":196,"props":472,"children":473},{"style":203},[474],{"type":66,"value":475},"# 1. Scaffold a Next.js app\n",{"type":60,"tag":196,"props":477,"children":478},{"class":198,"line":209},[479,483,488,493,498],{"type":60,"tag":196,"props":480,"children":481},{"style":213},[482],{"type":66,"value":216},{"type":60,"tag":196,"props":484,"children":485},{"style":219},[486],{"type":66,"value":487}," create-next-app@latest",{"type":60,"tag":196,"props":489,"children":490},{"style":219},[491],{"type":66,"value":492}," --typescript",{"type":60,"tag":196,"props":494,"children":495},{"style":219},[496],{"type":66,"value":497}," --tailwind",{"type":60,"tag":196,"props":499,"children":500},{"style":219},[501],{"type":66,"value":502}," --eslint\n",{"type":60,"tag":196,"props":504,"children":505},{"class":198,"line":230},[506],{"type":60,"tag":196,"props":507,"children":508},{"emptyLinePlaceholder":234},[509],{"type":66,"value":237},{"type":60,"tag":196,"props":511,"children":512},{"class":198,"line":240},[513],{"type":60,"tag":196,"props":514,"children":515},{"style":203},[516],{"type":66,"value":517},"# 2. Initialize v0 integration\n",{"type":60,"tag":196,"props":519,"children":520},{"class":198,"line":36},[521,525,529],{"type":60,"tag":196,"props":522,"children":523},{"style":213},[524],{"type":66,"value":216},{"type":60,"tag":196,"props":526,"children":527},{"style":219},[528],{"type":66,"value":222},{"type":60,"tag":196,"props":530,"children":531},{"style":219},[532],{"type":66,"value":227},{"type":60,"tag":196,"props":534,"children":535},{"class":198,"line":55},[536],{"type":60,"tag":196,"props":537,"children":538},{"emptyLinePlaceholder":234},[539],{"type":66,"value":237},{"type":60,"tag":196,"props":541,"children":542},{"class":198,"line":294},[543],{"type":60,"tag":196,"props":544,"children":545},{"style":203},[546],{"type":66,"value":547},"# 3. Generate a component on v0.dev, get its ID\n",{"type":60,"tag":196,"props":549,"children":550},{"class":198,"line":303},[551],{"type":60,"tag":196,"props":552,"children":553},{"style":203},[554],{"type":66,"value":555},"# 4. Add the component locally\n",{"type":60,"tag":196,"props":557,"children":558},{"class":198,"line":325},[559,563,567,571],{"type":60,"tag":196,"props":560,"children":561},{"style":213},[562],{"type":66,"value":216},{"type":60,"tag":196,"props":564,"children":565},{"style":219},[566],{"type":66,"value":222},{"type":60,"tag":196,"props":568,"children":569},{"style":219},[570],{"type":66,"value":262},{"type":60,"tag":196,"props":572,"children":573},{"style":219},[574],{"type":66,"value":575}," a1B2c3d4\n",{"type":60,"tag":196,"props":577,"children":579},{"class":198,"line":578},10,[580],{"type":60,"tag":196,"props":581,"children":582},{"emptyLinePlaceholder":234},[583],{"type":66,"value":237},{"type":60,"tag":196,"props":585,"children":587},{"class":198,"line":586},11,[588],{"type":60,"tag":196,"props":589,"children":590},{"style":203},[591],{"type":66,"value":592},"# 5. Import and use in your app\n",{"type":60,"tag":165,"props":594,"children":596},{"id":595},"project-scaffolding-cli",[597],{"type":66,"value":598},"Project Scaffolding CLI",{"type":60,"tag":185,"props":600,"children":602},{"className":187,"code":601,"language":189,"meta":190,"style":190},"# Create a new project from v0 templates\nnpx create-v0-sdk-app@latest my-v0-app\n\n# Use the v0-clone template (full v0.dev replica with auth, DB, streaming)\nnpx create-v0-sdk-app@latest --template v0-clone\n",[603],{"type":60,"tag":172,"props":604,"children":605},{"__ignoreMap":190},[606,614,631,638,646],{"type":60,"tag":196,"props":607,"children":608},{"class":198,"line":199},[609],{"type":60,"tag":196,"props":610,"children":611},{"style":203},[612],{"type":66,"value":613},"# Create a new project from v0 templates\n",{"type":60,"tag":196,"props":615,"children":616},{"class":198,"line":209},[617,621,626],{"type":60,"tag":196,"props":618,"children":619},{"style":213},[620],{"type":66,"value":216},{"type":60,"tag":196,"props":622,"children":623},{"style":219},[624],{"type":66,"value":625}," create-v0-sdk-app@latest",{"type":60,"tag":196,"props":627,"children":628},{"style":219},[629],{"type":66,"value":630}," my-v0-app\n",{"type":60,"tag":196,"props":632,"children":633},{"class":198,"line":230},[634],{"type":60,"tag":196,"props":635,"children":636},{"emptyLinePlaceholder":234},[637],{"type":66,"value":237},{"type":60,"tag":196,"props":639,"children":640},{"class":198,"line":240},[641],{"type":60,"tag":196,"props":642,"children":643},{"style":203},[644],{"type":66,"value":645},"# Use the v0-clone template (full v0.dev replica with auth, DB, streaming)\n",{"type":60,"tag":196,"props":647,"children":648},{"class":198,"line":36},[649,653,657,662],{"type":60,"tag":196,"props":650,"children":651},{"style":213},[652],{"type":66,"value":216},{"type":60,"tag":196,"props":654,"children":655},{"style":219},[656],{"type":66,"value":625},{"type":60,"tag":196,"props":658,"children":659},{"style":219},[660],{"type":66,"value":661}," --template",{"type":60,"tag":196,"props":663,"children":664},{"style":219},[665],{"type":66,"value":666}," v0-clone\n",{"type":60,"tag":75,"props":668,"children":670},{"id":669},"v0-sdk-programmatic-api",[671],{"type":66,"value":672},"v0 SDK (Programmatic API)",{"type":60,"tag":165,"props":674,"children":676},{"id":675},"installation",[677],{"type":66,"value":678},"Installation",{"type":60,"tag":185,"props":680,"children":682},{"className":187,"code":681,"language":189,"meta":190,"style":190},"npm install v0-sdk\n",[683],{"type":60,"tag":172,"props":684,"children":685},{"__ignoreMap":190},[686],{"type":60,"tag":196,"props":687,"children":688},{"class":198,"line":199},[689,694,699],{"type":60,"tag":196,"props":690,"children":691},{"style":213},[692],{"type":66,"value":693},"npm",{"type":60,"tag":196,"props":695,"children":696},{"style":219},[697],{"type":66,"value":698}," install",{"type":60,"tag":196,"props":700,"children":701},{"style":219},[702],{"type":66,"value":703}," v0-sdk\n",{"type":60,"tag":165,"props":705,"children":707},{"id":706},"authentication",[708],{"type":66,"value":709},"Authentication",{"type":60,"tag":185,"props":711,"children":715},{"className":712,"code":713,"language":714,"meta":190,"style":190},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { v0 } from 'v0-sdk'\n\u002F\u002F Automatically reads from process.env.V0_API_KEY\n\n\u002F\u002F Or create a custom client:\nimport { createClient } from 'v0-sdk'\nconst v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })\n","ts",[716],{"type":60,"tag":172,"props":717,"children":718},{"__ignoreMap":190},[719,763,771,778,786,822],{"type":60,"tag":196,"props":720,"children":721},{"class":198,"line":199},[722,728,733,738,743,748,753,758],{"type":60,"tag":196,"props":723,"children":725},{"style":724},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[726],{"type":66,"value":727},"import",{"type":60,"tag":196,"props":729,"children":730},{"style":265},[731],{"type":66,"value":732}," {",{"type":60,"tag":196,"props":734,"children":735},{"style":276},[736],{"type":66,"value":737}," v0",{"type":60,"tag":196,"props":739,"children":740},{"style":265},[741],{"type":66,"value":742}," }",{"type":60,"tag":196,"props":744,"children":745},{"style":724},[746],{"type":66,"value":747}," from",{"type":60,"tag":196,"props":749,"children":750},{"style":265},[751],{"type":66,"value":752}," '",{"type":60,"tag":196,"props":754,"children":755},{"style":219},[756],{"type":66,"value":757},"v0-sdk",{"type":60,"tag":196,"props":759,"children":760},{"style":265},[761],{"type":66,"value":762},"'\n",{"type":60,"tag":196,"props":764,"children":765},{"class":198,"line":209},[766],{"type":60,"tag":196,"props":767,"children":768},{"style":203},[769],{"type":66,"value":770},"\u002F\u002F Automatically reads from process.env.V0_API_KEY\n",{"type":60,"tag":196,"props":772,"children":773},{"class":198,"line":230},[774],{"type":60,"tag":196,"props":775,"children":776},{"emptyLinePlaceholder":234},[777],{"type":66,"value":237},{"type":60,"tag":196,"props":779,"children":780},{"class":198,"line":240},[781],{"type":60,"tag":196,"props":782,"children":783},{"style":203},[784],{"type":66,"value":785},"\u002F\u002F Or create a custom client:\n",{"type":60,"tag":196,"props":787,"children":788},{"class":198,"line":36},[789,793,797,802,806,810,814,818],{"type":60,"tag":196,"props":790,"children":791},{"style":724},[792],{"type":66,"value":727},{"type":60,"tag":196,"props":794,"children":795},{"style":265},[796],{"type":66,"value":732},{"type":60,"tag":196,"props":798,"children":799},{"style":276},[800],{"type":66,"value":801}," createClient",{"type":60,"tag":196,"props":803,"children":804},{"style":265},[805],{"type":66,"value":742},{"type":60,"tag":196,"props":807,"children":808},{"style":724},[809],{"type":66,"value":747},{"type":60,"tag":196,"props":811,"children":812},{"style":265},[813],{"type":66,"value":752},{"type":60,"tag":196,"props":815,"children":816},{"style":219},[817],{"type":66,"value":757},{"type":60,"tag":196,"props":819,"children":820},{"style":265},[821],{"type":66,"value":762},{"type":60,"tag":196,"props":823,"children":824},{"class":198,"line":55},[825,831,836,841,846,851,856,862,867,872,877,882,886,891,896],{"type":60,"tag":196,"props":826,"children":828},{"style":827},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[829],{"type":66,"value":830},"const",{"type":60,"tag":196,"props":832,"children":833},{"style":276},[834],{"type":66,"value":835}," v0 ",{"type":60,"tag":196,"props":837,"children":838},{"style":265},[839],{"type":66,"value":840},"=",{"type":60,"tag":196,"props":842,"children":844},{"style":843},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[845],{"type":66,"value":801},{"type":60,"tag":196,"props":847,"children":848},{"style":276},[849],{"type":66,"value":850},"(",{"type":60,"tag":196,"props":852,"children":853},{"style":265},[854],{"type":66,"value":855},"{",{"type":60,"tag":196,"props":857,"children":859},{"style":858},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[860],{"type":66,"value":861}," apiKey",{"type":60,"tag":196,"props":863,"children":864},{"style":265},[865],{"type":66,"value":866},":",{"type":60,"tag":196,"props":868,"children":869},{"style":276},[870],{"type":66,"value":871}," process",{"type":60,"tag":196,"props":873,"children":874},{"style":265},[875],{"type":66,"value":876},".",{"type":60,"tag":196,"props":878,"children":879},{"style":276},[880],{"type":66,"value":881},"env",{"type":60,"tag":196,"props":883,"children":884},{"style":265},[885],{"type":66,"value":876},{"type":60,"tag":196,"props":887,"children":888},{"style":276},[889],{"type":66,"value":890},"CUSTOM_V0_KEY ",{"type":60,"tag":196,"props":892,"children":893},{"style":265},[894],{"type":66,"value":895},"}",{"type":60,"tag":196,"props":897,"children":898},{"style":276},[899],{"type":66,"value":900},")\n",{"type":60,"tag":69,"props":902,"children":903},{},[904,906],{"type":66,"value":905},"Get your API key at: ",{"type":60,"tag":907,"props":908,"children":912},"a",{"href":909,"rel":910},"https:\u002F\u002Fv0.app\u002Fchat\u002Fsettings\u002Fkeys",[911],"nofollow",[913],{"type":66,"value":909},{"type":60,"tag":165,"props":915,"children":917},{"id":916},"create-a-chat-and-generate-code",[918],{"type":66,"value":919},"Create a Chat and Generate Code",{"type":60,"tag":185,"props":921,"children":923},{"className":712,"code":922,"language":714,"meta":190,"style":190},"import { v0 } from 'v0-sdk'\n\nconst chat = await v0.chats.create({\n message: 'Create a responsive navbar with dark mode toggle using Tailwind',\n system: 'You are an expert React developer',\n})\n\nconsole.log(`Open in browser: ${chat.webUrl}`)\n",[924],{"type":60,"tag":172,"props":925,"children":926},{"__ignoreMap":190},[927,962,969,1021,1052,1081,1092,1099],{"type":60,"tag":196,"props":928,"children":929},{"class":198,"line":199},[930,934,938,942,946,950,954,958],{"type":60,"tag":196,"props":931,"children":932},{"style":724},[933],{"type":66,"value":727},{"type":60,"tag":196,"props":935,"children":936},{"style":265},[937],{"type":66,"value":732},{"type":60,"tag":196,"props":939,"children":940},{"style":276},[941],{"type":66,"value":737},{"type":60,"tag":196,"props":943,"children":944},{"style":265},[945],{"type":66,"value":742},{"type":60,"tag":196,"props":947,"children":948},{"style":724},[949],{"type":66,"value":747},{"type":60,"tag":196,"props":951,"children":952},{"style":265},[953],{"type":66,"value":752},{"type":60,"tag":196,"props":955,"children":956},{"style":219},[957],{"type":66,"value":757},{"type":60,"tag":196,"props":959,"children":960},{"style":265},[961],{"type":66,"value":762},{"type":60,"tag":196,"props":963,"children":964},{"class":198,"line":209},[965],{"type":60,"tag":196,"props":966,"children":967},{"emptyLinePlaceholder":234},[968],{"type":66,"value":237},{"type":60,"tag":196,"props":970,"children":971},{"class":198,"line":230},[972,976,981,985,990,994,998,1003,1007,1012,1016],{"type":60,"tag":196,"props":973,"children":974},{"style":827},[975],{"type":66,"value":830},{"type":60,"tag":196,"props":977,"children":978},{"style":276},[979],{"type":66,"value":980}," chat ",{"type":60,"tag":196,"props":982,"children":983},{"style":265},[984],{"type":66,"value":840},{"type":60,"tag":196,"props":986,"children":987},{"style":724},[988],{"type":66,"value":989}," await",{"type":60,"tag":196,"props":991,"children":992},{"style":276},[993],{"type":66,"value":737},{"type":60,"tag":196,"props":995,"children":996},{"style":265},[997],{"type":66,"value":876},{"type":60,"tag":196,"props":999,"children":1000},{"style":276},[1001],{"type":66,"value":1002},"chats",{"type":60,"tag":196,"props":1004,"children":1005},{"style":265},[1006],{"type":66,"value":876},{"type":60,"tag":196,"props":1008,"children":1009},{"style":843},[1010],{"type":66,"value":1011},"create",{"type":60,"tag":196,"props":1013,"children":1014},{"style":276},[1015],{"type":66,"value":850},{"type":60,"tag":196,"props":1017,"children":1018},{"style":265},[1019],{"type":66,"value":1020},"{\n",{"type":60,"tag":196,"props":1022,"children":1023},{"class":198,"line":240},[1024,1029,1033,1037,1042,1047],{"type":60,"tag":196,"props":1025,"children":1026},{"style":858},[1027],{"type":66,"value":1028}," message",{"type":60,"tag":196,"props":1030,"children":1031},{"style":265},[1032],{"type":66,"value":866},{"type":60,"tag":196,"props":1034,"children":1035},{"style":265},[1036],{"type":66,"value":752},{"type":60,"tag":196,"props":1038,"children":1039},{"style":219},[1040],{"type":66,"value":1041},"Create a responsive navbar with dark mode toggle using Tailwind",{"type":60,"tag":196,"props":1043,"children":1044},{"style":265},[1045],{"type":66,"value":1046},"'",{"type":60,"tag":196,"props":1048,"children":1049},{"style":265},[1050],{"type":66,"value":1051},",\n",{"type":60,"tag":196,"props":1053,"children":1054},{"class":198,"line":36},[1055,1060,1064,1068,1073,1077],{"type":60,"tag":196,"props":1056,"children":1057},{"style":858},[1058],{"type":66,"value":1059}," system",{"type":60,"tag":196,"props":1061,"children":1062},{"style":265},[1063],{"type":66,"value":866},{"type":60,"tag":196,"props":1065,"children":1066},{"style":265},[1067],{"type":66,"value":752},{"type":60,"tag":196,"props":1069,"children":1070},{"style":219},[1071],{"type":66,"value":1072},"You are an expert React developer",{"type":60,"tag":196,"props":1074,"children":1075},{"style":265},[1076],{"type":66,"value":1046},{"type":60,"tag":196,"props":1078,"children":1079},{"style":265},[1080],{"type":66,"value":1051},{"type":60,"tag":196,"props":1082,"children":1083},{"class":198,"line":55},[1084,1088],{"type":60,"tag":196,"props":1085,"children":1086},{"style":265},[1087],{"type":66,"value":895},{"type":60,"tag":196,"props":1089,"children":1090},{"style":276},[1091],{"type":66,"value":900},{"type":60,"tag":196,"props":1093,"children":1094},{"class":198,"line":294},[1095],{"type":60,"tag":196,"props":1096,"children":1097},{"emptyLinePlaceholder":234},[1098],{"type":66,"value":237},{"type":60,"tag":196,"props":1100,"children":1101},{"class":198,"line":303},[1102,1107,1111,1116,1120,1125,1130,1135,1140,1144,1149,1154],{"type":60,"tag":196,"props":1103,"children":1104},{"style":276},[1105],{"type":66,"value":1106},"console",{"type":60,"tag":196,"props":1108,"children":1109},{"style":265},[1110],{"type":66,"value":876},{"type":60,"tag":196,"props":1112,"children":1113},{"style":843},[1114],{"type":66,"value":1115},"log",{"type":60,"tag":196,"props":1117,"children":1118},{"style":276},[1119],{"type":66,"value":850},{"type":60,"tag":196,"props":1121,"children":1122},{"style":265},[1123],{"type":66,"value":1124},"`",{"type":60,"tag":196,"props":1126,"children":1127},{"style":219},[1128],{"type":66,"value":1129},"Open in browser: ",{"type":60,"tag":196,"props":1131,"children":1132},{"style":265},[1133],{"type":66,"value":1134},"${",{"type":60,"tag":196,"props":1136,"children":1137},{"style":276},[1138],{"type":66,"value":1139},"chat",{"type":60,"tag":196,"props":1141,"children":1142},{"style":265},[1143],{"type":66,"value":876},{"type":60,"tag":196,"props":1145,"children":1146},{"style":276},[1147],{"type":66,"value":1148},"webUrl",{"type":60,"tag":196,"props":1150,"children":1151},{"style":265},[1152],{"type":66,"value":1153},"}`",{"type":60,"tag":196,"props":1155,"children":1156},{"style":276},[1157],{"type":66,"value":900},{"type":60,"tag":165,"props":1159,"children":1161},{"id":1160},"full-project-workflow-create-chat-deploy",[1162],{"type":66,"value":1163},"Full Project Workflow (Create → Chat → Deploy)",{"type":60,"tag":185,"props":1165,"children":1167},{"className":712,"code":1166,"language":714,"meta":190,"style":190},"import { v0 } from 'v0-sdk'\n\n\u002F\u002F Create a project\nconst project = await v0.projects.create({ name: 'My App' })\n\n\u002F\u002F Initialize a chat with existing code\nconst chat = await v0.chats.init({\n type: 'files',\n files: [{ name: 'App.tsx', content: existingCode }],\n projectId: project.id,\n})\n\n\u002F\u002F Send follow-up instructions\nawait v0.chats.sendMessage({\n chatId: chat.id,\n message: 'Add a sidebar with navigation links and a user avatar',\n})\n\n\u002F\u002F Deploy when ready\nconst deployment = await v0.deployments.create({\n projectId: project.id,\n chatId: chat.id,\n versionId: chat.latestVersion.id,\n})\n\nconsole.log(`Live at: ${deployment.url}`)\n",[1168],{"type":60,"tag":172,"props":1169,"children":1170},{"__ignoreMap":190},[1171,1206,1213,1221,1300,1307,1315,1363,1392,1466,1496,1507,1515,1524,1562,1592,1621,1633,1641,1650,1700,1728,1756,1794,1806,1814],{"type":60,"tag":196,"props":1172,"children":1173},{"class":198,"line":199},[1174,1178,1182,1186,1190,1194,1198,1202],{"type":60,"tag":196,"props":1175,"children":1176},{"style":724},[1177],{"type":66,"value":727},{"type":60,"tag":196,"props":1179,"children":1180},{"style":265},[1181],{"type":66,"value":732},{"type":60,"tag":196,"props":1183,"children":1184},{"style":276},[1185],{"type":66,"value":737},{"type":60,"tag":196,"props":1187,"children":1188},{"style":265},[1189],{"type":66,"value":742},{"type":60,"tag":196,"props":1191,"children":1192},{"style":724},[1193],{"type":66,"value":747},{"type":60,"tag":196,"props":1195,"children":1196},{"style":265},[1197],{"type":66,"value":752},{"type":60,"tag":196,"props":1199,"children":1200},{"style":219},[1201],{"type":66,"value":757},{"type":60,"tag":196,"props":1203,"children":1204},{"style":265},[1205],{"type":66,"value":762},{"type":60,"tag":196,"props":1207,"children":1208},{"class":198,"line":209},[1209],{"type":60,"tag":196,"props":1210,"children":1211},{"emptyLinePlaceholder":234},[1212],{"type":66,"value":237},{"type":60,"tag":196,"props":1214,"children":1215},{"class":198,"line":230},[1216],{"type":60,"tag":196,"props":1217,"children":1218},{"style":203},[1219],{"type":66,"value":1220},"\u002F\u002F Create a project\n",{"type":60,"tag":196,"props":1222,"children":1223},{"class":198,"line":240},[1224,1228,1233,1237,1241,1245,1249,1254,1258,1262,1266,1270,1275,1279,1283,1288,1292,1296],{"type":60,"tag":196,"props":1225,"children":1226},{"style":827},[1227],{"type":66,"value":830},{"type":60,"tag":196,"props":1229,"children":1230},{"style":276},[1231],{"type":66,"value":1232}," project ",{"type":60,"tag":196,"props":1234,"children":1235},{"style":265},[1236],{"type":66,"value":840},{"type":60,"tag":196,"props":1238,"children":1239},{"style":724},[1240],{"type":66,"value":989},{"type":60,"tag":196,"props":1242,"children":1243},{"style":276},[1244],{"type":66,"value":737},{"type":60,"tag":196,"props":1246,"children":1247},{"style":265},[1248],{"type":66,"value":876},{"type":60,"tag":196,"props":1250,"children":1251},{"style":276},[1252],{"type":66,"value":1253},"projects",{"type":60,"tag":196,"props":1255,"children":1256},{"style":265},[1257],{"type":66,"value":876},{"type":60,"tag":196,"props":1259,"children":1260},{"style":843},[1261],{"type":66,"value":1011},{"type":60,"tag":196,"props":1263,"children":1264},{"style":276},[1265],{"type":66,"value":850},{"type":60,"tag":196,"props":1267,"children":1268},{"style":265},[1269],{"type":66,"value":855},{"type":60,"tag":196,"props":1271,"children":1272},{"style":858},[1273],{"type":66,"value":1274}," name",{"type":60,"tag":196,"props":1276,"children":1277},{"style":265},[1278],{"type":66,"value":866},{"type":60,"tag":196,"props":1280,"children":1281},{"style":265},[1282],{"type":66,"value":752},{"type":60,"tag":196,"props":1284,"children":1285},{"style":219},[1286],{"type":66,"value":1287},"My App",{"type":60,"tag":196,"props":1289,"children":1290},{"style":265},[1291],{"type":66,"value":1046},{"type":60,"tag":196,"props":1293,"children":1294},{"style":265},[1295],{"type":66,"value":742},{"type":60,"tag":196,"props":1297,"children":1298},{"style":276},[1299],{"type":66,"value":900},{"type":60,"tag":196,"props":1301,"children":1302},{"class":198,"line":36},[1303],{"type":60,"tag":196,"props":1304,"children":1305},{"emptyLinePlaceholder":234},[1306],{"type":66,"value":237},{"type":60,"tag":196,"props":1308,"children":1309},{"class":198,"line":55},[1310],{"type":60,"tag":196,"props":1311,"children":1312},{"style":203},[1313],{"type":66,"value":1314},"\u002F\u002F Initialize a chat with existing code\n",{"type":60,"tag":196,"props":1316,"children":1317},{"class":198,"line":294},[1318,1322,1326,1330,1334,1338,1342,1346,1350,1355,1359],{"type":60,"tag":196,"props":1319,"children":1320},{"style":827},[1321],{"type":66,"value":830},{"type":60,"tag":196,"props":1323,"children":1324},{"style":276},[1325],{"type":66,"value":980},{"type":60,"tag":196,"props":1327,"children":1328},{"style":265},[1329],{"type":66,"value":840},{"type":60,"tag":196,"props":1331,"children":1332},{"style":724},[1333],{"type":66,"value":989},{"type":60,"tag":196,"props":1335,"children":1336},{"style":276},[1337],{"type":66,"value":737},{"type":60,"tag":196,"props":1339,"children":1340},{"style":265},[1341],{"type":66,"value":876},{"type":60,"tag":196,"props":1343,"children":1344},{"style":276},[1345],{"type":66,"value":1002},{"type":60,"tag":196,"props":1347,"children":1348},{"style":265},[1349],{"type":66,"value":876},{"type":60,"tag":196,"props":1351,"children":1352},{"style":843},[1353],{"type":66,"value":1354},"init",{"type":60,"tag":196,"props":1356,"children":1357},{"style":276},[1358],{"type":66,"value":850},{"type":60,"tag":196,"props":1360,"children":1361},{"style":265},[1362],{"type":66,"value":1020},{"type":60,"tag":196,"props":1364,"children":1365},{"class":198,"line":303},[1366,1371,1375,1379,1384,1388],{"type":60,"tag":196,"props":1367,"children":1368},{"style":858},[1369],{"type":66,"value":1370}," type",{"type":60,"tag":196,"props":1372,"children":1373},{"style":265},[1374],{"type":66,"value":866},{"type":60,"tag":196,"props":1376,"children":1377},{"style":265},[1378],{"type":66,"value":752},{"type":60,"tag":196,"props":1380,"children":1381},{"style":219},[1382],{"type":66,"value":1383},"files",{"type":60,"tag":196,"props":1385,"children":1386},{"style":265},[1387],{"type":66,"value":1046},{"type":60,"tag":196,"props":1389,"children":1390},{"style":265},[1391],{"type":66,"value":1051},{"type":60,"tag":196,"props":1393,"children":1394},{"class":198,"line":325},[1395,1400,1404,1409,1413,1417,1421,1425,1430,1434,1439,1444,1448,1453,1457,1462],{"type":60,"tag":196,"props":1396,"children":1397},{"style":858},[1398],{"type":66,"value":1399}," files",{"type":60,"tag":196,"props":1401,"children":1402},{"style":265},[1403],{"type":66,"value":866},{"type":60,"tag":196,"props":1405,"children":1406},{"style":276},[1407],{"type":66,"value":1408}," [",{"type":60,"tag":196,"props":1410,"children":1411},{"style":265},[1412],{"type":66,"value":855},{"type":60,"tag":196,"props":1414,"children":1415},{"style":858},[1416],{"type":66,"value":1274},{"type":60,"tag":196,"props":1418,"children":1419},{"style":265},[1420],{"type":66,"value":866},{"type":60,"tag":196,"props":1422,"children":1423},{"style":265},[1424],{"type":66,"value":752},{"type":60,"tag":196,"props":1426,"children":1427},{"style":219},[1428],{"type":66,"value":1429},"App.tsx",{"type":60,"tag":196,"props":1431,"children":1432},{"style":265},[1433],{"type":66,"value":1046},{"type":60,"tag":196,"props":1435,"children":1436},{"style":265},[1437],{"type":66,"value":1438},",",{"type":60,"tag":196,"props":1440,"children":1441},{"style":858},[1442],{"type":66,"value":1443}," content",{"type":60,"tag":196,"props":1445,"children":1446},{"style":265},[1447],{"type":66,"value":866},{"type":60,"tag":196,"props":1449,"children":1450},{"style":276},[1451],{"type":66,"value":1452}," existingCode ",{"type":60,"tag":196,"props":1454,"children":1455},{"style":265},[1456],{"type":66,"value":895},{"type":60,"tag":196,"props":1458,"children":1459},{"style":276},[1460],{"type":66,"value":1461},"]",{"type":60,"tag":196,"props":1463,"children":1464},{"style":265},[1465],{"type":66,"value":1051},{"type":60,"tag":196,"props":1467,"children":1468},{"class":198,"line":578},[1469,1474,1478,1483,1487,1492],{"type":60,"tag":196,"props":1470,"children":1471},{"style":858},[1472],{"type":66,"value":1473}," projectId",{"type":60,"tag":196,"props":1475,"children":1476},{"style":265},[1477],{"type":66,"value":866},{"type":60,"tag":196,"props":1479,"children":1480},{"style":276},[1481],{"type":66,"value":1482}," project",{"type":60,"tag":196,"props":1484,"children":1485},{"style":265},[1486],{"type":66,"value":876},{"type":60,"tag":196,"props":1488,"children":1489},{"style":276},[1490],{"type":66,"value":1491},"id",{"type":60,"tag":196,"props":1493,"children":1494},{"style":265},[1495],{"type":66,"value":1051},{"type":60,"tag":196,"props":1497,"children":1498},{"class":198,"line":586},[1499,1503],{"type":60,"tag":196,"props":1500,"children":1501},{"style":265},[1502],{"type":66,"value":895},{"type":60,"tag":196,"props":1504,"children":1505},{"style":276},[1506],{"type":66,"value":900},{"type":60,"tag":196,"props":1508,"children":1510},{"class":198,"line":1509},12,[1511],{"type":60,"tag":196,"props":1512,"children":1513},{"emptyLinePlaceholder":234},[1514],{"type":66,"value":237},{"type":60,"tag":196,"props":1516,"children":1518},{"class":198,"line":1517},13,[1519],{"type":60,"tag":196,"props":1520,"children":1521},{"style":203},[1522],{"type":66,"value":1523},"\u002F\u002F Send follow-up instructions\n",{"type":60,"tag":196,"props":1525,"children":1527},{"class":198,"line":1526},14,[1528,1533,1537,1541,1545,1549,1554,1558],{"type":60,"tag":196,"props":1529,"children":1530},{"style":724},[1531],{"type":66,"value":1532},"await",{"type":60,"tag":196,"props":1534,"children":1535},{"style":276},[1536],{"type":66,"value":737},{"type":60,"tag":196,"props":1538,"children":1539},{"style":265},[1540],{"type":66,"value":876},{"type":60,"tag":196,"props":1542,"children":1543},{"style":276},[1544],{"type":66,"value":1002},{"type":60,"tag":196,"props":1546,"children":1547},{"style":265},[1548],{"type":66,"value":876},{"type":60,"tag":196,"props":1550,"children":1551},{"style":843},[1552],{"type":66,"value":1553},"sendMessage",{"type":60,"tag":196,"props":1555,"children":1556},{"style":276},[1557],{"type":66,"value":850},{"type":60,"tag":196,"props":1559,"children":1560},{"style":265},[1561],{"type":66,"value":1020},{"type":60,"tag":196,"props":1563,"children":1565},{"class":198,"line":1564},15,[1566,1571,1575,1580,1584,1588],{"type":60,"tag":196,"props":1567,"children":1568},{"style":858},[1569],{"type":66,"value":1570}," chatId",{"type":60,"tag":196,"props":1572,"children":1573},{"style":265},[1574],{"type":66,"value":866},{"type":60,"tag":196,"props":1576,"children":1577},{"style":276},[1578],{"type":66,"value":1579}," chat",{"type":60,"tag":196,"props":1581,"children":1582},{"style":265},[1583],{"type":66,"value":876},{"type":60,"tag":196,"props":1585,"children":1586},{"style":276},[1587],{"type":66,"value":1491},{"type":60,"tag":196,"props":1589,"children":1590},{"style":265},[1591],{"type":66,"value":1051},{"type":60,"tag":196,"props":1593,"children":1595},{"class":198,"line":1594},16,[1596,1600,1604,1608,1613,1617],{"type":60,"tag":196,"props":1597,"children":1598},{"style":858},[1599],{"type":66,"value":1028},{"type":60,"tag":196,"props":1601,"children":1602},{"style":265},[1603],{"type":66,"value":866},{"type":60,"tag":196,"props":1605,"children":1606},{"style":265},[1607],{"type":66,"value":752},{"type":60,"tag":196,"props":1609,"children":1610},{"style":219},[1611],{"type":66,"value":1612},"Add a sidebar with navigation links and a user avatar",{"type":60,"tag":196,"props":1614,"children":1615},{"style":265},[1616],{"type":66,"value":1046},{"type":60,"tag":196,"props":1618,"children":1619},{"style":265},[1620],{"type":66,"value":1051},{"type":60,"tag":196,"props":1622,"children":1624},{"class":198,"line":1623},17,[1625,1629],{"type":60,"tag":196,"props":1626,"children":1627},{"style":265},[1628],{"type":66,"value":895},{"type":60,"tag":196,"props":1630,"children":1631},{"style":276},[1632],{"type":66,"value":900},{"type":60,"tag":196,"props":1634,"children":1636},{"class":198,"line":1635},18,[1637],{"type":60,"tag":196,"props":1638,"children":1639},{"emptyLinePlaceholder":234},[1640],{"type":66,"value":237},{"type":60,"tag":196,"props":1642,"children":1644},{"class":198,"line":1643},19,[1645],{"type":60,"tag":196,"props":1646,"children":1647},{"style":203},[1648],{"type":66,"value":1649},"\u002F\u002F Deploy when ready\n",{"type":60,"tag":196,"props":1651,"children":1653},{"class":198,"line":1652},20,[1654,1658,1663,1667,1671,1675,1679,1684,1688,1692,1696],{"type":60,"tag":196,"props":1655,"children":1656},{"style":827},[1657],{"type":66,"value":830},{"type":60,"tag":196,"props":1659,"children":1660},{"style":276},[1661],{"type":66,"value":1662}," deployment ",{"type":60,"tag":196,"props":1664,"children":1665},{"style":265},[1666],{"type":66,"value":840},{"type":60,"tag":196,"props":1668,"children":1669},{"style":724},[1670],{"type":66,"value":989},{"type":60,"tag":196,"props":1672,"children":1673},{"style":276},[1674],{"type":66,"value":737},{"type":60,"tag":196,"props":1676,"children":1677},{"style":265},[1678],{"type":66,"value":876},{"type":60,"tag":196,"props":1680,"children":1681},{"style":276},[1682],{"type":66,"value":1683},"deployments",{"type":60,"tag":196,"props":1685,"children":1686},{"style":265},[1687],{"type":66,"value":876},{"type":60,"tag":196,"props":1689,"children":1690},{"style":843},[1691],{"type":66,"value":1011},{"type":60,"tag":196,"props":1693,"children":1694},{"style":276},[1695],{"type":66,"value":850},{"type":60,"tag":196,"props":1697,"children":1698},{"style":265},[1699],{"type":66,"value":1020},{"type":60,"tag":196,"props":1701,"children":1703},{"class":198,"line":1702},21,[1704,1708,1712,1716,1720,1724],{"type":60,"tag":196,"props":1705,"children":1706},{"style":858},[1707],{"type":66,"value":1473},{"type":60,"tag":196,"props":1709,"children":1710},{"style":265},[1711],{"type":66,"value":866},{"type":60,"tag":196,"props":1713,"children":1714},{"style":276},[1715],{"type":66,"value":1482},{"type":60,"tag":196,"props":1717,"children":1718},{"style":265},[1719],{"type":66,"value":876},{"type":60,"tag":196,"props":1721,"children":1722},{"style":276},[1723],{"type":66,"value":1491},{"type":60,"tag":196,"props":1725,"children":1726},{"style":265},[1727],{"type":66,"value":1051},{"type":60,"tag":196,"props":1729,"children":1731},{"class":198,"line":1730},22,[1732,1736,1740,1744,1748,1752],{"type":60,"tag":196,"props":1733,"children":1734},{"style":858},[1735],{"type":66,"value":1570},{"type":60,"tag":196,"props":1737,"children":1738},{"style":265},[1739],{"type":66,"value":866},{"type":60,"tag":196,"props":1741,"children":1742},{"style":276},[1743],{"type":66,"value":1579},{"type":60,"tag":196,"props":1745,"children":1746},{"style":265},[1747],{"type":66,"value":876},{"type":60,"tag":196,"props":1749,"children":1750},{"style":276},[1751],{"type":66,"value":1491},{"type":60,"tag":196,"props":1753,"children":1754},{"style":265},[1755],{"type":66,"value":1051},{"type":60,"tag":196,"props":1757,"children":1759},{"class":198,"line":1758},23,[1760,1765,1769,1773,1777,1782,1786,1790],{"type":60,"tag":196,"props":1761,"children":1762},{"style":858},[1763],{"type":66,"value":1764}," versionId",{"type":60,"tag":196,"props":1766,"children":1767},{"style":265},[1768],{"type":66,"value":866},{"type":60,"tag":196,"props":1770,"children":1771},{"style":276},[1772],{"type":66,"value":1579},{"type":60,"tag":196,"props":1774,"children":1775},{"style":265},[1776],{"type":66,"value":876},{"type":60,"tag":196,"props":1778,"children":1779},{"style":276},[1780],{"type":66,"value":1781},"latestVersion",{"type":60,"tag":196,"props":1783,"children":1784},{"style":265},[1785],{"type":66,"value":876},{"type":60,"tag":196,"props":1787,"children":1788},{"style":276},[1789],{"type":66,"value":1491},{"type":60,"tag":196,"props":1791,"children":1792},{"style":265},[1793],{"type":66,"value":1051},{"type":60,"tag":196,"props":1795,"children":1797},{"class":198,"line":1796},24,[1798,1802],{"type":60,"tag":196,"props":1799,"children":1800},{"style":265},[1801],{"type":66,"value":895},{"type":60,"tag":196,"props":1803,"children":1804},{"style":276},[1805],{"type":66,"value":900},{"type":60,"tag":196,"props":1807,"children":1809},{"class":198,"line":1808},25,[1810],{"type":60,"tag":196,"props":1811,"children":1812},{"emptyLinePlaceholder":234},[1813],{"type":66,"value":237},{"type":60,"tag":196,"props":1815,"children":1817},{"class":198,"line":1816},26,[1818,1822,1826,1830,1834,1838,1843,1847,1852,1856,1861,1865],{"type":60,"tag":196,"props":1819,"children":1820},{"style":276},[1821],{"type":66,"value":1106},{"type":60,"tag":196,"props":1823,"children":1824},{"style":265},[1825],{"type":66,"value":876},{"type":60,"tag":196,"props":1827,"children":1828},{"style":843},[1829],{"type":66,"value":1115},{"type":60,"tag":196,"props":1831,"children":1832},{"style":276},[1833],{"type":66,"value":850},{"type":60,"tag":196,"props":1835,"children":1836},{"style":265},[1837],{"type":66,"value":1124},{"type":60,"tag":196,"props":1839,"children":1840},{"style":219},[1841],{"type":66,"value":1842},"Live at: ",{"type":60,"tag":196,"props":1844,"children":1845},{"style":265},[1846],{"type":66,"value":1134},{"type":60,"tag":196,"props":1848,"children":1849},{"style":276},[1850],{"type":66,"value":1851},"deployment",{"type":60,"tag":196,"props":1853,"children":1854},{"style":265},[1855],{"type":66,"value":876},{"type":60,"tag":196,"props":1857,"children":1858},{"style":276},[1859],{"type":66,"value":1860},"url",{"type":60,"tag":196,"props":1862,"children":1863},{"style":265},[1864],{"type":66,"value":1153},{"type":60,"tag":196,"props":1866,"children":1867},{"style":276},[1868],{"type":66,"value":900},{"type":60,"tag":165,"props":1870,"children":1872},{"id":1871},"download-generated-code",[1873],{"type":66,"value":1874},"Download Generated Code",{"type":60,"tag":185,"props":1876,"children":1878},{"className":712,"code":1877,"language":714,"meta":190,"style":190},"\u002F\u002F Download files from a specific chat version\nconst files = await v0.chats.downloadVersion({\n chatId: chat.id,\n versionId: chat.latestVersion.id,\n})\n",[1879],{"type":60,"tag":172,"props":1880,"children":1881},{"__ignoreMap":190},[1882,1890,1939,1966,2001],{"type":60,"tag":196,"props":1883,"children":1884},{"class":198,"line":199},[1885],{"type":60,"tag":196,"props":1886,"children":1887},{"style":203},[1888],{"type":66,"value":1889},"\u002F\u002F Download files from a specific chat version\n",{"type":60,"tag":196,"props":1891,"children":1892},{"class":198,"line":209},[1893,1897,1902,1906,1910,1914,1918,1922,1926,1931,1935],{"type":60,"tag":196,"props":1894,"children":1895},{"style":827},[1896],{"type":66,"value":830},{"type":60,"tag":196,"props":1898,"children":1899},{"style":276},[1900],{"type":66,"value":1901}," files ",{"type":60,"tag":196,"props":1903,"children":1904},{"style":265},[1905],{"type":66,"value":840},{"type":60,"tag":196,"props":1907,"children":1908},{"style":724},[1909],{"type":66,"value":989},{"type":60,"tag":196,"props":1911,"children":1912},{"style":276},[1913],{"type":66,"value":737},{"type":60,"tag":196,"props":1915,"children":1916},{"style":265},[1917],{"type":66,"value":876},{"type":60,"tag":196,"props":1919,"children":1920},{"style":276},[1921],{"type":66,"value":1002},{"type":60,"tag":196,"props":1923,"children":1924},{"style":265},[1925],{"type":66,"value":876},{"type":60,"tag":196,"props":1927,"children":1928},{"style":843},[1929],{"type":66,"value":1930},"downloadVersion",{"type":60,"tag":196,"props":1932,"children":1933},{"style":276},[1934],{"type":66,"value":850},{"type":60,"tag":196,"props":1936,"children":1937},{"style":265},[1938],{"type":66,"value":1020},{"type":60,"tag":196,"props":1940,"children":1941},{"class":198,"line":230},[1942,1946,1950,1954,1958,1962],{"type":60,"tag":196,"props":1943,"children":1944},{"style":858},[1945],{"type":66,"value":1570},{"type":60,"tag":196,"props":1947,"children":1948},{"style":265},[1949],{"type":66,"value":866},{"type":60,"tag":196,"props":1951,"children":1952},{"style":276},[1953],{"type":66,"value":1579},{"type":60,"tag":196,"props":1955,"children":1956},{"style":265},[1957],{"type":66,"value":876},{"type":60,"tag":196,"props":1959,"children":1960},{"style":276},[1961],{"type":66,"value":1491},{"type":60,"tag":196,"props":1963,"children":1964},{"style":265},[1965],{"type":66,"value":1051},{"type":60,"tag":196,"props":1967,"children":1968},{"class":198,"line":240},[1969,1973,1977,1981,1985,1989,1993,1997],{"type":60,"tag":196,"props":1970,"children":1971},{"style":858},[1972],{"type":66,"value":1764},{"type":60,"tag":196,"props":1974,"children":1975},{"style":265},[1976],{"type":66,"value":866},{"type":60,"tag":196,"props":1978,"children":1979},{"style":276},[1980],{"type":66,"value":1579},{"type":60,"tag":196,"props":1982,"children":1983},{"style":265},[1984],{"type":66,"value":876},{"type":60,"tag":196,"props":1986,"children":1987},{"style":276},[1988],{"type":66,"value":1781},{"type":60,"tag":196,"props":1990,"children":1991},{"style":265},[1992],{"type":66,"value":876},{"type":60,"tag":196,"props":1994,"children":1995},{"style":276},[1996],{"type":66,"value":1491},{"type":60,"tag":196,"props":1998,"children":1999},{"style":265},[2000],{"type":66,"value":1051},{"type":60,"tag":196,"props":2002,"children":2003},{"class":198,"line":36},[2004,2008],{"type":60,"tag":196,"props":2005,"children":2006},{"style":265},[2007],{"type":66,"value":895},{"type":60,"tag":196,"props":2009,"children":2010},{"style":276},[2011],{"type":66,"value":900},{"type":60,"tag":165,"props":2013,"children":2015},{"id":2014},"sdk-method-reference",[2016],{"type":66,"value":2017},"SDK Method Reference",{"type":60,"tag":69,"props":2019,"children":2020},{},[2021],{"type":60,"tag":101,"props":2022,"children":2023},{},[2024],{"type":66,"value":2025},"Chats:",{"type":60,"tag":93,"props":2027,"children":2028},{},[2029,2040,2051,2062,2073,2084,2095,2106,2117],{"type":60,"tag":97,"props":2030,"children":2031},{},[2032,2038],{"type":60,"tag":172,"props":2033,"children":2035},{"className":2034},[],[2036],{"type":66,"value":2037},"v0.chats.create(params)",{"type":66,"value":2039}," — Create a new chat",{"type":60,"tag":97,"props":2041,"children":2042},{},[2043,2049],{"type":60,"tag":172,"props":2044,"children":2046},{"className":2045},[],[2047],{"type":66,"value":2048},"v0.chats.sendMessage(params)",{"type":66,"value":2050}," — Send a message to an existing chat",{"type":60,"tag":97,"props":2052,"children":2053},{},[2054,2060],{"type":60,"tag":172,"props":2055,"children":2057},{"className":2056},[],[2058],{"type":66,"value":2059},"v0.chats.getById(params)",{"type":66,"value":2061}," — Retrieve a specific chat",{"type":60,"tag":97,"props":2063,"children":2064},{},[2065,2071],{"type":60,"tag":172,"props":2066,"children":2068},{"className":2067},[],[2069],{"type":66,"value":2070},"v0.chats.update(params)",{"type":66,"value":2072}," — Update chat properties",{"type":60,"tag":97,"props":2074,"children":2075},{},[2076,2082],{"type":60,"tag":172,"props":2077,"children":2079},{"className":2078},[],[2080],{"type":66,"value":2081},"v0.chats.findVersions(params)",{"type":66,"value":2083}," — List all versions of a chat",{"type":60,"tag":97,"props":2085,"children":2086},{},[2087,2093],{"type":60,"tag":172,"props":2088,"children":2090},{"className":2089},[],[2091],{"type":66,"value":2092},"v0.chats.getVersion(params)",{"type":66,"value":2094}," — Retrieve a specific version",{"type":60,"tag":97,"props":2096,"children":2097},{},[2098,2104],{"type":60,"tag":172,"props":2099,"children":2101},{"className":2100},[],[2102],{"type":66,"value":2103},"v0.chats.updateVersion(params)",{"type":66,"value":2105}," — Update files within a version",{"type":60,"tag":97,"props":2107,"children":2108},{},[2109,2115],{"type":60,"tag":172,"props":2110,"children":2112},{"className":2111},[],[2113],{"type":66,"value":2114},"v0.chats.downloadVersion(params)",{"type":66,"value":2116}," — Download files for a version",{"type":60,"tag":97,"props":2118,"children":2119},{},[2120,2126],{"type":60,"tag":172,"props":2121,"children":2123},{"className":2122},[],[2124],{"type":66,"value":2125},"v0.chats.resume(params)",{"type":66,"value":2127}," — Resume processing of a message",{"type":60,"tag":69,"props":2129,"children":2130},{},[2131],{"type":60,"tag":101,"props":2132,"children":2133},{},[2134],{"type":66,"value":2135},"Projects:",{"type":60,"tag":93,"props":2137,"children":2138},{},[2139,2150,2161,2172,2183,2194,2205],{"type":60,"tag":97,"props":2140,"children":2141},{},[2142,2148],{"type":60,"tag":172,"props":2143,"children":2145},{"className":2144},[],[2146],{"type":66,"value":2147},"v0.projects.create(params)",{"type":66,"value":2149}," — Create a new project",{"type":60,"tag":97,"props":2151,"children":2152},{},[2153,2159],{"type":60,"tag":172,"props":2154,"children":2156},{"className":2155},[],[2157],{"type":66,"value":2158},"v0.projects.getById(params)",{"type":66,"value":2160}," — Retrieve a project",{"type":60,"tag":97,"props":2162,"children":2163},{},[2164,2170],{"type":60,"tag":172,"props":2165,"children":2167},{"className":2166},[],[2168],{"type":66,"value":2169},"v0.projects.update(params)",{"type":66,"value":2171}," — Update a project",{"type":60,"tag":97,"props":2173,"children":2174},{},[2175,2181],{"type":60,"tag":172,"props":2176,"children":2178},{"className":2177},[],[2179],{"type":66,"value":2180},"v0.projects.find()",{"type":66,"value":2182}," — List all projects",{"type":60,"tag":97,"props":2184,"children":2185},{},[2186,2192],{"type":60,"tag":172,"props":2187,"children":2189},{"className":2188},[],[2190],{"type":66,"value":2191},"v0.projects.assign(params)",{"type":66,"value":2193}," — Assign a chat to a project",{"type":60,"tag":97,"props":2195,"children":2196},{},[2197,2203],{"type":60,"tag":172,"props":2198,"children":2200},{"className":2199},[],[2201],{"type":66,"value":2202},"v0.projects.getByChatId(params)",{"type":66,"value":2204}," — Get project by chat ID",{"type":60,"tag":97,"props":2206,"children":2207},{},[2208,2214],{"type":60,"tag":172,"props":2209,"children":2211},{"className":2210},[],[2212],{"type":66,"value":2213},"v0.projects.createEnvVars(params)",{"type":66,"value":2215}," — Create env vars for a project",{"type":60,"tag":69,"props":2217,"children":2218},{},[2219],{"type":60,"tag":101,"props":2220,"children":2221},{},[2222],{"type":66,"value":2223},"Deployments:",{"type":60,"tag":93,"props":2225,"children":2226},{},[2227,2238,2249,2260,2271],{"type":60,"tag":97,"props":2228,"children":2229},{},[2230,2236],{"type":60,"tag":172,"props":2231,"children":2233},{"className":2232},[],[2234],{"type":66,"value":2235},"v0.deployments.create(params)",{"type":66,"value":2237}," — Create deployment from a chat version",{"type":60,"tag":97,"props":2239,"children":2240},{},[2241,2247],{"type":60,"tag":172,"props":2242,"children":2244},{"className":2243},[],[2245],{"type":66,"value":2246},"v0.deployments.getById(params)",{"type":66,"value":2248}," — Get deployment details",{"type":60,"tag":97,"props":2250,"children":2251},{},[2252,2258],{"type":60,"tag":172,"props":2253,"children":2255},{"className":2254},[],[2256],{"type":66,"value":2257},"v0.deployments.delete(params)",{"type":66,"value":2259}," — Delete a deployment",{"type":60,"tag":97,"props":2261,"children":2262},{},[2263,2269],{"type":60,"tag":172,"props":2264,"children":2266},{"className":2265},[],[2267],{"type":66,"value":2268},"v0.deployments.find(params)",{"type":66,"value":2270}," — List deployments",{"type":60,"tag":97,"props":2272,"children":2273},{},[2274,2280],{"type":60,"tag":172,"props":2275,"children":2277},{"className":2276},[],[2278],{"type":66,"value":2279},"v0.deployments.findLogs(params)",{"type":66,"value":2281}," — Get deployment logs",{"type":60,"tag":75,"props":2283,"children":2285},{"id":2284},"rest-api",[2286],{"type":66,"value":2287},"REST API",{"type":60,"tag":69,"props":2289,"children":2290},{},[2291,2293,2299,2301],{"type":66,"value":2292},"Base URL: ",{"type":60,"tag":172,"props":2294,"children":2296},{"className":2295},[],[2297],{"type":66,"value":2298},"https:\u002F\u002Fapi.v0.dev\u002Fv1",{"type":66,"value":2300},"\nAuth: ",{"type":60,"tag":172,"props":2302,"children":2304},{"className":2303},[],[2305],{"type":66,"value":2306},"Authorization: Bearer \u003CV0_API_KEY>",{"type":60,"tag":2308,"props":2309,"children":2310},"table",{},[2311,2335],{"type":60,"tag":2312,"props":2313,"children":2314},"thead",{},[2315],{"type":60,"tag":2316,"props":2317,"children":2318},"tr",{},[2319,2325,2330],{"type":60,"tag":2320,"props":2321,"children":2322},"th",{},[2323],{"type":66,"value":2324},"Method",{"type":60,"tag":2320,"props":2326,"children":2327},{},[2328],{"type":66,"value":2329},"Endpoint",{"type":60,"tag":2320,"props":2331,"children":2332},{},[2333],{"type":66,"value":2334},"Description",{"type":60,"tag":2336,"props":2337,"children":2338},"tbody",{},[2339,2366,2391,2416,2441,2466,2491,2516,2540],{"type":60,"tag":2316,"props":2340,"children":2341},{},[2342,2352,2361],{"type":60,"tag":2343,"props":2344,"children":2345},"td",{},[2346],{"type":60,"tag":172,"props":2347,"children":2349},{"className":2348},[],[2350],{"type":66,"value":2351},"GET",{"type":60,"tag":2343,"props":2353,"children":2354},{},[2355],{"type":60,"tag":172,"props":2356,"children":2358},{"className":2357},[],[2359],{"type":66,"value":2360},"\u002Fv1\u002Fprojects",{"type":60,"tag":2343,"props":2362,"children":2363},{},[2364],{"type":66,"value":2365},"List projects",{"type":60,"tag":2316,"props":2367,"children":2368},{},[2369,2378,2386],{"type":60,"tag":2343,"props":2370,"children":2371},{},[2372],{"type":60,"tag":172,"props":2373,"children":2375},{"className":2374},[],[2376],{"type":66,"value":2377},"POST",{"type":60,"tag":2343,"props":2379,"children":2380},{},[2381],{"type":60,"tag":172,"props":2382,"children":2384},{"className":2383},[],[2385],{"type":66,"value":2360},{"type":60,"tag":2343,"props":2387,"children":2388},{},[2389],{"type":66,"value":2390},"Create project",{"type":60,"tag":2316,"props":2392,"children":2393},{},[2394,2402,2411],{"type":60,"tag":2343,"props":2395,"children":2396},{},[2397],{"type":60,"tag":172,"props":2398,"children":2400},{"className":2399},[],[2401],{"type":66,"value":2351},{"type":60,"tag":2343,"props":2403,"children":2404},{},[2405],{"type":60,"tag":172,"props":2406,"children":2408},{"className":2407},[],[2409],{"type":66,"value":2410},"\u002Fv1\u002Fprojects\u002F:id",{"type":60,"tag":2343,"props":2412,"children":2413},{},[2414],{"type":66,"value":2415},"Get project",{"type":60,"tag":2316,"props":2417,"children":2418},{},[2419,2428,2436],{"type":60,"tag":2343,"props":2420,"children":2421},{},[2422],{"type":60,"tag":172,"props":2423,"children":2425},{"className":2424},[],[2426],{"type":66,"value":2427},"PUT",{"type":60,"tag":2343,"props":2429,"children":2430},{},[2431],{"type":60,"tag":172,"props":2432,"children":2434},{"className":2433},[],[2435],{"type":66,"value":2410},{"type":60,"tag":2343,"props":2437,"children":2438},{},[2439],{"type":66,"value":2440},"Update project",{"type":60,"tag":2316,"props":2442,"children":2443},{},[2444,2453,2461],{"type":60,"tag":2343,"props":2445,"children":2446},{},[2447],{"type":60,"tag":172,"props":2448,"children":2450},{"className":2449},[],[2451],{"type":66,"value":2452},"DELETE",{"type":60,"tag":2343,"props":2454,"children":2455},{},[2456],{"type":60,"tag":172,"props":2457,"children":2459},{"className":2458},[],[2460],{"type":66,"value":2410},{"type":60,"tag":2343,"props":2462,"children":2463},{},[2464],{"type":66,"value":2465},"Delete project",{"type":60,"tag":2316,"props":2467,"children":2468},{},[2469,2477,2486],{"type":60,"tag":2343,"props":2470,"children":2471},{},[2472],{"type":60,"tag":172,"props":2473,"children":2475},{"className":2474},[],[2476],{"type":66,"value":2377},{"type":60,"tag":2343,"props":2478,"children":2479},{},[2480],{"type":60,"tag":172,"props":2481,"children":2483},{"className":2482},[],[2484],{"type":66,"value":2485},"\u002Fv1\u002Fchats",{"type":60,"tag":2343,"props":2487,"children":2488},{},[2489],{"type":66,"value":2490},"Create\u002Finitialize chat",{"type":60,"tag":2316,"props":2492,"children":2493},{},[2494,2502,2511],{"type":60,"tag":2343,"props":2495,"children":2496},{},[2497],{"type":60,"tag":172,"props":2498,"children":2500},{"className":2499},[],[2501],{"type":66,"value":2351},{"type":60,"tag":2343,"props":2503,"children":2504},{},[2505],{"type":60,"tag":172,"props":2506,"children":2508},{"className":2507},[],[2509],{"type":66,"value":2510},"\u002Fv1\u002Fchats\u002F:id\u002Fmessages",{"type":60,"tag":2343,"props":2512,"children":2513},{},[2514],{"type":66,"value":2515},"Get messages",{"type":60,"tag":2316,"props":2517,"children":2518},{},[2519,2527,2535],{"type":60,"tag":2343,"props":2520,"children":2521},{},[2522],{"type":60,"tag":172,"props":2523,"children":2525},{"className":2524},[],[2526],{"type":66,"value":2377},{"type":60,"tag":2343,"props":2528,"children":2529},{},[2530],{"type":60,"tag":172,"props":2531,"children":2533},{"className":2532},[],[2534],{"type":66,"value":2510},{"type":60,"tag":2343,"props":2536,"children":2537},{},[2538],{"type":66,"value":2539},"Send message",{"type":60,"tag":2316,"props":2541,"children":2542},{},[2543,2551,2560],{"type":60,"tag":2343,"props":2544,"children":2545},{},[2546],{"type":60,"tag":172,"props":2547,"children":2549},{"className":2548},[],[2550],{"type":66,"value":2377},{"type":60,"tag":2343,"props":2552,"children":2553},{},[2554],{"type":60,"tag":172,"props":2555,"children":2557},{"className":2556},[],[2558],{"type":66,"value":2559},"\u002Fv1\u002Fdeployments",{"type":60,"tag":2343,"props":2561,"children":2562},{},[2563],{"type":66,"value":2564},"Create deployment",{"type":60,"tag":165,"props":2566,"children":2568},{"id":2567},"rate-limits",[2569],{"type":66,"value":2570},"Rate Limits",{"type":60,"tag":93,"props":2572,"children":2573},{},[2574,2579,2584,2589,2594],{"type":60,"tag":97,"props":2575,"children":2576},{},[2577],{"type":66,"value":2578},"API Requests: 10,000\u002Fday",{"type":60,"tag":97,"props":2580,"children":2581},{},[2582],{"type":66,"value":2583},"Chat Messages: 1,000\u002Fday",{"type":60,"tag":97,"props":2585,"children":2586},{},[2587],{"type":66,"value":2588},"Deployments: 100\u002Fday",{"type":60,"tag":97,"props":2590,"children":2591},{},[2592],{"type":66,"value":2593},"File Uploads: 1 GB\u002Fday",{"type":60,"tag":97,"props":2595,"children":2596},{},[2597],{"type":66,"value":2598},"Projects per account: 100",{"type":60,"tag":165,"props":2600,"children":2602},{"id":2601},"available-models",[2603],{"type":66,"value":2604},"Available Models",{"type":60,"tag":93,"props":2606,"children":2607},{},[2608,2619,2630],{"type":60,"tag":97,"props":2609,"children":2610},{},[2611,2617],{"type":60,"tag":172,"props":2612,"children":2614},{"className":2613},[],[2615],{"type":66,"value":2616},"v0-1.5-md",{"type":66,"value":2618}," — Everyday tasks and UI generation",{"type":60,"tag":97,"props":2620,"children":2621},{},[2622,2628],{"type":60,"tag":172,"props":2623,"children":2625},{"className":2624},[],[2626],{"type":66,"value":2627},"v0-1.5-lg",{"type":66,"value":2629}," — Advanced reasoning",{"type":60,"tag":97,"props":2631,"children":2632},{},[2633,2639],{"type":60,"tag":172,"props":2634,"children":2636},{"className":2635},[],[2637],{"type":66,"value":2638},"v0-1.0-md",{"type":66,"value":2640}," — Legacy model",{"type":60,"tag":75,"props":2642,"children":2644},{"id":2643},"ai-sdk-integration",[2645],{"type":66,"value":2646},"AI SDK Integration",{"type":60,"tag":165,"props":2648,"children":2650},{"id":2649},"using-v0-as-an-ai-provider",[2651],{"type":66,"value":2652},"Using v0 as an AI Provider",{"type":60,"tag":185,"props":2654,"children":2656},{"className":187,"code":2655,"language":189,"meta":190,"style":190},"npm i @ai-sdk\u002Fvercel\n",[2657],{"type":60,"tag":172,"props":2658,"children":2659},{"__ignoreMap":190},[2660],{"type":60,"tag":196,"props":2661,"children":2662},{"class":198,"line":199},[2663,2667,2672],{"type":60,"tag":196,"props":2664,"children":2665},{"style":213},[2666],{"type":66,"value":693},{"type":60,"tag":196,"props":2668,"children":2669},{"style":219},[2670],{"type":66,"value":2671}," i",{"type":60,"tag":196,"props":2673,"children":2674},{"style":219},[2675],{"type":66,"value":2676}," @ai-sdk\u002Fvercel\n",{"type":60,"tag":185,"props":2678,"children":2680},{"className":712,"code":2679,"language":714,"meta":190,"style":190},"import { vercel } from '@ai-sdk\u002Fvercel'\nimport { generateText } from 'ai'\n\nconst { text } = await generateText({\n model: vercel('v0-1.5-md'),\n prompt: 'Create a login form with email and password fields',\n})\n",[2681],{"type":60,"tag":172,"props":2682,"children":2683},{"__ignoreMap":190},[2684,2721,2758,2765,2806,2847,2876],{"type":60,"tag":196,"props":2685,"children":2686},{"class":198,"line":199},[2687,2691,2695,2700,2704,2708,2712,2717],{"type":60,"tag":196,"props":2688,"children":2689},{"style":724},[2690],{"type":66,"value":727},{"type":60,"tag":196,"props":2692,"children":2693},{"style":265},[2694],{"type":66,"value":732},{"type":60,"tag":196,"props":2696,"children":2697},{"style":276},[2698],{"type":66,"value":2699}," vercel",{"type":60,"tag":196,"props":2701,"children":2702},{"style":265},[2703],{"type":66,"value":742},{"type":60,"tag":196,"props":2705,"children":2706},{"style":724},[2707],{"type":66,"value":747},{"type":60,"tag":196,"props":2709,"children":2710},{"style":265},[2711],{"type":66,"value":752},{"type":60,"tag":196,"props":2713,"children":2714},{"style":219},[2715],{"type":66,"value":2716},"@ai-sdk\u002Fvercel",{"type":60,"tag":196,"props":2718,"children":2719},{"style":265},[2720],{"type":66,"value":762},{"type":60,"tag":196,"props":2722,"children":2723},{"class":198,"line":209},[2724,2728,2732,2737,2741,2745,2749,2754],{"type":60,"tag":196,"props":2725,"children":2726},{"style":724},[2727],{"type":66,"value":727},{"type":60,"tag":196,"props":2729,"children":2730},{"style":265},[2731],{"type":66,"value":732},{"type":60,"tag":196,"props":2733,"children":2734},{"style":276},[2735],{"type":66,"value":2736}," generateText",{"type":60,"tag":196,"props":2738,"children":2739},{"style":265},[2740],{"type":66,"value":742},{"type":60,"tag":196,"props":2742,"children":2743},{"style":724},[2744],{"type":66,"value":747},{"type":60,"tag":196,"props":2746,"children":2747},{"style":265},[2748],{"type":66,"value":752},{"type":60,"tag":196,"props":2750,"children":2751},{"style":219},[2752],{"type":66,"value":2753},"ai",{"type":60,"tag":196,"props":2755,"children":2756},{"style":265},[2757],{"type":66,"value":762},{"type":60,"tag":196,"props":2759,"children":2760},{"class":198,"line":230},[2761],{"type":60,"tag":196,"props":2762,"children":2763},{"emptyLinePlaceholder":234},[2764],{"type":66,"value":237},{"type":60,"tag":196,"props":2766,"children":2767},{"class":198,"line":240},[2768,2772,2776,2781,2785,2790,2794,2798,2802],{"type":60,"tag":196,"props":2769,"children":2770},{"style":827},[2771],{"type":66,"value":830},{"type":60,"tag":196,"props":2773,"children":2774},{"style":265},[2775],{"type":66,"value":732},{"type":60,"tag":196,"props":2777,"children":2778},{"style":276},[2779],{"type":66,"value":2780}," text ",{"type":60,"tag":196,"props":2782,"children":2783},{"style":265},[2784],{"type":66,"value":895},{"type":60,"tag":196,"props":2786,"children":2787},{"style":265},[2788],{"type":66,"value":2789}," =",{"type":60,"tag":196,"props":2791,"children":2792},{"style":724},[2793],{"type":66,"value":989},{"type":60,"tag":196,"props":2795,"children":2796},{"style":843},[2797],{"type":66,"value":2736},{"type":60,"tag":196,"props":2799,"children":2800},{"style":276},[2801],{"type":66,"value":850},{"type":60,"tag":196,"props":2803,"children":2804},{"style":265},[2805],{"type":66,"value":1020},{"type":60,"tag":196,"props":2807,"children":2808},{"class":198,"line":36},[2809,2814,2818,2822,2826,2830,2834,2838,2843],{"type":60,"tag":196,"props":2810,"children":2811},{"style":858},[2812],{"type":66,"value":2813}," model",{"type":60,"tag":196,"props":2815,"children":2816},{"style":265},[2817],{"type":66,"value":866},{"type":60,"tag":196,"props":2819,"children":2820},{"style":843},[2821],{"type":66,"value":2699},{"type":60,"tag":196,"props":2823,"children":2824},{"style":276},[2825],{"type":66,"value":850},{"type":60,"tag":196,"props":2827,"children":2828},{"style":265},[2829],{"type":66,"value":1046},{"type":60,"tag":196,"props":2831,"children":2832},{"style":219},[2833],{"type":66,"value":2616},{"type":60,"tag":196,"props":2835,"children":2836},{"style":265},[2837],{"type":66,"value":1046},{"type":60,"tag":196,"props":2839,"children":2840},{"style":276},[2841],{"type":66,"value":2842},")",{"type":60,"tag":196,"props":2844,"children":2845},{"style":265},[2846],{"type":66,"value":1051},{"type":60,"tag":196,"props":2848,"children":2849},{"class":198,"line":55},[2850,2855,2859,2863,2868,2872],{"type":60,"tag":196,"props":2851,"children":2852},{"style":858},[2853],{"type":66,"value":2854}," prompt",{"type":60,"tag":196,"props":2856,"children":2857},{"style":265},[2858],{"type":66,"value":866},{"type":60,"tag":196,"props":2860,"children":2861},{"style":265},[2862],{"type":66,"value":752},{"type":60,"tag":196,"props":2864,"children":2865},{"style":219},[2866],{"type":66,"value":2867},"Create a login form with email and password fields",{"type":60,"tag":196,"props":2869,"children":2870},{"style":265},[2871],{"type":66,"value":1046},{"type":60,"tag":196,"props":2873,"children":2874},{"style":265},[2875],{"type":66,"value":1051},{"type":60,"tag":196,"props":2877,"children":2878},{"class":198,"line":294},[2879,2883],{"type":60,"tag":196,"props":2880,"children":2881},{"style":265},[2882],{"type":66,"value":895},{"type":60,"tag":196,"props":2884,"children":2885},{"style":276},[2886],{"type":66,"value":900},{"type":60,"tag":165,"props":2888,"children":2890},{"id":2889},"v0-ai-tools-agent-integration",[2891],{"type":66,"value":2892},"v0 AI Tools (Agent Integration)",{"type":60,"tag":69,"props":2894,"children":2895},{},[2896],{"type":66,"value":2897},"Use v0's full capabilities as tools within an AI SDK agent:",{"type":60,"tag":185,"props":2899,"children":2901},{"className":187,"code":2900,"language":189,"meta":190,"style":190},"npm install @v0-sdk\u002Fai-tools ai\n",[2902],{"type":60,"tag":172,"props":2903,"children":2904},{"__ignoreMap":190},[2905],{"type":60,"tag":196,"props":2906,"children":2907},{"class":198,"line":199},[2908,2912,2916,2921],{"type":60,"tag":196,"props":2909,"children":2910},{"style":213},[2911],{"type":66,"value":693},{"type":60,"tag":196,"props":2913,"children":2914},{"style":219},[2915],{"type":66,"value":698},{"type":60,"tag":196,"props":2917,"children":2918},{"style":219},[2919],{"type":66,"value":2920}," @v0-sdk\u002Fai-tools",{"type":60,"tag":196,"props":2922,"children":2923},{"style":219},[2924],{"type":66,"value":2925}," ai\n",{"type":60,"tag":185,"props":2927,"children":2929},{"className":712,"code":2928,"language":714,"meta":190,"style":190},"import { generateText } from 'ai'\nimport { openai } from '@ai-sdk\u002Fopenai'\nimport { v0Tools } from '@v0-sdk\u002Fai-tools'\n\nconst result = await generateText({\n model: openai('gpt-5.2'),\n prompt: 'Create a new React dashboard project with charts and a data table',\n tools: v0Tools({ apiKey: process.env.V0_API_KEY }),\n})\n",[2930],{"type":60,"tag":172,"props":2931,"children":2932},{"__ignoreMap":190},[2933,2968,3005,3042,3049,3081,3121,3149,3214],{"type":60,"tag":196,"props":2934,"children":2935},{"class":198,"line":199},[2936,2940,2944,2948,2952,2956,2960,2964],{"type":60,"tag":196,"props":2937,"children":2938},{"style":724},[2939],{"type":66,"value":727},{"type":60,"tag":196,"props":2941,"children":2942},{"style":265},[2943],{"type":66,"value":732},{"type":60,"tag":196,"props":2945,"children":2946},{"style":276},[2947],{"type":66,"value":2736},{"type":60,"tag":196,"props":2949,"children":2950},{"style":265},[2951],{"type":66,"value":742},{"type":60,"tag":196,"props":2953,"children":2954},{"style":724},[2955],{"type":66,"value":747},{"type":60,"tag":196,"props":2957,"children":2958},{"style":265},[2959],{"type":66,"value":752},{"type":60,"tag":196,"props":2961,"children":2962},{"style":219},[2963],{"type":66,"value":2753},{"type":60,"tag":196,"props":2965,"children":2966},{"style":265},[2967],{"type":66,"value":762},{"type":60,"tag":196,"props":2969,"children":2970},{"class":198,"line":209},[2971,2975,2979,2984,2988,2992,2996,3001],{"type":60,"tag":196,"props":2972,"children":2973},{"style":724},[2974],{"type":66,"value":727},{"type":60,"tag":196,"props":2976,"children":2977},{"style":265},[2978],{"type":66,"value":732},{"type":60,"tag":196,"props":2980,"children":2981},{"style":276},[2982],{"type":66,"value":2983}," openai",{"type":60,"tag":196,"props":2985,"children":2986},{"style":265},[2987],{"type":66,"value":742},{"type":60,"tag":196,"props":2989,"children":2990},{"style":724},[2991],{"type":66,"value":747},{"type":60,"tag":196,"props":2993,"children":2994},{"style":265},[2995],{"type":66,"value":752},{"type":60,"tag":196,"props":2997,"children":2998},{"style":219},[2999],{"type":66,"value":3000},"@ai-sdk\u002Fopenai",{"type":60,"tag":196,"props":3002,"children":3003},{"style":265},[3004],{"type":66,"value":762},{"type":60,"tag":196,"props":3006,"children":3007},{"class":198,"line":230},[3008,3012,3016,3021,3025,3029,3033,3038],{"type":60,"tag":196,"props":3009,"children":3010},{"style":724},[3011],{"type":66,"value":727},{"type":60,"tag":196,"props":3013,"children":3014},{"style":265},[3015],{"type":66,"value":732},{"type":60,"tag":196,"props":3017,"children":3018},{"style":276},[3019],{"type":66,"value":3020}," v0Tools",{"type":60,"tag":196,"props":3022,"children":3023},{"style":265},[3024],{"type":66,"value":742},{"type":60,"tag":196,"props":3026,"children":3027},{"style":724},[3028],{"type":66,"value":747},{"type":60,"tag":196,"props":3030,"children":3031},{"style":265},[3032],{"type":66,"value":752},{"type":60,"tag":196,"props":3034,"children":3035},{"style":219},[3036],{"type":66,"value":3037},"@v0-sdk\u002Fai-tools",{"type":60,"tag":196,"props":3039,"children":3040},{"style":265},[3041],{"type":66,"value":762},{"type":60,"tag":196,"props":3043,"children":3044},{"class":198,"line":240},[3045],{"type":60,"tag":196,"props":3046,"children":3047},{"emptyLinePlaceholder":234},[3048],{"type":66,"value":237},{"type":60,"tag":196,"props":3050,"children":3051},{"class":198,"line":36},[3052,3056,3061,3065,3069,3073,3077],{"type":60,"tag":196,"props":3053,"children":3054},{"style":827},[3055],{"type":66,"value":830},{"type":60,"tag":196,"props":3057,"children":3058},{"style":276},[3059],{"type":66,"value":3060}," result ",{"type":60,"tag":196,"props":3062,"children":3063},{"style":265},[3064],{"type":66,"value":840},{"type":60,"tag":196,"props":3066,"children":3067},{"style":724},[3068],{"type":66,"value":989},{"type":60,"tag":196,"props":3070,"children":3071},{"style":843},[3072],{"type":66,"value":2736},{"type":60,"tag":196,"props":3074,"children":3075},{"style":276},[3076],{"type":66,"value":850},{"type":60,"tag":196,"props":3078,"children":3079},{"style":265},[3080],{"type":66,"value":1020},{"type":60,"tag":196,"props":3082,"children":3083},{"class":198,"line":55},[3084,3088,3092,3096,3100,3104,3109,3113,3117],{"type":60,"tag":196,"props":3085,"children":3086},{"style":858},[3087],{"type":66,"value":2813},{"type":60,"tag":196,"props":3089,"children":3090},{"style":265},[3091],{"type":66,"value":866},{"type":60,"tag":196,"props":3093,"children":3094},{"style":843},[3095],{"type":66,"value":2983},{"type":60,"tag":196,"props":3097,"children":3098},{"style":276},[3099],{"type":66,"value":850},{"type":60,"tag":196,"props":3101,"children":3102},{"style":265},[3103],{"type":66,"value":1046},{"type":60,"tag":196,"props":3105,"children":3106},{"style":219},[3107],{"type":66,"value":3108},"gpt-5.2",{"type":60,"tag":196,"props":3110,"children":3111},{"style":265},[3112],{"type":66,"value":1046},{"type":60,"tag":196,"props":3114,"children":3115},{"style":276},[3116],{"type":66,"value":2842},{"type":60,"tag":196,"props":3118,"children":3119},{"style":265},[3120],{"type":66,"value":1051},{"type":60,"tag":196,"props":3122,"children":3123},{"class":198,"line":294},[3124,3128,3132,3136,3141,3145],{"type":60,"tag":196,"props":3125,"children":3126},{"style":858},[3127],{"type":66,"value":2854},{"type":60,"tag":196,"props":3129,"children":3130},{"style":265},[3131],{"type":66,"value":866},{"type":60,"tag":196,"props":3133,"children":3134},{"style":265},[3135],{"type":66,"value":752},{"type":60,"tag":196,"props":3137,"children":3138},{"style":219},[3139],{"type":66,"value":3140},"Create a new React dashboard project with charts and a data table",{"type":60,"tag":196,"props":3142,"children":3143},{"style":265},[3144],{"type":66,"value":1046},{"type":60,"tag":196,"props":3146,"children":3147},{"style":265},[3148],{"type":66,"value":1051},{"type":60,"tag":196,"props":3150,"children":3151},{"class":198,"line":303},[3152,3157,3161,3165,3169,3173,3177,3181,3185,3189,3193,3197,3202,3206,3210],{"type":60,"tag":196,"props":3153,"children":3154},{"style":858},[3155],{"type":66,"value":3156}," tools",{"type":60,"tag":196,"props":3158,"children":3159},{"style":265},[3160],{"type":66,"value":866},{"type":60,"tag":196,"props":3162,"children":3163},{"style":843},[3164],{"type":66,"value":3020},{"type":60,"tag":196,"props":3166,"children":3167},{"style":276},[3168],{"type":66,"value":850},{"type":60,"tag":196,"props":3170,"children":3171},{"style":265},[3172],{"type":66,"value":855},{"type":60,"tag":196,"props":3174,"children":3175},{"style":858},[3176],{"type":66,"value":861},{"type":60,"tag":196,"props":3178,"children":3179},{"style":265},[3180],{"type":66,"value":866},{"type":60,"tag":196,"props":3182,"children":3183},{"style":276},[3184],{"type":66,"value":871},{"type":60,"tag":196,"props":3186,"children":3187},{"style":265},[3188],{"type":66,"value":876},{"type":60,"tag":196,"props":3190,"children":3191},{"style":276},[3192],{"type":66,"value":881},{"type":60,"tag":196,"props":3194,"children":3195},{"style":265},[3196],{"type":66,"value":876},{"type":60,"tag":196,"props":3198,"children":3199},{"style":276},[3200],{"type":66,"value":3201},"V0_API_KEY ",{"type":60,"tag":196,"props":3203,"children":3204},{"style":265},[3205],{"type":66,"value":895},{"type":60,"tag":196,"props":3207,"children":3208},{"style":276},[3209],{"type":66,"value":2842},{"type":60,"tag":196,"props":3211,"children":3212},{"style":265},[3213],{"type":66,"value":1051},{"type":60,"tag":196,"props":3215,"children":3216},{"class":198,"line":325},[3217,3221],{"type":60,"tag":196,"props":3218,"children":3219},{"style":265},[3220],{"type":66,"value":895},{"type":60,"tag":196,"props":3222,"children":3223},{"style":276},[3224],{"type":66,"value":900},{"type":60,"tag":69,"props":3226,"children":3227},{},[3228],{"type":66,"value":3229},"For granular control, import specific tool sets:",{"type":60,"tag":185,"props":3231,"children":3233},{"className":712,"code":3232,"language":714,"meta":190,"style":190},"import { createChatTools, createProjectTools, createDeploymentTools } from '@v0-sdk\u002Fai-tools'\n",[3234],{"type":60,"tag":172,"props":3235,"children":3236},{"__ignoreMap":190},[3237],{"type":60,"tag":196,"props":3238,"children":3239},{"class":198,"line":199},[3240,3244,3248,3253,3257,3262,3266,3271,3275,3279,3283,3287],{"type":60,"tag":196,"props":3241,"children":3242},{"style":724},[3243],{"type":66,"value":727},{"type":60,"tag":196,"props":3245,"children":3246},{"style":265},[3247],{"type":66,"value":732},{"type":60,"tag":196,"props":3249,"children":3250},{"style":276},[3251],{"type":66,"value":3252}," createChatTools",{"type":60,"tag":196,"props":3254,"children":3255},{"style":265},[3256],{"type":66,"value":1438},{"type":60,"tag":196,"props":3258,"children":3259},{"style":276},[3260],{"type":66,"value":3261}," createProjectTools",{"type":60,"tag":196,"props":3263,"children":3264},{"style":265},[3265],{"type":66,"value":1438},{"type":60,"tag":196,"props":3267,"children":3268},{"style":276},[3269],{"type":66,"value":3270}," createDeploymentTools",{"type":60,"tag":196,"props":3272,"children":3273},{"style":265},[3274],{"type":66,"value":742},{"type":60,"tag":196,"props":3276,"children":3277},{"style":724},[3278],{"type":66,"value":747},{"type":60,"tag":196,"props":3280,"children":3281},{"style":265},[3282],{"type":66,"value":752},{"type":60,"tag":196,"props":3284,"children":3285},{"style":219},[3286],{"type":66,"value":3037},{"type":60,"tag":196,"props":3288,"children":3289},{"style":265},[3290],{"type":66,"value":762},{"type":60,"tag":69,"props":3292,"children":3293},{},[3294,3296,3302,3304,3310,3311,3316,3317,3323,3324,3330,3331,3337,3338,3344,3345,3351,3352,3358,3359,3365,3366,3372,3373,3379,3380,3386,3387,3393,3394,3400,3401,3407,3408,3414,3415,3421,3422,3428,3429,3435],{"type":66,"value":3295},"The ",{"type":60,"tag":172,"props":3297,"children":3299},{"className":3298},[],[3300],{"type":66,"value":3301},"v0Tools",{"type":66,"value":3303}," export includes 20+ tools: ",{"type":60,"tag":172,"props":3305,"children":3307},{"className":3306},[],[3308],{"type":66,"value":3309},"createChat",{"type":66,"value":377},{"type":60,"tag":172,"props":3312,"children":3314},{"className":3313},[],[3315],{"type":66,"value":1553},{"type":66,"value":377},{"type":60,"tag":172,"props":3318,"children":3320},{"className":3319},[],[3321],{"type":66,"value":3322},"getChat",{"type":66,"value":377},{"type":60,"tag":172,"props":3325,"children":3327},{"className":3326},[],[3328],{"type":66,"value":3329},"updateChat",{"type":66,"value":377},{"type":60,"tag":172,"props":3332,"children":3334},{"className":3333},[],[3335],{"type":66,"value":3336},"deleteChat",{"type":66,"value":377},{"type":60,"tag":172,"props":3339,"children":3341},{"className":3340},[],[3342],{"type":66,"value":3343},"favoriteChat",{"type":66,"value":377},{"type":60,"tag":172,"props":3346,"children":3348},{"className":3347},[],[3349],{"type":66,"value":3350},"forkChat",{"type":66,"value":377},{"type":60,"tag":172,"props":3353,"children":3355},{"className":3354},[],[3356],{"type":66,"value":3357},"listChats",{"type":66,"value":377},{"type":60,"tag":172,"props":3360,"children":3362},{"className":3361},[],[3363],{"type":66,"value":3364},"createProject",{"type":66,"value":377},{"type":60,"tag":172,"props":3367,"children":3369},{"className":3368},[],[3370],{"type":66,"value":3371},"getProject",{"type":66,"value":377},{"type":60,"tag":172,"props":3374,"children":3376},{"className":3375},[],[3377],{"type":66,"value":3378},"updateProject",{"type":66,"value":377},{"type":60,"tag":172,"props":3381,"children":3383},{"className":3382},[],[3384],{"type":66,"value":3385},"listProjects",{"type":66,"value":377},{"type":60,"tag":172,"props":3388,"children":3390},{"className":3389},[],[3391],{"type":66,"value":3392},"assignChatToProject",{"type":66,"value":377},{"type":60,"tag":172,"props":3395,"children":3397},{"className":3396},[],[3398],{"type":66,"value":3399},"createEnvironmentVariables",{"type":66,"value":377},{"type":60,"tag":172,"props":3402,"children":3404},{"className":3403},[],[3405],{"type":66,"value":3406},"createDeployment",{"type":66,"value":377},{"type":60,"tag":172,"props":3409,"children":3411},{"className":3410},[],[3412],{"type":66,"value":3413},"getDeployment",{"type":66,"value":377},{"type":60,"tag":172,"props":3416,"children":3418},{"className":3417},[],[3419],{"type":66,"value":3420},"deleteDeployment",{"type":66,"value":377},{"type":60,"tag":172,"props":3423,"children":3425},{"className":3424},[],[3426],{"type":66,"value":3427},"listDeployments",{"type":66,"value":377},{"type":60,"tag":172,"props":3430,"children":3432},{"className":3431},[],[3433],{"type":66,"value":3434},"getDeploymentLogs",{"type":66,"value":876},{"type":60,"tag":75,"props":3437,"children":3439},{"id":3438},"mcp-server",[3440],{"type":66,"value":3441},"MCP Server",{"type":60,"tag":69,"props":3443,"children":3444},{},[3445],{"type":66,"value":3446},"Connect v0 to any MCP-compatible IDE (Cursor, Codex, etc.):",{"type":60,"tag":185,"props":3448,"children":3452},{"className":3449,"code":3450,"language":3451,"meta":190,"style":190},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n \"mcpServers\": {\n \"v0\": {\n \"command\": \"npx\",\n \"args\": [\n \"mcp-remote\",\n \"https:\u002F\u002Fmcp.v0.dev\",\n \"--header\",\n \"Authorization: Bearer ${V0_API_KEY}\"\n ]\n }\n }\n}\n","json",[3453],{"type":60,"tag":172,"props":3454,"children":3455},{"__ignoreMap":190},[3456,3463,3490,3514,3552,3577,3598,3618,3638,3654,3662,3670,3678],{"type":60,"tag":196,"props":3457,"children":3458},{"class":198,"line":199},[3459],{"type":60,"tag":196,"props":3460,"children":3461},{"style":265},[3462],{"type":66,"value":1020},{"type":60,"tag":196,"props":3464,"children":3465},{"class":198,"line":209},[3466,3471,3476,3481,3485],{"type":60,"tag":196,"props":3467,"children":3468},{"style":265},[3469],{"type":66,"value":3470}," \"",{"type":60,"tag":196,"props":3472,"children":3473},{"style":827},[3474],{"type":66,"value":3475},"mcpServers",{"type":60,"tag":196,"props":3477,"children":3478},{"style":265},[3479],{"type":66,"value":3480},"\"",{"type":60,"tag":196,"props":3482,"children":3483},{"style":265},[3484],{"type":66,"value":866},{"type":60,"tag":196,"props":3486,"children":3487},{"style":265},[3488],{"type":66,"value":3489}," {\n",{"type":60,"tag":196,"props":3491,"children":3492},{"class":198,"line":230},[3493,3498,3502,3506,3510],{"type":60,"tag":196,"props":3494,"children":3495},{"style":265},[3496],{"type":66,"value":3497}," \"",{"type":60,"tag":196,"props":3499,"children":3500},{"style":213},[3501],{"type":66,"value":44},{"type":60,"tag":196,"props":3503,"children":3504},{"style":265},[3505],{"type":66,"value":3480},{"type":60,"tag":196,"props":3507,"children":3508},{"style":265},[3509],{"type":66,"value":866},{"type":60,"tag":196,"props":3511,"children":3512},{"style":265},[3513],{"type":66,"value":3489},{"type":60,"tag":196,"props":3515,"children":3516},{"class":198,"line":240},[3517,3522,3528,3532,3536,3540,3544,3548],{"type":60,"tag":196,"props":3518,"children":3519},{"style":265},[3520],{"type":66,"value":3521}," \"",{"type":60,"tag":196,"props":3523,"children":3525},{"style":3524},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[3526],{"type":66,"value":3527},"command",{"type":60,"tag":196,"props":3529,"children":3530},{"style":265},[3531],{"type":66,"value":3480},{"type":60,"tag":196,"props":3533,"children":3534},{"style":265},[3535],{"type":66,"value":866},{"type":60,"tag":196,"props":3537,"children":3538},{"style":265},[3539],{"type":66,"value":439},{"type":60,"tag":196,"props":3541,"children":3542},{"style":219},[3543],{"type":66,"value":216},{"type":60,"tag":196,"props":3545,"children":3546},{"style":265},[3547],{"type":66,"value":3480},{"type":60,"tag":196,"props":3549,"children":3550},{"style":265},[3551],{"type":66,"value":1051},{"type":60,"tag":196,"props":3553,"children":3554},{"class":198,"line":36},[3555,3559,3564,3568,3572],{"type":60,"tag":196,"props":3556,"children":3557},{"style":265},[3558],{"type":66,"value":3521},{"type":60,"tag":196,"props":3560,"children":3561},{"style":3524},[3562],{"type":66,"value":3563},"args",{"type":60,"tag":196,"props":3565,"children":3566},{"style":265},[3567],{"type":66,"value":3480},{"type":60,"tag":196,"props":3569,"children":3570},{"style":265},[3571],{"type":66,"value":866},{"type":60,"tag":196,"props":3573,"children":3574},{"style":265},[3575],{"type":66,"value":3576}," [\n",{"type":60,"tag":196,"props":3578,"children":3579},{"class":198,"line":55},[3580,3585,3590,3594],{"type":60,"tag":196,"props":3581,"children":3582},{"style":265},[3583],{"type":66,"value":3584}," \"",{"type":60,"tag":196,"props":3586,"children":3587},{"style":219},[3588],{"type":66,"value":3589},"mcp-remote",{"type":60,"tag":196,"props":3591,"children":3592},{"style":265},[3593],{"type":66,"value":3480},{"type":60,"tag":196,"props":3595,"children":3596},{"style":265},[3597],{"type":66,"value":1051},{"type":60,"tag":196,"props":3599,"children":3600},{"class":198,"line":294},[3601,3605,3610,3614],{"type":60,"tag":196,"props":3602,"children":3603},{"style":265},[3604],{"type":66,"value":3584},{"type":60,"tag":196,"props":3606,"children":3607},{"style":219},[3608],{"type":66,"value":3609},"https:\u002F\u002Fmcp.v0.dev",{"type":60,"tag":196,"props":3611,"children":3612},{"style":265},[3613],{"type":66,"value":3480},{"type":60,"tag":196,"props":3615,"children":3616},{"style":265},[3617],{"type":66,"value":1051},{"type":60,"tag":196,"props":3619,"children":3620},{"class":198,"line":303},[3621,3625,3630,3634],{"type":60,"tag":196,"props":3622,"children":3623},{"style":265},[3624],{"type":66,"value":3584},{"type":60,"tag":196,"props":3626,"children":3627},{"style":219},[3628],{"type":66,"value":3629},"--header",{"type":60,"tag":196,"props":3631,"children":3632},{"style":265},[3633],{"type":66,"value":3480},{"type":60,"tag":196,"props":3635,"children":3636},{"style":265},[3637],{"type":66,"value":1051},{"type":60,"tag":196,"props":3639,"children":3640},{"class":198,"line":325},[3641,3645,3650],{"type":60,"tag":196,"props":3642,"children":3643},{"style":265},[3644],{"type":66,"value":3584},{"type":60,"tag":196,"props":3646,"children":3647},{"style":219},[3648],{"type":66,"value":3649},"Authorization: Bearer ${V0_API_KEY}",{"type":60,"tag":196,"props":3651,"children":3652},{"style":265},[3653],{"type":66,"value":449},{"type":60,"tag":196,"props":3655,"children":3656},{"class":198,"line":578},[3657],{"type":60,"tag":196,"props":3658,"children":3659},{"style":265},[3660],{"type":66,"value":3661}," ]\n",{"type":60,"tag":196,"props":3663,"children":3664},{"class":198,"line":586},[3665],{"type":60,"tag":196,"props":3666,"children":3667},{"style":265},[3668],{"type":66,"value":3669}," }\n",{"type":60,"tag":196,"props":3671,"children":3672},{"class":198,"line":1509},[3673],{"type":60,"tag":196,"props":3674,"children":3675},{"style":265},[3676],{"type":66,"value":3677}," }\n",{"type":60,"tag":196,"props":3679,"children":3680},{"class":198,"line":1517},[3681],{"type":60,"tag":196,"props":3682,"children":3683},{"style":265},[3684],{"type":66,"value":3685},"}\n",{"type":60,"tag":69,"props":3687,"children":3688},{},[3689],{"type":66,"value":3690},"Exposes 4 tools: create chat, get chat info, find chats, send messages.",{"type":60,"tag":75,"props":3692,"children":3694},{"id":3693},"github-integration",[3695],{"type":66,"value":3696},"GitHub Integration",{"type":60,"tag":165,"props":3698,"children":3700},{"id":3699},"setup",[3701],{"type":66,"value":3702},"Setup",{"type":60,"tag":3704,"props":3705,"children":3706},"ol",{},[3707,3724,3729,3741],{"type":60,"tag":97,"props":3708,"children":3709},{},[3710,3712,3717,3719],{"type":66,"value":3711},"In the v0 chat sidebar → ",{"type":60,"tag":101,"props":3713,"children":3714},{},[3715],{"type":66,"value":3716},"Git",{"type":66,"value":3718}," section → click ",{"type":60,"tag":101,"props":3720,"children":3721},{},[3722],{"type":66,"value":3723},"Connect",{"type":60,"tag":97,"props":3725,"children":3726},{},[3727],{"type":66,"value":3728},"Select GitHub account\u002Forg scope and repository name",{"type":60,"tag":97,"props":3730,"children":3731},{},[3732,3734,3739],{"type":66,"value":3733},"Click ",{"type":60,"tag":101,"props":3735,"children":3736},{},[3737],{"type":66,"value":3738},"Create Repository",{"type":66,"value":3740}," — links chat to a new private GitHub repo",{"type":60,"tag":97,"props":3742,"children":3743},{},[3744],{"type":66,"value":3745},"A Vercel deployment is automatically created",{"type":60,"tag":165,"props":3747,"children":3749},{"id":3748},"branch-behavior-automatic",[3750],{"type":66,"value":3751},"Branch Behavior (Automatic)",{"type":60,"tag":93,"props":3753,"children":3754},{},[3755,3767,3777],{"type":60,"tag":97,"props":3756,"children":3757},{},[3758,3760,3766],{"type":66,"value":3759},"Every chat creates a new branch (e.g., ",{"type":60,"tag":172,"props":3761,"children":3763},{"className":3762},[],[3764],{"type":66,"value":3765},"v0\u002Fmain-e7bad8e4",{"type":66,"value":2842},{"type":60,"tag":97,"props":3768,"children":3769},{},[3770,3772],{"type":66,"value":3771},"Every prompt that changes code ",{"type":60,"tag":101,"props":3773,"children":3774},{},[3775],{"type":66,"value":3776},"automatically commits and pushes",{"type":60,"tag":97,"props":3778,"children":3779},{},[3780,3782],{"type":66,"value":3781},"You never work directly on ",{"type":60,"tag":172,"props":3783,"children":3785},{"className":3784},[],[3786],{"type":66,"value":3787},"main",{"type":60,"tag":165,"props":3789,"children":3791},{"id":3790},"pr-workflow",[3792],{"type":66,"value":3793},"PR Workflow",{"type":60,"tag":3704,"props":3795,"children":3796},{},[3797,3809,3834,3839,3844],{"type":60,"tag":97,"props":3798,"children":3799},{},[3800,3802,3807],{"type":66,"value":3801},"Click the ",{"type":60,"tag":101,"props":3803,"children":3804},{},[3805],{"type":66,"value":3806},"Publish",{"type":66,"value":3808}," button (shows PR icon when GitHub-connected)",{"type":60,"tag":97,"props":3810,"children":3811},{},[3812,3814,3819,3821,3827,3829],{"type":66,"value":3813},"Select ",{"type":60,"tag":101,"props":3815,"children":3816},{},[3817],{"type":66,"value":3818},"Open PR",{"type":66,"value":3820}," — creates PR from ",{"type":60,"tag":172,"props":3822,"children":3824},{"className":3823},[],[3825],{"type":66,"value":3826},"v0\u002Fmain-abc123",{"type":66,"value":3828}," → ",{"type":60,"tag":172,"props":3830,"children":3832},{"className":3831},[],[3833],{"type":66,"value":3787},{"type":60,"tag":97,"props":3835,"children":3836},{},[3837],{"type":66,"value":3838},"Review in the GitHub modal or on GitHub.com",{"type":60,"tag":97,"props":3840,"children":3841},{},[3842],{"type":66,"value":3843},"Merge the PR → closes the chat permanently",{"type":60,"tag":97,"props":3845,"children":3846},{},[3847],{"type":66,"value":3848},"Every PR gets a Preview Deployment; merging triggers Production Deployment",{"type":60,"tag":165,"props":3850,"children":3852},{"id":3851},"importing-existing-repos",[3853],{"type":66,"value":3854},"Importing Existing Repos",{"type":60,"tag":3704,"props":3856,"children":3857},{},[3858,3871,3876],{"type":60,"tag":97,"props":3859,"children":3860},{},[3861,3863,3869],{"type":66,"value":3862},"In v0 prompt bar → click ",{"type":60,"tag":172,"props":3864,"children":3866},{"className":3865},[],[3867],{"type":66,"value":3868},"+",{"type":66,"value":3870}," → \"Import from GitHub\"",{"type":60,"tag":97,"props":3872,"children":3873},{},[3874],{"type":66,"value":3875},"v0 reads your existing codebase and env vars from Vercel",{"type":60,"tag":97,"props":3877,"children":3878},{},[3879],{"type":66,"value":3880},"Iterate with prompts; all changes committed to a new branch",{"type":60,"tag":75,"props":3882,"children":3884},{"id":3883},"prompt-engineering-tips",[3885],{"type":66,"value":3886},"Prompt Engineering Tips",{"type":60,"tag":165,"props":3888,"children":3890},{"id":3889},"_1-be-specific-about-design",[3891],{"type":66,"value":3892},"1. Be Specific About Design",{"type":60,"tag":185,"props":3894,"children":3898},{"className":3895,"code":3897,"language":66},[3896],"language-text","Weak: \"Build a dashboard\"\nStrong: \"Build a support ticket dashboard. Mobile-first, light theme, high\n contrast. Color code: red for urgent, yellow for medium, green for low.\n Show agent status badges. Maximum 2 columns on mobile.\"\n",[3899],{"type":60,"tag":172,"props":3900,"children":3901},{"__ignoreMap":190},[3902],{"type":66,"value":3897},{"type":60,"tag":165,"props":3904,"children":3906},{"id":3905},"_2-specify-your-tech-stack",[3907],{"type":66,"value":3908},"2. Specify Your Tech Stack",{"type":60,"tag":185,"props":3910,"children":3913},{"className":3911,"code":3912,"language":66},[3896],"\"Build a real-time chat app using: Next.js 16 with App Router,\nSocket.io for messaging, Vercel Postgres for storage,\nNextAuth.js for authentication.\"\n",[3914],{"type":60,"tag":172,"props":3915,"children":3916},{"__ignoreMap":190},[3917],{"type":66,"value":3912},{"type":60,"tag":165,"props":3919,"children":3921},{"id":3920},"_3-define-user-roles",[3922],{"type":66,"value":3923},"3. Define User Roles",{"type":60,"tag":185,"props":3925,"children":3928},{"className":3926,"code":3927,"language":66},[3896],"\"Create a team collaboration tool with admin, manager, and member\nroles, task assignment, progress tracking, and file sharing.\"\n",[3929],{"type":60,"tag":172,"props":3930,"children":3931},{"__ignoreMap":190},[3932],{"type":66,"value":3927},{"type":60,"tag":165,"props":3934,"children":3936},{"id":3935},"_4-queue-multiple-prompts",[3937],{"type":66,"value":3938},"4. Queue Multiple Prompts",{"type":60,"tag":69,"props":3940,"children":3941},{},[3942],{"type":66,"value":3943},"You can queue up to 10 prompts while v0 is still generating:",{"type":60,"tag":3704,"props":3945,"children":3946},{},[3947,3952,3957,3962],{"type":60,"tag":97,"props":3948,"children":3949},{},[3950],{"type":66,"value":3951},"\"Create the base layout with navigation\"",{"type":60,"tag":97,"props":3953,"children":3954},{},[3955],{"type":66,"value":3956},"\"Add authentication with NextAuth\"",{"type":60,"tag":97,"props":3958,"children":3959},{},[3960],{"type":66,"value":3961},"\"Connect the database and add CRUD operations\"",{"type":60,"tag":97,"props":3963,"children":3964},{},[3965],{"type":66,"value":3966},"\"Add a settings page with dark mode toggle\"",{"type":60,"tag":165,"props":3968,"children":3970},{"id":3969},"_5-specify-error-and-empty-states",[3971],{"type":66,"value":3972},"5. Specify Error and Empty States",{"type":60,"tag":185,"props":3974,"children":3977},{"className":3975,"code":3976,"language":66},[3896],"\"Add comprehensive error handling for network failures, invalid\ninput, and empty states with helpful recovery suggestions.\"\n",[3978],{"type":60,"tag":172,"props":3979,"children":3980},{"__ignoreMap":190},[3981],{"type":66,"value":3976},{"type":60,"tag":165,"props":3983,"children":3985},{"id":3984},"_6-use-visual-selection-for-precision",[3986],{"type":66,"value":3987},"6. Use Visual Selection for Precision",{"type":60,"tag":69,"props":3989,"children":3990},{},[3991],{"type":66,"value":3992},"Click a specific element in the preview before typing to target exactly what you want to change. Eliminates ambiguity for multi-instance components.",{"type":60,"tag":165,"props":3994,"children":3996},{"id":3995},"_7-use-design-mode-vs-prompts",[3997],{"type":66,"value":3998},"7. Use Design Mode vs Prompts",{"type":60,"tag":93,"props":4000,"children":4001},{},[4002,4012],{"type":60,"tag":97,"props":4003,"children":4004},{},[4005,4010],{"type":60,"tag":101,"props":4006,"children":4007},{},[4008],{"type":66,"value":4009},"Prompts",{"type":66,"value":4011},": Structural changes, adding features, wiring up logic",{"type":60,"tag":97,"props":4013,"children":4014},{},[4015,4020],{"type":60,"tag":101,"props":4016,"children":4017},{},[4018],{"type":66,"value":4019},"Design Mode",{"type":66,"value":4021}," (click element → adjust): Colors, spacing, typography tweaks",{"type":60,"tag":165,"props":4023,"children":4025},{"id":4024},"_8-v0s-default-output-stack",[4026],{"type":66,"value":4027},"8. v0's Default Output Stack",{"type":60,"tag":69,"props":4029,"children":4030},{},[4031],{"type":66,"value":4032},"When no framework is specified, v0 generates:",{"type":60,"tag":93,"props":4034,"children":4035},{},[4036,4041,4046,4051,4056],{"type":60,"tag":97,"props":4037,"children":4038},{},[4039],{"type":66,"value":4040},"React with JSX + TypeScript",{"type":60,"tag":97,"props":4042,"children":4043},{},[4044],{"type":66,"value":4045},"Tailwind CSS",{"type":60,"tag":97,"props":4047,"children":4048},{},[4049],{"type":66,"value":4050},"shadcn\u002Fui components",{"type":60,"tag":97,"props":4052,"children":4053},{},[4054],{"type":66,"value":4055},"Lucide React icons",{"type":60,"tag":97,"props":4057,"children":4058},{},[4059],{"type":66,"value":4060},"Complete, copy-paste-ready code (never partial stubs)",{"type":60,"tag":75,"props":4062,"children":4064},{"id":4063},"design-normalization-for-v0-output",[4065],{"type":66,"value":4066},"Design Normalization for v0 Output",{"type":60,"tag":69,"props":4068,"children":4069},{},[4070],{"type":66,"value":4071},"v0 is strongest when you specify both structure and aesthetic direction. For Vercel-stack projects, include guidance like: use shadcn\u002Fui primitives, use Geist fonts, default to dark mode, use zinc\u002Fneutral tokens, avoid generic card grids. After importing v0 code, normalize it: replace ad-hoc controls with shadcn components, collapse repeated card grids into stronger patterns, align typography to Geist, remove mixed radii and decorative effects.",{"type":60,"tag":75,"props":4073,"children":4075},{"id":4074},"integration-patterns",[4076],{"type":66,"value":4077},"Integration Patterns",{"type":60,"tag":165,"props":4079,"children":4081},{"id":4080},"pattern-1-generate-components-import-locally",[4082],{"type":66,"value":4083},"Pattern 1: Generate Components, Import Locally",{"type":60,"tag":69,"props":4085,"children":4086},{},[4087],{"type":66,"value":4088},"Best for adding individual UI components to an existing app.",{"type":60,"tag":185,"props":4090,"children":4092},{"className":187,"code":4091,"language":189,"meta":190,"style":190},"npx v0@latest init\nnpx v0@latest add \u003Ccomponent-id>\n",[4093],{"type":60,"tag":172,"props":4094,"children":4095},{"__ignoreMap":190},[4096,4111],{"type":60,"tag":196,"props":4097,"children":4098},{"class":198,"line":199},[4099,4103,4107],{"type":60,"tag":196,"props":4100,"children":4101},{"style":213},[4102],{"type":66,"value":216},{"type":60,"tag":196,"props":4104,"children":4105},{"style":219},[4106],{"type":66,"value":222},{"type":60,"tag":196,"props":4108,"children":4109},{"style":219},[4110],{"type":66,"value":227},{"type":60,"tag":196,"props":4112,"children":4113},{"class":198,"line":209},[4114,4118,4122,4126,4130,4134,4138],{"type":60,"tag":196,"props":4115,"children":4116},{"style":213},[4117],{"type":66,"value":216},{"type":60,"tag":196,"props":4119,"children":4120},{"style":219},[4121],{"type":66,"value":222},{"type":60,"tag":196,"props":4123,"children":4124},{"style":219},[4125],{"type":66,"value":262},{"type":60,"tag":196,"props":4127,"children":4128},{"style":265},[4129],{"type":66,"value":268},{"type":60,"tag":196,"props":4131,"children":4132},{"style":219},[4133],{"type":66,"value":273},{"type":60,"tag":196,"props":4135,"children":4136},{"style":276},[4137],{"type":66,"value":279},{"type":60,"tag":196,"props":4139,"children":4140},{"style":265},[4141],{"type":66,"value":284},{"type":60,"tag":69,"props":4143,"children":4144},{},[4145],{"type":66,"value":4146},"Then import the component:",{"type":60,"tag":185,"props":4148,"children":4152},{"className":4149,"code":4150,"language":4151,"meta":190,"style":190},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { DataTable } from '@\u002Fcomponents\u002Fdata-table'\n\nexport default function DashboardPage() {\n return \u003CDataTable data={rows} columns={columns} \u002F>\n}\n","tsx",[4153],{"type":60,"tag":172,"props":4154,"children":4155},{"__ignoreMap":190},[4156,4193,4200,4232,4287],{"type":60,"tag":196,"props":4157,"children":4158},{"class":198,"line":199},[4159,4163,4167,4172,4176,4180,4184,4189],{"type":60,"tag":196,"props":4160,"children":4161},{"style":724},[4162],{"type":66,"value":727},{"type":60,"tag":196,"props":4164,"children":4165},{"style":265},[4166],{"type":66,"value":732},{"type":60,"tag":196,"props":4168,"children":4169},{"style":276},[4170],{"type":66,"value":4171}," DataTable",{"type":60,"tag":196,"props":4173,"children":4174},{"style":265},[4175],{"type":66,"value":742},{"type":60,"tag":196,"props":4177,"children":4178},{"style":724},[4179],{"type":66,"value":747},{"type":60,"tag":196,"props":4181,"children":4182},{"style":265},[4183],{"type":66,"value":752},{"type":60,"tag":196,"props":4185,"children":4186},{"style":219},[4187],{"type":66,"value":4188},"@\u002Fcomponents\u002Fdata-table",{"type":60,"tag":196,"props":4190,"children":4191},{"style":265},[4192],{"type":66,"value":762},{"type":60,"tag":196,"props":4194,"children":4195},{"class":198,"line":209},[4196],{"type":60,"tag":196,"props":4197,"children":4198},{"emptyLinePlaceholder":234},[4199],{"type":66,"value":237},{"type":60,"tag":196,"props":4201,"children":4202},{"class":198,"line":230},[4203,4208,4213,4218,4223,4228],{"type":60,"tag":196,"props":4204,"children":4205},{"style":724},[4206],{"type":66,"value":4207},"export",{"type":60,"tag":196,"props":4209,"children":4210},{"style":724},[4211],{"type":66,"value":4212}," default",{"type":60,"tag":196,"props":4214,"children":4215},{"style":827},[4216],{"type":66,"value":4217}," function",{"type":60,"tag":196,"props":4219,"children":4220},{"style":843},[4221],{"type":66,"value":4222}," DashboardPage",{"type":60,"tag":196,"props":4224,"children":4225},{"style":265},[4226],{"type":66,"value":4227},"()",{"type":60,"tag":196,"props":4229,"children":4230},{"style":265},[4231],{"type":66,"value":3489},{"type":60,"tag":196,"props":4233,"children":4234},{"class":198,"line":240},[4235,4240,4244,4249,4254,4259,4264,4269,4274,4278,4282],{"type":60,"tag":196,"props":4236,"children":4237},{"style":724},[4238],{"type":66,"value":4239}," return",{"type":60,"tag":196,"props":4241,"children":4242},{"style":265},[4243],{"type":66,"value":268},{"type":60,"tag":196,"props":4245,"children":4246},{"style":213},[4247],{"type":66,"value":4248},"DataTable",{"type":60,"tag":196,"props":4250,"children":4251},{"style":827},[4252],{"type":66,"value":4253}," data",{"type":60,"tag":196,"props":4255,"children":4256},{"style":265},[4257],{"type":66,"value":4258},"={",{"type":60,"tag":196,"props":4260,"children":4261},{"style":276},[4262],{"type":66,"value":4263},"rows",{"type":60,"tag":196,"props":4265,"children":4266},{"style":265},[4267],{"type":66,"value":4268},"} ",{"type":60,"tag":196,"props":4270,"children":4271},{"style":827},[4272],{"type":66,"value":4273},"columns",{"type":60,"tag":196,"props":4275,"children":4276},{"style":265},[4277],{"type":66,"value":4258},{"type":60,"tag":196,"props":4279,"children":4280},{"style":276},[4281],{"type":66,"value":4273},{"type":60,"tag":196,"props":4283,"children":4284},{"style":265},[4285],{"type":66,"value":4286},"} \u002F>\n",{"type":60,"tag":196,"props":4288,"children":4289},{"class":198,"line":36},[4290],{"type":60,"tag":196,"props":4291,"children":4292},{"style":265},[4293],{"type":66,"value":3685},{"type":60,"tag":165,"props":4295,"children":4297},{"id":4296},"pattern-2-github-round-trip",[4298],{"type":66,"value":4299},"Pattern 2: GitHub Round-Trip",{"type":60,"tag":69,"props":4301,"children":4302},{},[4303],{"type":66,"value":4304},"Best for iterating on a full feature branch with non-engineers.",{"type":60,"tag":3704,"props":4306,"children":4307},{},[4308,4313,4318,4323],{"type":60,"tag":97,"props":4309,"children":4310},{},[4311],{"type":66,"value":4312},"Import repo into v0 from GitHub",{"type":60,"tag":97,"props":4314,"children":4315},{},[4316],{"type":66,"value":4317},"Non-engineer iterates via prompts",{"type":60,"tag":97,"props":4319,"children":4320},{},[4321],{"type":66,"value":4322},"v0 auto-commits each change to a feature branch",{"type":60,"tag":97,"props":4324,"children":4325},{},[4326],{"type":66,"value":4327},"Engineer reviews the PR, merges",{"type":60,"tag":165,"props":4329,"children":4331},{"id":4330},"pattern-3-sdk-automation",[4332],{"type":66,"value":4333},"Pattern 3: SDK Automation",{"type":60,"tag":69,"props":4335,"children":4336},{},[4337],{"type":66,"value":4338},"Best for CI\u002FCD pipelines or programmatic component generation.",{"type":60,"tag":185,"props":4340,"children":4342},{"className":712,"code":4341,"language":714,"meta":190,"style":190},"import { v0 } from 'v0-sdk'\n\n\u002F\u002F Generate a component from a design spec\nconst chat = await v0.chats.create({\n message: `Create a pricing table component with these tiers:\n - Free: 0\u002Fmo, 1 project, community support\n - Pro: $20\u002Fmo, unlimited projects, priority support\n - Enterprise: Custom, SLA, dedicated support`,\n})\n\n\u002F\u002F Wait for generation, then download\nconst files = await v0.chats.downloadVersion({\n chatId: chat.id,\n versionId: chat.latestVersion.id,\n})\n",[4343],{"type":60,"tag":172,"props":4344,"children":4345},{"__ignoreMap":190},[4346,4381,4388,4396,4443,4464,4472,4480,4496,4507,4514,4522,4569,4596,4631],{"type":60,"tag":196,"props":4347,"children":4348},{"class":198,"line":199},[4349,4353,4357,4361,4365,4369,4373,4377],{"type":60,"tag":196,"props":4350,"children":4351},{"style":724},[4352],{"type":66,"value":727},{"type":60,"tag":196,"props":4354,"children":4355},{"style":265},[4356],{"type":66,"value":732},{"type":60,"tag":196,"props":4358,"children":4359},{"style":276},[4360],{"type":66,"value":737},{"type":60,"tag":196,"props":4362,"children":4363},{"style":265},[4364],{"type":66,"value":742},{"type":60,"tag":196,"props":4366,"children":4367},{"style":724},[4368],{"type":66,"value":747},{"type":60,"tag":196,"props":4370,"children":4371},{"style":265},[4372],{"type":66,"value":752},{"type":60,"tag":196,"props":4374,"children":4375},{"style":219},[4376],{"type":66,"value":757},{"type":60,"tag":196,"props":4378,"children":4379},{"style":265},[4380],{"type":66,"value":762},{"type":60,"tag":196,"props":4382,"children":4383},{"class":198,"line":209},[4384],{"type":60,"tag":196,"props":4385,"children":4386},{"emptyLinePlaceholder":234},[4387],{"type":66,"value":237},{"type":60,"tag":196,"props":4389,"children":4390},{"class":198,"line":230},[4391],{"type":60,"tag":196,"props":4392,"children":4393},{"style":203},[4394],{"type":66,"value":4395},"\u002F\u002F Generate a component from a design spec\n",{"type":60,"tag":196,"props":4397,"children":4398},{"class":198,"line":240},[4399,4403,4407,4411,4415,4419,4423,4427,4431,4435,4439],{"type":60,"tag":196,"props":4400,"children":4401},{"style":827},[4402],{"type":66,"value":830},{"type":60,"tag":196,"props":4404,"children":4405},{"style":276},[4406],{"type":66,"value":980},{"type":60,"tag":196,"props":4408,"children":4409},{"style":265},[4410],{"type":66,"value":840},{"type":60,"tag":196,"props":4412,"children":4413},{"style":724},[4414],{"type":66,"value":989},{"type":60,"tag":196,"props":4416,"children":4417},{"style":276},[4418],{"type":66,"value":737},{"type":60,"tag":196,"props":4420,"children":4421},{"style":265},[4422],{"type":66,"value":876},{"type":60,"tag":196,"props":4424,"children":4425},{"style":276},[4426],{"type":66,"value":1002},{"type":60,"tag":196,"props":4428,"children":4429},{"style":265},[4430],{"type":66,"value":876},{"type":60,"tag":196,"props":4432,"children":4433},{"style":843},[4434],{"type":66,"value":1011},{"type":60,"tag":196,"props":4436,"children":4437},{"style":276},[4438],{"type":66,"value":850},{"type":60,"tag":196,"props":4440,"children":4441},{"style":265},[4442],{"type":66,"value":1020},{"type":60,"tag":196,"props":4444,"children":4445},{"class":198,"line":36},[4446,4450,4454,4459],{"type":60,"tag":196,"props":4447,"children":4448},{"style":858},[4449],{"type":66,"value":1028},{"type":60,"tag":196,"props":4451,"children":4452},{"style":265},[4453],{"type":66,"value":866},{"type":60,"tag":196,"props":4455,"children":4456},{"style":265},[4457],{"type":66,"value":4458}," `",{"type":60,"tag":196,"props":4460,"children":4461},{"style":219},[4462],{"type":66,"value":4463},"Create a pricing table component with these tiers:\n",{"type":60,"tag":196,"props":4465,"children":4466},{"class":198,"line":55},[4467],{"type":60,"tag":196,"props":4468,"children":4469},{"style":219},[4470],{"type":66,"value":4471}," - Free: 0\u002Fmo, 1 project, community support\n",{"type":60,"tag":196,"props":4473,"children":4474},{"class":198,"line":294},[4475],{"type":60,"tag":196,"props":4476,"children":4477},{"style":219},[4478],{"type":66,"value":4479}," - Pro: $20\u002Fmo, unlimited projects, priority support\n",{"type":60,"tag":196,"props":4481,"children":4482},{"class":198,"line":303},[4483,4488,4492],{"type":60,"tag":196,"props":4484,"children":4485},{"style":219},[4486],{"type":66,"value":4487}," - Enterprise: Custom, SLA, dedicated support",{"type":60,"tag":196,"props":4489,"children":4490},{"style":265},[4491],{"type":66,"value":1124},{"type":60,"tag":196,"props":4493,"children":4494},{"style":265},[4495],{"type":66,"value":1051},{"type":60,"tag":196,"props":4497,"children":4498},{"class":198,"line":325},[4499,4503],{"type":60,"tag":196,"props":4500,"children":4501},{"style":265},[4502],{"type":66,"value":895},{"type":60,"tag":196,"props":4504,"children":4505},{"style":276},[4506],{"type":66,"value":900},{"type":60,"tag":196,"props":4508,"children":4509},{"class":198,"line":578},[4510],{"type":60,"tag":196,"props":4511,"children":4512},{"emptyLinePlaceholder":234},[4513],{"type":66,"value":237},{"type":60,"tag":196,"props":4515,"children":4516},{"class":198,"line":586},[4517],{"type":60,"tag":196,"props":4518,"children":4519},{"style":203},[4520],{"type":66,"value":4521},"\u002F\u002F Wait for generation, then download\n",{"type":60,"tag":196,"props":4523,"children":4524},{"class":198,"line":1509},[4525,4529,4533,4537,4541,4545,4549,4553,4557,4561,4565],{"type":60,"tag":196,"props":4526,"children":4527},{"style":827},[4528],{"type":66,"value":830},{"type":60,"tag":196,"props":4530,"children":4531},{"style":276},[4532],{"type":66,"value":1901},{"type":60,"tag":196,"props":4534,"children":4535},{"style":265},[4536],{"type":66,"value":840},{"type":60,"tag":196,"props":4538,"children":4539},{"style":724},[4540],{"type":66,"value":989},{"type":60,"tag":196,"props":4542,"children":4543},{"style":276},[4544],{"type":66,"value":737},{"type":60,"tag":196,"props":4546,"children":4547},{"style":265},[4548],{"type":66,"value":876},{"type":60,"tag":196,"props":4550,"children":4551},{"style":276},[4552],{"type":66,"value":1002},{"type":60,"tag":196,"props":4554,"children":4555},{"style":265},[4556],{"type":66,"value":876},{"type":60,"tag":196,"props":4558,"children":4559},{"style":843},[4560],{"type":66,"value":1930},{"type":60,"tag":196,"props":4562,"children":4563},{"style":276},[4564],{"type":66,"value":850},{"type":60,"tag":196,"props":4566,"children":4567},{"style":265},[4568],{"type":66,"value":1020},{"type":60,"tag":196,"props":4570,"children":4571},{"class":198,"line":1517},[4572,4576,4580,4584,4588,4592],{"type":60,"tag":196,"props":4573,"children":4574},{"style":858},[4575],{"type":66,"value":1570},{"type":60,"tag":196,"props":4577,"children":4578},{"style":265},[4579],{"type":66,"value":866},{"type":60,"tag":196,"props":4581,"children":4582},{"style":276},[4583],{"type":66,"value":1579},{"type":60,"tag":196,"props":4585,"children":4586},{"style":265},[4587],{"type":66,"value":876},{"type":60,"tag":196,"props":4589,"children":4590},{"style":276},[4591],{"type":66,"value":1491},{"type":60,"tag":196,"props":4593,"children":4594},{"style":265},[4595],{"type":66,"value":1051},{"type":60,"tag":196,"props":4597,"children":4598},{"class":198,"line":1526},[4599,4603,4607,4611,4615,4619,4623,4627],{"type":60,"tag":196,"props":4600,"children":4601},{"style":858},[4602],{"type":66,"value":1764},{"type":60,"tag":196,"props":4604,"children":4605},{"style":265},[4606],{"type":66,"value":866},{"type":60,"tag":196,"props":4608,"children":4609},{"style":276},[4610],{"type":66,"value":1579},{"type":60,"tag":196,"props":4612,"children":4613},{"style":265},[4614],{"type":66,"value":876},{"type":60,"tag":196,"props":4616,"children":4617},{"style":276},[4618],{"type":66,"value":1781},{"type":60,"tag":196,"props":4620,"children":4621},{"style":265},[4622],{"type":66,"value":876},{"type":60,"tag":196,"props":4624,"children":4625},{"style":276},[4626],{"type":66,"value":1491},{"type":60,"tag":196,"props":4628,"children":4629},{"style":265},[4630],{"type":66,"value":1051},{"type":60,"tag":196,"props":4632,"children":4633},{"class":198,"line":1564},[4634,4638],{"type":60,"tag":196,"props":4635,"children":4636},{"style":265},[4637],{"type":66,"value":895},{"type":60,"tag":196,"props":4639,"children":4640},{"style":276},[4641],{"type":66,"value":900},{"type":60,"tag":165,"props":4643,"children":4645},{"id":4644},"pattern-4-v0-as-ai-agent-tool",[4646],{"type":66,"value":4647},"Pattern 4: v0 as AI Agent Tool",{"type":60,"tag":69,"props":4649,"children":4650},{},[4651],{"type":66,"value":4652},"Best for autonomous agents that need to generate and deploy UI.",{"type":60,"tag":185,"props":4654,"children":4656},{"className":712,"code":4655,"language":714,"meta":190,"style":190},"import { Agent } from 'ai'\nimport { v0Tools } from '@v0-sdk\u002Fai-tools'\n\nconst agent = new Agent({\n model: openai('gpt-5.2'),\n tools: {\n ...v0Tools({ apiKey: process.env.V0_API_KEY }),\n \u002F\u002F ... other tools\n },\n system: 'You are a full-stack developer. Use v0 to generate UI components.',\n})\n\nconst { text } = await agent.generateText({\n prompt: 'Create a dashboard for our analytics data and deploy it',\n})\n",[4657],{"type":60,"tag":172,"props":4658,"children":4659},{"__ignoreMap":190},[4660,4696,4731,4738,4771,4810,4825,4885,4893,4901,4929,4940,4947,4996,5024],{"type":60,"tag":196,"props":4661,"children":4662},{"class":198,"line":199},[4663,4667,4671,4676,4680,4684,4688,4692],{"type":60,"tag":196,"props":4664,"children":4665},{"style":724},[4666],{"type":66,"value":727},{"type":60,"tag":196,"props":4668,"children":4669},{"style":265},[4670],{"type":66,"value":732},{"type":60,"tag":196,"props":4672,"children":4673},{"style":276},[4674],{"type":66,"value":4675}," Agent",{"type":60,"tag":196,"props":4677,"children":4678},{"style":265},[4679],{"type":66,"value":742},{"type":60,"tag":196,"props":4681,"children":4682},{"style":724},[4683],{"type":66,"value":747},{"type":60,"tag":196,"props":4685,"children":4686},{"style":265},[4687],{"type":66,"value":752},{"type":60,"tag":196,"props":4689,"children":4690},{"style":219},[4691],{"type":66,"value":2753},{"type":60,"tag":196,"props":4693,"children":4694},{"style":265},[4695],{"type":66,"value":762},{"type":60,"tag":196,"props":4697,"children":4698},{"class":198,"line":209},[4699,4703,4707,4711,4715,4719,4723,4727],{"type":60,"tag":196,"props":4700,"children":4701},{"style":724},[4702],{"type":66,"value":727},{"type":60,"tag":196,"props":4704,"children":4705},{"style":265},[4706],{"type":66,"value":732},{"type":60,"tag":196,"props":4708,"children":4709},{"style":276},[4710],{"type":66,"value":3020},{"type":60,"tag":196,"props":4712,"children":4713},{"style":265},[4714],{"type":66,"value":742},{"type":60,"tag":196,"props":4716,"children":4717},{"style":724},[4718],{"type":66,"value":747},{"type":60,"tag":196,"props":4720,"children":4721},{"style":265},[4722],{"type":66,"value":752},{"type":60,"tag":196,"props":4724,"children":4725},{"style":219},[4726],{"type":66,"value":3037},{"type":60,"tag":196,"props":4728,"children":4729},{"style":265},[4730],{"type":66,"value":762},{"type":60,"tag":196,"props":4732,"children":4733},{"class":198,"line":230},[4734],{"type":60,"tag":196,"props":4735,"children":4736},{"emptyLinePlaceholder":234},[4737],{"type":66,"value":237},{"type":60,"tag":196,"props":4739,"children":4740},{"class":198,"line":240},[4741,4745,4750,4754,4759,4763,4767],{"type":60,"tag":196,"props":4742,"children":4743},{"style":827},[4744],{"type":66,"value":830},{"type":60,"tag":196,"props":4746,"children":4747},{"style":276},[4748],{"type":66,"value":4749}," agent ",{"type":60,"tag":196,"props":4751,"children":4752},{"style":265},[4753],{"type":66,"value":840},{"type":60,"tag":196,"props":4755,"children":4756},{"style":265},[4757],{"type":66,"value":4758}," new",{"type":60,"tag":196,"props":4760,"children":4761},{"style":843},[4762],{"type":66,"value":4675},{"type":60,"tag":196,"props":4764,"children":4765},{"style":276},[4766],{"type":66,"value":850},{"type":60,"tag":196,"props":4768,"children":4769},{"style":265},[4770],{"type":66,"value":1020},{"type":60,"tag":196,"props":4772,"children":4773},{"class":198,"line":36},[4774,4778,4782,4786,4790,4794,4798,4802,4806],{"type":60,"tag":196,"props":4775,"children":4776},{"style":858},[4777],{"type":66,"value":2813},{"type":60,"tag":196,"props":4779,"children":4780},{"style":265},[4781],{"type":66,"value":866},{"type":60,"tag":196,"props":4783,"children":4784},{"style":843},[4785],{"type":66,"value":2983},{"type":60,"tag":196,"props":4787,"children":4788},{"style":276},[4789],{"type":66,"value":850},{"type":60,"tag":196,"props":4791,"children":4792},{"style":265},[4793],{"type":66,"value":1046},{"type":60,"tag":196,"props":4795,"children":4796},{"style":219},[4797],{"type":66,"value":3108},{"type":60,"tag":196,"props":4799,"children":4800},{"style":265},[4801],{"type":66,"value":1046},{"type":60,"tag":196,"props":4803,"children":4804},{"style":276},[4805],{"type":66,"value":2842},{"type":60,"tag":196,"props":4807,"children":4808},{"style":265},[4809],{"type":66,"value":1051},{"type":60,"tag":196,"props":4811,"children":4812},{"class":198,"line":55},[4813,4817,4821],{"type":60,"tag":196,"props":4814,"children":4815},{"style":858},[4816],{"type":66,"value":3156},{"type":60,"tag":196,"props":4818,"children":4819},{"style":265},[4820],{"type":66,"value":866},{"type":60,"tag":196,"props":4822,"children":4823},{"style":265},[4824],{"type":66,"value":3489},{"type":60,"tag":196,"props":4826,"children":4827},{"class":198,"line":294},[4828,4833,4837,4841,4845,4849,4853,4857,4861,4865,4869,4873,4877,4881],{"type":60,"tag":196,"props":4829,"children":4830},{"style":265},[4831],{"type":66,"value":4832}," ...",{"type":60,"tag":196,"props":4834,"children":4835},{"style":843},[4836],{"type":66,"value":3301},{"type":60,"tag":196,"props":4838,"children":4839},{"style":276},[4840],{"type":66,"value":850},{"type":60,"tag":196,"props":4842,"children":4843},{"style":265},[4844],{"type":66,"value":855},{"type":60,"tag":196,"props":4846,"children":4847},{"style":858},[4848],{"type":66,"value":861},{"type":60,"tag":196,"props":4850,"children":4851},{"style":265},[4852],{"type":66,"value":866},{"type":60,"tag":196,"props":4854,"children":4855},{"style":276},[4856],{"type":66,"value":871},{"type":60,"tag":196,"props":4858,"children":4859},{"style":265},[4860],{"type":66,"value":876},{"type":60,"tag":196,"props":4862,"children":4863},{"style":276},[4864],{"type":66,"value":881},{"type":60,"tag":196,"props":4866,"children":4867},{"style":265},[4868],{"type":66,"value":876},{"type":60,"tag":196,"props":4870,"children":4871},{"style":276},[4872],{"type":66,"value":3201},{"type":60,"tag":196,"props":4874,"children":4875},{"style":265},[4876],{"type":66,"value":895},{"type":60,"tag":196,"props":4878,"children":4879},{"style":276},[4880],{"type":66,"value":2842},{"type":60,"tag":196,"props":4882,"children":4883},{"style":265},[4884],{"type":66,"value":1051},{"type":60,"tag":196,"props":4886,"children":4887},{"class":198,"line":303},[4888],{"type":60,"tag":196,"props":4889,"children":4890},{"style":203},[4891],{"type":66,"value":4892}," \u002F\u002F ... other tools\n",{"type":60,"tag":196,"props":4894,"children":4895},{"class":198,"line":325},[4896],{"type":60,"tag":196,"props":4897,"children":4898},{"style":265},[4899],{"type":66,"value":4900}," },\n",{"type":60,"tag":196,"props":4902,"children":4903},{"class":198,"line":578},[4904,4908,4912,4916,4921,4925],{"type":60,"tag":196,"props":4905,"children":4906},{"style":858},[4907],{"type":66,"value":1059},{"type":60,"tag":196,"props":4909,"children":4910},{"style":265},[4911],{"type":66,"value":866},{"type":60,"tag":196,"props":4913,"children":4914},{"style":265},[4915],{"type":66,"value":752},{"type":60,"tag":196,"props":4917,"children":4918},{"style":219},[4919],{"type":66,"value":4920},"You are a full-stack developer. Use v0 to generate UI components.",{"type":60,"tag":196,"props":4922,"children":4923},{"style":265},[4924],{"type":66,"value":1046},{"type":60,"tag":196,"props":4926,"children":4927},{"style":265},[4928],{"type":66,"value":1051},{"type":60,"tag":196,"props":4930,"children":4931},{"class":198,"line":586},[4932,4936],{"type":60,"tag":196,"props":4933,"children":4934},{"style":265},[4935],{"type":66,"value":895},{"type":60,"tag":196,"props":4937,"children":4938},{"style":276},[4939],{"type":66,"value":900},{"type":60,"tag":196,"props":4941,"children":4942},{"class":198,"line":1509},[4943],{"type":60,"tag":196,"props":4944,"children":4945},{"emptyLinePlaceholder":234},[4946],{"type":66,"value":237},{"type":60,"tag":196,"props":4948,"children":4949},{"class":198,"line":1517},[4950,4954,4958,4962,4966,4970,4974,4979,4983,4988,4992],{"type":60,"tag":196,"props":4951,"children":4952},{"style":827},[4953],{"type":66,"value":830},{"type":60,"tag":196,"props":4955,"children":4956},{"style":265},[4957],{"type":66,"value":732},{"type":60,"tag":196,"props":4959,"children":4960},{"style":276},[4961],{"type":66,"value":2780},{"type":60,"tag":196,"props":4963,"children":4964},{"style":265},[4965],{"type":66,"value":895},{"type":60,"tag":196,"props":4967,"children":4968},{"style":265},[4969],{"type":66,"value":2789},{"type":60,"tag":196,"props":4971,"children":4972},{"style":724},[4973],{"type":66,"value":989},{"type":60,"tag":196,"props":4975,"children":4976},{"style":276},[4977],{"type":66,"value":4978}," agent",{"type":60,"tag":196,"props":4980,"children":4981},{"style":265},[4982],{"type":66,"value":876},{"type":60,"tag":196,"props":4984,"children":4985},{"style":843},[4986],{"type":66,"value":4987},"generateText",{"type":60,"tag":196,"props":4989,"children":4990},{"style":276},[4991],{"type":66,"value":850},{"type":60,"tag":196,"props":4993,"children":4994},{"style":265},[4995],{"type":66,"value":1020},{"type":60,"tag":196,"props":4997,"children":4998},{"class":198,"line":1526},[4999,5003,5007,5011,5016,5020],{"type":60,"tag":196,"props":5000,"children":5001},{"style":858},[5002],{"type":66,"value":2854},{"type":60,"tag":196,"props":5004,"children":5005},{"style":265},[5006],{"type":66,"value":866},{"type":60,"tag":196,"props":5008,"children":5009},{"style":265},[5010],{"type":66,"value":752},{"type":60,"tag":196,"props":5012,"children":5013},{"style":219},[5014],{"type":66,"value":5015},"Create a dashboard for our analytics data and deploy it",{"type":60,"tag":196,"props":5017,"children":5018},{"style":265},[5019],{"type":66,"value":1046},{"type":60,"tag":196,"props":5021,"children":5022},{"style":265},[5023],{"type":66,"value":1051},{"type":60,"tag":196,"props":5025,"children":5026},{"class":198,"line":1564},[5027,5031],{"type":60,"tag":196,"props":5028,"children":5029},{"style":265},[5030],{"type":66,"value":895},{"type":60,"tag":196,"props":5032,"children":5033},{"style":276},[5034],{"type":66,"value":900},{"type":60,"tag":75,"props":5036,"children":5038},{"id":5037},"built-in-integrations",[5039],{"type":66,"value":5040},"Built-in Integrations",{"type":60,"tag":69,"props":5042,"children":5043},{},[5044],{"type":66,"value":5045},"v0 has native support for these services in its sandbox:",{"type":60,"tag":93,"props":5047,"children":5048},{},[5049,5059,5069,5079],{"type":60,"tag":97,"props":5050,"children":5051},{},[5052,5057],{"type":60,"tag":101,"props":5053,"children":5054},{},[5055],{"type":66,"value":5056},"Databases",{"type":66,"value":5058},": Neon (PostgreSQL), Supabase, Upstash Redis, Vercel Blob",{"type":60,"tag":97,"props":5060,"children":5061},{},[5062,5067],{"type":60,"tag":101,"props":5063,"children":5064},{},[5065],{"type":66,"value":5066},"AI",{"type":66,"value":5068},": OpenAI, Anthropic, Groq, Grok, fal, Deep Infra (via Vercel AI Gateway)",{"type":60,"tag":97,"props":5070,"children":5071},{},[5072,5077],{"type":60,"tag":101,"props":5073,"children":5074},{},[5075],{"type":66,"value":5076},"Payments",{"type":66,"value":5078},": Stripe",{"type":60,"tag":97,"props":5080,"children":5081},{},[5082,5087],{"type":60,"tag":101,"props":5083,"children":5084},{},[5085],{"type":66,"value":5086},"External APIs",{"type":66,"value":5088},": Twilio, and others via the \"Vars\" panel",{"type":60,"tag":75,"props":5090,"children":5092},{"id":5091},"limitations",[5093],{"type":66,"value":5094},"Limitations",{"type":60,"tag":93,"props":5096,"children":5097},{},[5098,5103,5108,5113,5118],{"type":60,"tag":97,"props":5099,"children":5100},{},[5101],{"type":66,"value":5102},"Best for UI components and layouts (~20% of a full application)",{"type":60,"tag":97,"props":5104,"children":5105},{},[5106],{"type":66,"value":5107},"Backend, database, auth, and AI integration require separate implementation or explicit prompting",{"type":60,"tag":97,"props":5109,"children":5110},{},[5111],{"type":66,"value":5112},"Generated code may need manual fixes for complex business logic",{"type":60,"tag":97,"props":5114,"children":5115},{},[5116],{"type":66,"value":5117},"Enterprise-level scalability needs additional architecture review",{"type":60,"tag":97,"props":5119,"children":5120},{},[5121],{"type":66,"value":5122},"shadcn\u002Fui is the primary component library; other libraries require explicit prompting",{"type":60,"tag":75,"props":5124,"children":5126},{"id":5125},"official-documentation",[5127],{"type":66,"value":5128},"Official Documentation",{"type":60,"tag":93,"props":5130,"children":5131},{},[5132,5142,5152,5162,5172,5182,5192,5201],{"type":60,"tag":97,"props":5133,"children":5134},{},[5135],{"type":60,"tag":907,"props":5136,"children":5139},{"href":5137,"rel":5138},"https:\u002F\u002Fv0.app",[911],[5140],{"type":66,"value":5141},"v0 App",{"type":60,"tag":97,"props":5143,"children":5144},{},[5145],{"type":60,"tag":907,"props":5146,"children":5149},{"href":5147,"rel":5148},"https:\u002F\u002Fv0.app\u002Fdocs",[911],[5150],{"type":66,"value":5151},"v0 Documentation",{"type":60,"tag":97,"props":5153,"children":5154},{},[5155],{"type":60,"tag":907,"props":5156,"children":5159},{"href":5157,"rel":5158},"https:\u002F\u002Fv0.app\u002Fdocs\u002Fapi\u002Fplatform\u002Foverview",[911],[5160],{"type":66,"value":5161},"v0 API Overview",{"type":60,"tag":97,"props":5163,"children":5164},{},[5165],{"type":60,"tag":907,"props":5166,"children":5169},{"href":5167,"rel":5168},"https:\u002F\u002Fv0.app\u002Fdocs\u002Fapi\u002Fplatform\u002Fpackages\u002Fai-tools",[911],[5170],{"type":66,"value":5171},"v0 AI Tools",{"type":60,"tag":97,"props":5173,"children":5174},{},[5175],{"type":60,"tag":907,"props":5176,"children":5179},{"href":5177,"rel":5178},"https:\u002F\u002Fv0.app\u002Fdocs\u002Fapi\u002Fplatform\u002Fadapters\u002Fmcp-server",[911],[5180],{"type":66,"value":5181},"v0 MCP Server",{"type":60,"tag":97,"props":5183,"children":5184},{},[5185],{"type":60,"tag":907,"props":5186,"children":5189},{"href":5187,"rel":5188},"https:\u002F\u002Fv0.app\u002Fdocs\u002Fgithub",[911],[5190],{"type":66,"value":5191},"v0 GitHub Integration",{"type":60,"tag":97,"props":5193,"children":5194},{},[5195],{"type":60,"tag":907,"props":5196,"children":5198},{"href":909,"rel":5197},[911],[5199],{"type":66,"value":5200},"API Keys",{"type":60,"tag":97,"props":5202,"children":5203},{},[5204],{"type":60,"tag":907,"props":5205,"children":5208},{"href":5206,"rel":5207},"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fv0-sdk",[911],[5209],{"type":66,"value":5210},"GitHub: v0 SDK",{"type":60,"tag":5212,"props":5213,"children":5214},"style",{},[5215],{"type":66,"value":5216},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":5218,"total":5334},[5219,5238,5254,5266,5286,5302,5322],{"slug":5220,"name":5220,"fn":5221,"description":5222,"org":5223,"tags":5224,"stars":22,"repoUrl":23,"updatedAt":5237},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5225,5228,5231,5234],{"name":5226,"slug":5227,"type":15},"Accessibility","accessibility",{"name":5229,"slug":5230,"type":15},"Charts","charts",{"name":5232,"slug":5233,"type":15},"Data Visualization","data-visualization",{"name":5235,"slug":5236,"type":15},"Design","design","2026-06-30T19:00:57.102",{"slug":5239,"name":5239,"fn":5240,"description":5241,"org":5242,"tags":5243,"stars":22,"repoUrl":23,"updatedAt":5253},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5244,5247,5250],{"name":5245,"slug":5246,"type":15},"Agents","agents",{"name":5248,"slug":5249,"type":15},"Browser Automation","browser-automation",{"name":5251,"slug":5252,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":5255,"name":5255,"fn":5256,"description":5257,"org":5258,"tags":5259,"stars":22,"repoUrl":23,"updatedAt":5265},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5260,5261,5264],{"name":5248,"slug":5249,"type":15},{"name":5262,"slug":5263,"type":15},"Local Development","local-development",{"name":5251,"slug":5252,"type":15},"2026-04-06T18:41:17.526867",{"slug":5267,"name":5267,"fn":5268,"description":5269,"org":5270,"tags":5271,"stars":22,"repoUrl":23,"updatedAt":5285},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5272,5273,5276,5279,5282],{"name":5245,"slug":5246,"type":15},{"name":5274,"slug":5275,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":5277,"slug":5278,"type":15},"SDK","sdk",{"name":5280,"slug":5281,"type":15},"Serverless","serverless",{"name":5283,"slug":5284,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":5287,"name":5287,"fn":5288,"description":5289,"org":5290,"tags":5291,"stars":22,"repoUrl":23,"updatedAt":5301},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5292,5293,5296,5299,5300],{"name":20,"slug":21,"type":15},{"name":5294,"slug":5295,"type":15},"React","react",{"name":5297,"slug":5298,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},"2026-04-06T18:40:59.619419",{"slug":5303,"name":5303,"fn":5304,"description":5305,"org":5306,"tags":5307,"stars":22,"repoUrl":23,"updatedAt":5321},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5308,5311,5314,5317,5320],{"name":5309,"slug":5310,"type":15},"AI Infrastructure","ai-infrastructure",{"name":5312,"slug":5313,"type":15},"Cost Optimization","cost-optimization",{"name":5315,"slug":5316,"type":15},"LLM","llm",{"name":5318,"slug":5319,"type":15},"Performance","performance",{"name":13,"slug":14,"type":15},"2026-04-06T18:40:44.377464",{"slug":5323,"name":5323,"fn":5324,"description":5325,"org":5326,"tags":5327,"stars":22,"repoUrl":23,"updatedAt":5333},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5328,5329,5332],{"name":5312,"slug":5313,"type":15},{"name":5330,"slug":5331,"type":15},"Database","database",{"name":5315,"slug":5316,"type":15},"2026-04-06T18:41:08.513425",600,{"items":5336,"total":5532},[5337,5358,5381,5398,5414,5430,5449,5461,5475,5489,5501,5516],{"slug":5338,"name":5338,"fn":5339,"description":5340,"org":5341,"tags":5342,"stars":5355,"repoUrl":5356,"updatedAt":5357},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5343,5346,5349,5352],{"name":5344,"slug":5345,"type":15},"Documents","documents",{"name":5347,"slug":5348,"type":15},"Healthcare","healthcare",{"name":5350,"slug":5351,"type":15},"Insurance","insurance",{"name":5353,"slug":5354,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":5359,"name":5359,"fn":5360,"description":5361,"org":5362,"tags":5363,"stars":5378,"repoUrl":5379,"updatedAt":5380},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5364,5367,5369,5372,5375],{"name":5365,"slug":5366,"type":15},".NET","dotnet",{"name":5368,"slug":5359,"type":15},"ASP.NET Core",{"name":5370,"slug":5371,"type":15},"Blazor","blazor",{"name":5373,"slug":5374,"type":15},"C#","csharp",{"name":5376,"slug":5377,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":5382,"name":5382,"fn":5383,"description":5384,"org":5385,"tags":5386,"stars":5378,"repoUrl":5379,"updatedAt":5397},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5387,5390,5393,5396],{"name":5388,"slug":5389,"type":15},"Apps SDK","apps-sdk",{"name":5391,"slug":5392,"type":15},"ChatGPT","chatgpt",{"name":5394,"slug":5395,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":5399,"name":5399,"fn":5400,"description":5401,"org":5402,"tags":5403,"stars":5378,"repoUrl":5379,"updatedAt":5413},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5404,5407,5410],{"name":5405,"slug":5406,"type":15},"API Development","api-development",{"name":5408,"slug":5409,"type":15},"CLI","cli",{"name":5411,"slug":5412,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":5415,"name":5415,"fn":5416,"description":5417,"org":5418,"tags":5419,"stars":5378,"repoUrl":5379,"updatedAt":5429},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5420,5423,5426,5427],{"name":5421,"slug":5422,"type":15},"Cloudflare","cloudflare",{"name":5424,"slug":5425,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":5274,"slug":5275,"type":15},{"name":5428,"slug":1851,"type":15},"Deployment","2026-04-12T05:07:14.275118",{"slug":5431,"name":5431,"fn":5432,"description":5433,"org":5434,"tags":5435,"stars":5378,"repoUrl":5379,"updatedAt":5448},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5436,5439,5442,5445],{"name":5437,"slug":5438,"type":15},"Productivity","productivity",{"name":5440,"slug":5441,"type":15},"Project Management","project-management",{"name":5443,"slug":5444,"type":15},"Strategy","strategy",{"name":5446,"slug":5447,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":5450,"name":5450,"fn":5451,"description":5452,"org":5453,"tags":5454,"stars":5378,"repoUrl":5379,"updatedAt":5460},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5455,5456,5458,5459],{"name":5235,"slug":5236,"type":15},{"name":5457,"slug":5450,"type":15},"Figma",{"name":20,"slug":21,"type":15},{"name":5394,"slug":5395,"type":15},"2026-04-12T05:06:47.939943",{"slug":5462,"name":5462,"fn":5463,"description":5464,"org":5465,"tags":5466,"stars":5378,"repoUrl":5379,"updatedAt":5474},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5467,5468,5471,5472,5473],{"name":5235,"slug":5236,"type":15},{"name":5469,"slug":5470,"type":15},"Design System","design-system",{"name":5457,"slug":5450,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},"2026-05-10T05:59:52.971881",{"slug":5476,"name":5476,"fn":5477,"description":5478,"org":5479,"tags":5480,"stars":5378,"repoUrl":5379,"updatedAt":5488},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5481,5482,5483,5486,5487],{"name":5235,"slug":5236,"type":15},{"name":5469,"slug":5470,"type":15},{"name":5484,"slug":5485,"type":15},"Documentation","documentation",{"name":5457,"slug":5450,"type":15},{"name":20,"slug":21,"type":15},"2026-05-16T06:07:47.821474",{"slug":5490,"name":5490,"fn":5491,"description":5492,"org":5493,"tags":5494,"stars":5378,"repoUrl":5379,"updatedAt":5500},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5495,5496,5497,5498,5499],{"name":5235,"slug":5236,"type":15},{"name":5457,"slug":5450,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"name":5376,"slug":5377,"type":15},"2026-05-16T06:07:40.583615",{"slug":5502,"name":5502,"fn":5503,"description":5504,"org":5505,"tags":5506,"stars":5378,"repoUrl":5379,"updatedAt":5515},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5507,5510,5511,5514],{"name":5508,"slug":5509,"type":15},"Animation","animation",{"name":5411,"slug":5412,"type":15},{"name":5512,"slug":5513,"type":15},"Creative","creative",{"name":5235,"slug":5236,"type":15},"2026-05-02T05:31:48.48485",{"slug":5517,"name":5517,"fn":5518,"description":5519,"org":5520,"tags":5521,"stars":5378,"repoUrl":5379,"updatedAt":5531},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5522,5523,5524,5527,5530],{"name":5512,"slug":5513,"type":15},{"name":5235,"slug":5236,"type":15},{"name":5525,"slug":5526,"type":15},"Image Generation","image-generation",{"name":5528,"slug":5529,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]