8.0
热点
AI SCORE
工具产品2026-08-05 12:00
Vercel v0推出API：可将AI建站集成到自有产品
Vercel Blog#Vercel#v0#AI编程
Editor brief · 编辑速览
Vercel发布v0编程接口，支持通过API调用AI建站能力，可嵌入自有UI并流式返回预览结果。
今天我们正式发布全新 v0 API：可以对 v0 的应用构建 Agent 进行程序化、无头化访问。只需发送一条 prompt，v0 就会生成一个应用、在 Vercel Sandbox 中启动开发服务器，并返回一条可嵌入自身 UI 的预览链接。
每个对话都是一个独立的工作空间，对应一个应用，v0 可以在其中读取、编辑和运行文件。后续消息会从当前状态继续。v0 会验证 Sandbox 中运行的代码，因此能够实时发现并修复应用中的错误。
全新 API 现已开放公开测试。
从发送 prompt 创建对话、流式传输工作过程、到渲染实时预览，全部可以在你自己的界面中完成。首先，安装 v0 SDK。
pnpm add v0@latest
然后，创建一个对话。发送 prompt，v0 会生成你的应用。
1import { v0 } from 'v0' 2
3const result = await v0.chats.create({ 4 message: 'Build an issue triage app for a support team.', 5}) 6
7if (result.error) { 8 throw new Error(result.error.message) 9} 10
11const chatId = result.data.chat.id
创建一个对话并保存其 ID，后续每次请求都要用到。
向同一个对话发送后续消息以持续构建。每次都会从当前状态继续。
1const message = await v0.messages.send({ 2 chatId, 3 message: 'Add a priority filter and an assignee column.', 4}) 5
6if (message.error) { 7 throw new Error(message.error.message) 8}
发送后续消息；v0 会原地编辑现有应用。
<iframe src="/api/v0-preview/chat_abc123/" />
将 iframe 指向你的代理路由即可嵌入应用。
输入 prompt，输出一个运行中的应用。v0 在幕后管理 Sandbox、开发服务器和预览服务。准备就绪后，只需一次 API 调用即可部署到 Vercel。v0 负责管理整个流水线。
全新 API 让你可以将 v0 的应用构建能力集成到自己的产品或流水线中。这打开了以下用例：
白标应用构建器：你的用户描述一个应用，然后在自己的产品中获得一个可运行的应用回来。
白标应用构建器：Your users describe an app and get a working one back, inside your product.
自动化应用变更：从脚本、CI 任务或 webhook 触发 v0，生成新应用或更新现有应用。
自动化应用变更：Trigger v0 from a script, CI job, or webhook to generate a new app or update an existing one.
Agent 的构建工具：Agent 返回的是一个可运行的应用，而不是代码片段。
Agent 的构建工具：An agent hands back a working app instead of a code snippet.
下文我们将详细解析这个工作流程背后的 API 原语。
每个对话持有一个应用的状态，一个 repo 或 Vercel 项目可以包含多个对话。存储每个对话的 ID，后续发送消息时使用该 ID。对话元数据允许你按客户、工作空间、应用或你的产品已有的任何维度对对话进行分组。
了解更多信息，请阅读 messages 相关文档。
你的界面需要展示从发送请求到看到更新预览之间发生了什么。
每条消息都包含有序的部分：文本、思考过程、文件读取和编辑、搜索、Bash 命令、工具调用以及 Agent 行为。同一个对象可以驱动一行状态视图、变更文件视图或完整 Trace。
1const stream = await v0.messages.sendStream({ 2 chatId: 'chat_abc123', 3 message: 'Add authentication and explain the files you changed.', 4}) 5
6for await (const update of stream.stream) { 7 console.log(update.parts) 8 if (update.usage) { 9 console.log(update.usage) 10 } 11}
流式传输消息的工作过程；每次更新都是 parts 的完整快照。
使用量会在对话和消息响应中返回，这样你可以在工作完成后进行计费。
对话创建和消息发送均支持同步、异步和流式响应。当调用方需要完整响应时使用同步；使用异步将工作排队，之后通过 webhook 接收更新或轮询 v0 的响应；流式传输请求以在工作时实时渲染 v0 的工作过程。
1const message = 'Build an issue triage app for a support team.' 2
3// Wait for the completed response. 4const completed = await v0.chats.create({ message }) 5
6if (completed.error) { 7 throw new Error(completed.error.message) 8} 9
10// Queue work and use the returned IDs to retrieve the result later. 11const queued = await v0.chats.createAsync({ message }) 12
13if (queued.error) { 14 throw new Error(queued.error.message) 15} 16
17console.log(queued.data.chatId, queued.data.messageId) 18
19// Receive the agent's work as it happens. 20const stream = await v0.chats.createStream({ message })
三种方式创建对话：await、queue 或 stream 同一个 prompt。
你也可以从仓库、ZIP 归档或一组文件创建对话。
1const result = await v0.chats.createFromRepo({ 2 repo: { 3 url: 'https://github.com/acme/app', 4 branch: 'main', 5 }, 6 title: 'Acme app', 7 metadata: { 8 source: 'github', 9 }, 10}) 11
12if (result.error) { 13 throw new Error(result.error.message) 14} 15
16const chatId = result.data.chat.id 17console.log(chatId)
从现有仓库创建对话。
每个对话都有一个短期有效的预览 token。从服务端路由获取它，并将浏览器请求代理转发给它，这样你的 v0 API key 就不会暴露到浏览器。当预览就绪时，流量会转发到它；当 Sandbox 还在启动时，请求会回退到一个加载页面。将 iframe 指向你的代理路由并缓存预览详情直到其过期。
1import { fetchPreview, v0 } from 'v0' 2
3export async function proxyPreviewRequest( 4 request: Request, 5 chatId: string, 6 path: string[], 7) { 8 const result = await v0.chats.getPreview({ chatId }) 9 10 if (result.error) { 11 throw new Error(result.error.message) 12 } 13
14 return fetchPreview({ 15 request, 16 preview: result.data, 17 path, 18 fallbackUrl: `/api/v0-preview/${chatId}/loading`, 19 }) 20}
通过服务端路由代理预览请求。
在文档中阅读更多关于访问预览的内容。
为对话开启特定的 MCP 服务器，或使用默认配置。
Design Systems 2.0 将设计系统保存为一项技能。在请求中引入它，以加载其组件、token、设置和启动应用。
1const designSystem = { 2 type: 'memory', 3 scope: 'team', 4 skillName: 'geist-ui', 5} 6
7const result = await v0.chats.create({ 8 message: 'Build an admin console with filters and charts.', 9 skills: [ 10 designSystem, 11 ], 12})
创建对话时将设计系统作为技能加载。
每次请求最多可以传入三个，可以来自团队或用户 memory、skills.sh、连接的仓库，也可以让 Agent 自己拉取团队的技能。
如果你在构建 Agent，可以将 v0 作为工具提供给它。当任务需要一个真实的应用而不是文本回答或代码片段时，Agent 调用 v0 来创建或继续对话、解决任何问题或审批，并获得一个运行中的预览或部署。v0 在 Sandbox 内部处理代码和运行时；你的 Agent 则保持对其工作流程和最终响应的控制权。
有三种方式连接它：
将 v0 MCP 服务器连接到支持 MCP 的 IDE、桌面助手或 Agent 运行时。
1{ 2 "mcpServers": { 3 "v0": { 4 "url": "https://v0.app/api/mcp" 5 } 6 } 7}
MCP 客户端的 v0 服务器条目。
首次连接会启动 OAuth 流程。MCP 服务器暴露了创建对话、列出对话、获取对话详情、列出和发送消息、解决待处理任务以及获取预览 URL 的工具。
对于使用 AI SDK 构建的 TypeScript Agent，使用 @v0-sdk/ai-tools 将 v0 的 API 操作作为工具暴露给 Agent 自身的循环。
pnpm add @v0-sdk/ai-tools ai @ai-sdk/openai
安装 v0 tools 以及 AI SDK 和某个 provider。
1import { openai } from '@ai-sdk/openai' 2import { generateText, stepCountIs } from 'ai' 3import { v0ToolsByCategory } from '@v0-sdk/ai-tools' 4
5const { chats, messages } = v0ToolsByCategory() 6
7const result = await generateText({ 8 model: openai('gpt-5.5'), 9 system: `Use v0 for creating and modifying web apps. Continue an existing v0 chat when a chat ID is available.`, 10 prompt: 'Build a customer insights app with charts.', 11 tools: { 12 ...chats, 13 ...messages, 14 }, 15 stopWhen: stepCountIs(10), 16})
为 AI SDK Agent 提供 v0 的 chat 和 message 工具。
Agent 自己决定何时创建或继续对话。你的 AI SDK 运行负责保持编排和最终响应的控制权。
对于 eve Agent，添加一个 OpenAPI 连接文件。eve 将允许的操作转换为工具，并在执行时附加 API key，使其脱离模型上下文。
1import { defineOpenAPIConnection } from 'eve/connections' 2
3export default defineOpenAPIConnection({ 4 spec: 'https://api.v0.dev/v2/openapi/json', 5 baseUrl: 'https://api.v0.dev/v2', 6 description: 7 'Build and iterate on web apps with v0. Reuse one v0 chat per app-building task.', 8 auth: { 9 getToken: async () => ({ token: process.env.V0_API_KEY! }), 10 }, 11 operations: { 12 allow: [ 13 'chats_create', 14 'messages_send', 15 'messages_resolve', 16 'chats_getPreview', 17 ], 18 }, 19})
将 v0 注册为 eve 连接，并允许其操作。
为对话创建一个 Vercel 项目，然后通过 Vercel API 管理其环境变量、集成和设置。你的应用开箱即具备企业级安全性和可观测性工具。
1const result = await v0.chats.createVercelProject({ 2 chatId: 'chat_123', 3}) 4
5if (result.error) { 6 throw new Error(result.error.message) 7} 8
9const vercelProjectId = result.data.vercelProjectId
将 Vercel 项目附加到对话。
当你准备发布时，将对话部署到 Vercel。
1const result = await v0.chats.deploy({ chatId }) 2
3if (result.error) { 4 throw new Error(result.error.message) 5} 6
7const { deploymentId, vercelProjectId } = result.data
将对话发布到 Vercel。
上一版 v0 API 的对话无法在新版上运行，需要进行迁移。选择你要保留的版本，下载为 ZIP，然后从该 ZIP 创建新对话。如果需要可追溯性，可以在元数据中存储旧的标识符。
迁移指南涵盖了完整的映射关系。主要变更如下：
新请求使用 https://api.v0.dev/v2。
新请求使用 https://api.v0.dev/v2。
对话持有当前应用状态，消息则持有其历史记录。
对话持有当前应用状态，消息则持有其历史记录。
将版本工作流替换为对话文件工作流，将 v0 Project 组织替换为对话元数据。
将版本工作流替换为对话文件工作流，将 v0 Project 组织替换为对话元数据。
使用 vercelProjectId 加上 Vercel API 进行项目操作。
使用 vercelProjectId 加上 Vercel API 进行项目操作。
渲染消息的部分内容，而不仅仅是最终文本。
渲染消息的部分内容，而不仅仅是最终文本。
在 v0 设置中创建 API key 并安装 SDK。
pnpm add v0@latest
或者，搭建一个完整应用。
pnpm create v0-sdk-app@latest my-v0-app
阅读文档和迁移指南。
使用 v0 API 构建你的第一个应用生成界面。
阅读快速入门指南，从 prompt 到运行中的应用，全程在你自己的 UI 中完成。