{"id":24886,"plugin_id":"plugin_connector_690a90ec05c881918afb6a55dc9bbaa1","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T23:18:44.752Z","digest":"79553a4edcc81ad8edb5aa6cf27957995d0b451c12119a6e35e4c696f4dd6430","against":5405,"payload":{"name":"v0-dev","description":"v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK/API integration, or integrating v0 into development workflows with GitHub and Vercel deployment.","included_files":[{"relative_path":"agents/openai.yaml","size_in_bytes":88}],"skill_md_contents":"---\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/API integration, or integrating v0 into development workflows with GitHub and Vercel deployment.\nmetadata:\n  priority: 5\n  docs:\n    - \"https://v0.dev/docs\"\n    - \"https://vercel.com/docs/v0\"\n  sitemap: \"https://v0.dev/sitemap.xml\"\n  pathPatterns: []\n  importPatterns:\n    - '@v0/sdk'\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/Next.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/ui + 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 <component-id>\n\n# With pnpm\npnpm dlx v0@latest init\npnpm dlx v0@latest add <component-id>\n```\n\n`v0 init` installs required dependencies (`@radix-ui/react-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://v0.dev/chat/b/<project_id>?token=<token>\"\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// Automatically reads from process.env.V0_API_KEY\n\n// 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://v0.app/chat/settings/keys\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// Create a project\nconst project = await v0.projects.create({ name: 'My App' })\n\n// 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// 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// 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// 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://api.v0.dev/v1`\nAuth: `Authorization: Bearer <V0_API_KEY>`\n\n| Method | Endpoint | Description |\n|--------|----------|-------------|\n| `GET` | `/v1/projects` | List projects |\n| `POST` | `/v1/projects` | Create project |\n| `GET` | `/v1/projects/:id` | Get project |\n| `PUT` | `/v1/projects/:id` | Update project |\n| `DELETE` | `/v1/projects/:id` | Delete project |\n| `POST` | `/v1/chats` | Create/initialize chat |\n| `GET` | `/v1/chats/:id/messages` | Get messages |\n| `POST` | `/v1/chats/:id/messages` | Send message |\n| `POST` | `/v1/deployments` | Create deployment |\n\n### Rate Limits\n\n- API Requests: 10,000/day\n- Chat Messages: 1,000/day\n- Deployments: 100/day\n- File Uploads: 1 GB/day\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/vercel\n```\n\n```ts\nimport { vercel } from '@ai-sdk/vercel'\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/ai-tools ai\n```\n\n```ts\nimport { generateText } from 'ai'\nimport { openai } from '@ai-sdk/openai'\nimport { v0Tools } from '@v0-sdk/ai-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/ai-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://mcp.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/org 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/main-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/main-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/ui 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/ui primitives, use Geist fonts, default to dark mode, use zinc/neutral 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 <component-id>\n```\n\nThen import the component:\n\n```tsx\nimport { DataTable } from '@/components/data-table'\n\nexport default function DashboardPage() {\n  return <DataTable data={rows} columns={columns} />\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/CD pipelines or programmatic component generation.\n\n```ts\nimport { v0 } from 'v0-sdk'\n\n// 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/mo, 1 project, community support\n    - Pro: $20/mo, unlimited projects, priority support\n    - Enterprise: Custom, SLA, dedicated support`,\n})\n\n// 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/ai-tools'\n\nconst agent = new Agent({\n  model: openai('gpt-5.2'),\n  tools: {\n    ...v0Tools({ apiKey: process.env.V0_API_KEY }),\n    // ... 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/ui is the primary component library; other libraries require explicit prompting\n\n## Official Documentation\n\n- [v0 App](https://v0.app)\n- [v0 Documentation](https://v0.app/docs)\n- [v0 API Overview](https://v0.app/docs/api/platform/overview)\n- [v0 AI Tools](https://v0.app/docs/api/platform/packages/ai-tools)\n- [v0 MCP Server](https://v0.app/docs/api/platform/adapters/mcp-server)\n- [v0 GitHub Integration](https://v0.app/docs/github)\n- [API Keys](https://v0.app/chat/settings/keys)\n- [GitHub: v0 SDK](https://github.com/vercel/v0-sdk)\n"},"changes":[{"path":"/included_files","type":"changed","before":[],"after":[{"relative_path":"agents/openai.yaml","size_in_bytes":88}]}],"summary":"Fields changed: 1. /included_files.","summary_kind":"deterministic","summary_metadata":{}}