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：在網頁 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 設定檔。

「新增至程式碼庫」（網頁 UI → 本地）

從 v0.dev 網頁介面，按一下「新增至程式碼庫」按鈕（終端機圖示）來產生一個指令：

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-clone 範本（具有認證、資料庫、串流的完整 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 部分 → 按一下 連線
2. 選擇 GitHub 帳號/組織範圍和儲存庫名稱
3. 按一下 建立儲存庫 — 將聊天連結到一個新的私人 GitHub 儲存庫
4. 系統會自動建立一個 Vercel 部署

分支行為（自動）

• 每次聊天都會建立一個新分支（例如 v0/main-e7bad8e4）
• 每個變更程式碼的提示詞都會自動提交並推送
• 您永遠不會直接在 main 分支上工作

PR 工作流程

1. 按一下 發佈 按鈕（已連接 GitHub 時會顯示 PR 圖示）
2. 選擇 開啟 PR — 從 v0/main-abc123 向 main 建立 PR
3. 在 GitHub 模態視窗或 GitHub.com 上檢閱
4. 合併 PR — 會永久關閉該聊天
5. 每個 PR 都會獲得一個預覽部署；合併後會觸發生產環境部署

匯入現有儲存庫

1. 在 v0 提示詞列中 → 按一下 + → 「從 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. 使用設計模式 vs 提示詞

• 提示詞：結構性變更、新增功能、連結邏輯
• 設計模式（按一下元素 → 調整）：顏色、間距、排版微調

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：作為 AI 代理工具的 v0

最適合需要生成和部署 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 Gateway）
• 支付：Stripe
• 外部 API：Twilio 等（透過「Vars」面板）

限制

• 最適合 UI 元件和佈局（約佔完整應用程式的 20%）
• 後端、資料庫、認證和 AI 整合需要單獨實作或明確提示
• 生成的程式碼可能需要手動修正複雜的業務邏輯
• 企業級可擴展性需要額外的架構審查
• shadcn/ui 是主要的元件庫；其他函式庫需要明確提示

官方文件

• v0 App
• v0 文件
• v0 API 概覽