Geruyang/agent-skills-library

v0 by Vercel

您是 v0 (v0.app) 的专家——Vercel 的 AI 驱动开发代理，能够从自然语言描述生成生产就绪代码。

概述

v0 将提示转换为可用的 React/Next.js 代码。它全球拥有 600 万以上开发者和 8 万以上活跃团队。v0 作为通用编码代理运行，具备研究、规划、调试和迭代能力。

核心能力

• 自然语言 → 代码：描述您想要的，获取生产级 React 组件
• 视觉输入：上传 Figma 设计、截图或草图 → 代码
• 多框架：输出 React、Vue、Svelte、HTML、Markdown
• 代理智能：自主研究、规划、调试、迭代
• shadcn/ui + Tailwind CSS：默认样式系统
• 完整 IDE：Web UI 中内置 VS Code 编辑器、终端和 Git 面板

CLI 使用

组件集成 CLI (v0 包)

安装并将 v0 生成的组件拉取到您的 Next.js 项目中：

# 在现有 Next.js 项目中初始化 v0（一次性设置）
npx v0@latest init

# 通过 ID 添加特定 v0 生成的组件
npx v0@latest add <component-id>

# 使用 pnpm
pnpm dlx v0@latest init
pnpm dlx v0@latest add <component-id>

v0 init 会安装所需依赖（@radix-ui/react-icons、clsx、lucide-react）并创建 components.json 配置文件。

"添加到代码库"（Web UI → 本地）

从 v0.dev Web 界面，点击 "Add to Codebase" 按钮（终端图标）生成一个命令：

npx shadcn@latest add "https://v0.dev/chat/b/<project_id>?token=<token>"

在项目根目录运行此命令，将整个生成的项目拉取到您的代码库中。

典型工作流

# 1. 创建 Next.js 应用脚手架
npx create-next-app@latest --typescript --tailwind --eslint

# 2. 初始化 v0 集成
npx v0@latest init

# 3. 在 v0.dev 上生成组件，获取其 ID
# 4. 在本地添加组件
npx v0@latest add a1B2c3d4

# 5. 在您的应用中导入并使用

项目脚手架 CLI

# 从 v0 模板创建新项目
npx create-v0-sdk-app@latest my-v0-app

# 使用 v0 克隆模板（完整的 v0.dev 副本，包含认证、数据库、流式传输）
npx create-v0-sdk-app@latest --template v0-clone

v0 SDK（编程 API）

安装

npm install v0-sdk

身份验证

import { v0 } from 'v0-sdk'
// 自动从 process.env.V0_API_KEY 读取

// 或创建自定义客户端：
import { createClient } from 'v0-sdk'
const v0 = createClient({ apiKey: process.env.CUSTOM_V0_KEY })

在此处获取您的 API 密钥：https://v0.app/chat/settings/keys

创建聊天并生成代码

import { v0 } from 'v0-sdk'

const chat = await v0.chats.create({
  message: '创建一个带有暗色模式切换功能的响应式导航栏，使用 Tailwind',
  system: '您是一位 React 专家',
})

console.log(`在浏览器中打开：${chat.webUrl}`)

完整项目工作流（创建 → 聊天 → 部署）

import { v0 } from 'v0-sdk'

// 创建项目
const project = await v0.projects.create({ name: '我的应用' })

// 使用现有代码初始化聊天
const chat = await v0.chats.init({
  type: 'files',
  files: [{ name: 'App.tsx', content: existingCode }],
  projectId: project.id,
})

// 发送后续指令
await v0.chats.sendMessage({
  chatId: chat.id,
  message: '添加一个包含导航链接和用户头像的侧边栏',
})

// 准备就绪后部署
const deployment = await v0.deployments.create({
  projectId: project.id,
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

console.log(`已发布：${deployment.url}`)

下载生成的代码

// 下载特定聊天版本的文件
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

SDK 方法参考

聊天：

• v0.chats.create(params) — 创建新聊天
• v0.chats.sendMessage(params) — 向现有聊天发送消息
• v0.chats.getById(params) — 检索特定聊天
• v0.chats.update(params) — 更新聊天属性
• v0.chats.findVersions(params) — 列出聊天的所有版本
• v0.chats.getVersion(params) — 检索特定版本
• v0.chats.updateVersion(params) — 更新版本中的文件
• v0.chats.downloadVersion(params) — 下载某个版本的文件
• v0.chats.resume(params) — 恢复消息处理

项目：

• v0.projects.create(params) — 创建新项目
• v0.projects.getById(params) — 检索项目
• v0.projects.update(params) — 更新项目
• v0.projects.find() — 列出所有项目
• v0.projects.assign(params) — 将聊天分配给项目
• v0.projects.getByChatId(params) — 通过聊天 ID 获取项目
• v0.projects.createEnvVars(params) — 为项目创建环境变量

部署：

• v0.deployments.create(params) — 从聊天版本创建部署
• v0.deployments.getById(params) — 获取部署详情
• v0.deployments.delete(params) — 删除部署
• v0.deployments.find(params) — 列出部署
• v0.deployments.findLogs(params) — 获取部署日志

REST API

基础 URL：https://api.v0.dev/v1 身份验证：Authorization: Bearer <V0_API_KEY>

方法	端点	描述
GET	/v1/projects	列出项目
POST	/v1/projects	创建项目
GET	/v1/projects/:id	获取项目
PUT	/v1/projects/:id	更新项目
DELETE	/v1/projects/:id	删除项目
POST	/v1/chats	创建/初始化聊天
GET	/v1/chats/:id/messages	获取消息
POST	/v1/chats/:id/messages	发送消息
POST	/v1/deployments	创建部署

速率限制

• API 请求：10,000/天
• 聊天消息：1,000/天
• 部署：100/天
• 文件上传：1 GB/天
• 每账户项目数：100

可用模型

• v0-1.5-md — 日常任务和 UI 生成
• v0-1.5-lg — 高级推理
• v0-1.0-md — 旧版模型

AI SDK 集成

使用 v0 作为 AI 提供商

npm i @ai-sdk/vercel

import { vercel } from '@ai-sdk/vercel'
import { generateText } from 'ai'

const { text } = await generateText({
  model: vercel('v0-1.5-md'),
  prompt: '创建一个包含电子邮件和密码字段的登录表单',
})

v0 AI 工具（代理集成）

在 AI SDK 代理中将 v0 的全部功能用作工具：

npm install @v0-sdk/ai-tools ai

import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'
import { v0Tools } from '@v0-sdk/ai-tools'

const result = await generateText({
  model: openai('gpt-5.2'),
  prompt: '创建一个新的 React 仪表盘项目，包含图表和数据表格',
  tools: v0Tools({ apiKey: process.env.V0_API_KEY }),
})

如需更精细的控制，导入特定工具集：

import { createChatTools, createProjectTools, createDeploymentTools } from '@v0-sdk/ai-tools'

v0Tools 导出包含 20 多个工具：createChat、sendMessage、getChat、updateChat、deleteChat、favoriteChat、forkChat、listChats、createProject、getProject、updateProject、listProjects、assignChatToProject、createEnvironmentVariables、createDeployment、getDeployment、deleteDeployment、listDeployments、getDeploymentLogs。

MCP 服务器

将 v0 连接到任何兼容 MCP 的 IDE（Cursor、Codex 等）：

{
  "mcpServers": {
    "v0": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.v0.dev",
        "--header",
        "Authorization: Bearer ${V0_API_KEY}"
      ]
    }
  }
}

暴露 4 个工具：创建聊天、获取聊天信息、查找聊天、发送消息。

GitHub 集成

设置

1. 在 v0 聊天侧边栏 → Git 部分 → 点击 Connect
2. 选择 GitHub 账户/组织范围以及仓库名称
3. 点击 Create Repository — 将聊天链接到新的私有 GitHub 仓库
4. Vercel 部署会自动创建

分支行为（自动）

• 每次聊天都会创建一个新分支（例如，v0/main-e7bad8e4）
• 每次更改代码的提示都会自动提交并推送
• 您永远不会直接在 main 上工作

PR 工作流

1. 点击 Publish 按钮（连接 GitHub 后显示 PR 图标）
2. 选择 Open PR — 从 v0/main-abc123 创建 PR 到 main
3. 在 GitHub 模态框或 GitHub.com 上审查
4. 合并 PR → 永久关闭聊天
5. 每个 PR 都会获得预览部署；合并会触发生产部署

导入现有仓库

1. 在 v0 提示栏中 → 点击 + → "Import from GitHub"
2. v0 读取您现有的代码库和 Vercel 的环境变量
3. 通过提示进行迭代；所有更改将提交到新分支

提示工程技巧

1. 明确指定设计

弱：  "构建一个仪表盘"
强：  "构建一个支持工单仪表盘。移动优先，浅色主题，高对比度。
      颜色代码：紧急为红色，中等为黄色，低优先级为绿色。
      显示代理状态徽章。移动端最多 2 列。"

2. 指定您的技术栈

"构建一个实时聊天应用，使用：Next.js 16 和 App Router，
Socket.io 用于消息传递，Vercel Postgres 用于存储，
NextAuth.js 用于身份验证。"

3. 定义用户角色

"创建一个团队协作工具，包含管理员、经理和成员
角色，任务分配，进度跟踪和文件共享。"

4. 排队多个提示

您可以在 v0 生成时排队最多 10 个提示：

1. "创建基础布局和导航"
2. "添加 NextAuth 身份验证"
3. "连接数据库并添加 CRUD 操作"
4. "添加包含暗色模式切换的设置页面"

5. 指定错误和空状态

"添加全面的错误处理，包括网络故障、无效
输入和空状态，并提供有用的恢复建议。"

6. 使用视觉选择提高精度

在输入之前点击预览中的特定元素，可以精确地定位要更改的内容。消除多实例组件的歧义。

7. 使用设计模式与提示

• 提示：结构更改、添加功能、连接逻辑
• 设计模式（点击元素 → 调整）：颜色、间距、排版调整

8. v0 的默认输出栈

当未指定框架时，v0 会生成：

• 使用 JSX + TypeScript 的 React
• Tailwind CSS
• shadcn/ui 组件
• Lucide React 图标
• 完整、可直接复制粘贴的代码（从不提供部分存根）

v0 输出的设计规范化

当您同时指定结构和美学方向时，v0 最强大。对于 Vercel 栈项目，请包含以下指导：使用 shadcn/ui 原语、使用 Geist 字体、默认暗色模式、使用 zinc/neutral 令牌、避免通用卡片网格。导入 v0 代码后，进行规范化：用 shadcn 组件替换临时控件、将重复的卡片网格合并为更强的模式、使排版与 Geist 对齐、移除混合圆角和装饰效果。

集成模式

模式 1：生成组件，本地导入

最适合向现有应用添加单个 UI 组件。

npx v0@latest init
npx v0@latest add <component-id>

然后导入组件：

import { DataTable } from '@/components/data-table'

export default function DashboardPage() {
  return <DataTable data={rows} columns={columns} />
}

模式 2：GitHub 往返

最适合与非工程师一起迭代完整的功能分支。

1. 从 GitHub 将仓库导入 v0
2. 非工程师通过提示迭代
3. v0 将每次更改自动提交到功能分支
4. 工程师审查 PR，合并

模式 3：SDK 自动化

最适合 CI/CD 管道或程序化组件生成。

import { v0 } from 'v0-sdk'

// 根据设计规范生成组件
const chat = await v0.chats.create({
  message: `创建一个包含以下层级的价格表组件：
    - 免费版：0/月，1 个项目，社区支持
    - 专业版：$20/月，无限项目，优先支持
    - 企业版：自定义，SLA，专属支持`,
})

// 等待生成，然后下载
const files = await v0.chats.downloadVersion({
  chatId: chat.id,
  versionId: chat.latestVersion.id,
})

模式 4：v0 作为 AI 代理工具

最适合需要生成和部署 UI 的自主代理。

import { Agent } from 'ai'
import { v0Tools } from '@v0-sdk/ai-tools'

const agent = new Agent({
  model: openai('gpt-5.2'),
  tools: {
    ...v0Tools({ apiKey: process.env.V0_API_KEY }),
    // ... 其他工具
  },
  system: '您是全栈开发者。使用 v0 生成 UI 组件。',
})

const { text } = await agent.generateText({
  prompt: '为我们的分析数据创建一个仪表盘并部署',
})

内置集成

v0 在其沙箱中原生支持以下服务：

• 数据库：Neon (PostgreSQL)、Supabase、Upstash Redis、Vercel Blob
• AI：OpenAI、Anthropic、Groq、Grok、fal、Deep Infra（通过 Vercel AI 网关）
• 支付：Stripe
• 外部 API：Twilio 及其他（通过 "Vars" 面板）

限制

• 最适合 UI 组件和布局（约占完整应用的 20%）
• 后端、数据库、身份验证和 AI 集成需要单独实现或显式提示
• 生成的代码可能需要对复杂业务逻辑进行手动修复
• 企业级可扩展性需要额外的架构审查
• shadcn/ui 是主要组件库；其他库需要显式提示

官方文档

• v0 应用
• v0 文档
• v0 API 概览
• v0 SDK
• v0 MCP 服务器