Vercel 的 v0 是一款 AI 驅動的前端開發工具,能夠將自然語言描述轉換為可部署的 React 元件和 UI 介面,支援 Tailwind CSS,並可直接部署至 Vercel 平台。此外,v0 提供 API 介面,讓開發者能將其整合至其他工具,如 Cursor IDE,進一步提升開發效率。 Vercel
v0 API 介紹
v0 API 目前處於 Beta 階段,主要提供 v0-1.0-md 模型,具備以下特點:
- 多模態支援:接受文字與圖片(base64 編碼)輸入。
- 快速串流回應:提供低延遲的串流回應。
- OpenAI 相容:遵循 OpenAI Chat Completions API 格式,易於整合至現有工具。
- 前端開發優化:特別針對 Next.js 和 Vercel 等現代前端框架進行優化。
要使用 v0 API,需訂閱 Premium 或 Team 方案,並啟用使用量計費。
使用方式
API 端點: POST https://api.v0.dev/v1/chat/completions
請求標頭:
Authorization: Bearer YOUR_V0_API_KEY
Content-Type: application/json
參數範例:
{
"model": "v0-1.0-md",
"messages": [
{ "role": "user", "content": "建立一個具有身份驗證功能的 Next.js AI 聊天機器人" }
],
"stream": true
}
您也可以使用官方的 AI SDK 進行整合:
npm install ai @ai-sdk/vercel
範例程式 javascript
import { generateText } from 'ai';
import { vercel } from '@ai-sdk/vercel';
const { text } = await generateText({
model: vercel('v0-1.0-md'),
prompt: '建立一個具有身份驗證功能的 Next.js AI 聊天機器人',
});
v0 API 價格計算
v0 採用訂閱制與使用量計費相結合的模式,目前僅提供給 Premium or Team plan 使用者。
使用量計費方面,根據模型與輸入/輸出 Token 數量計費。例如,v0-1.0-md 模型的輸入 Token 為 $3.00/百萬個 Token,輸出 Token 為 $15.00/百萬個
在 Cursor 中使用 v0 API
Cursor 是一款基於 VSCode 的 AI 編輯器,支援將 v0 API 作為自定義的 OpenAI 相容提供者進行整合。
快速開始
安裝 Cursor: https://cursor.com
開啟 Cursor 設定:
MacOS:⌘+Shift+J
Windows/Linux:Ctrl+Shift+J
前往「Models」標籤。
捲動至「OpenAI API Key」,貼上您的 v0 API 金鑰。
點選「Override OpenAI Base URL」,輸入:
https://api.v0.dev/v1
點選「Save」,然後「Verify」確認連線成功。
使用 Agent 模式
在 Cursor 的 Agent 模式中,您可以選擇任意 OpenAI 標籤的模型(如 gpt-4o、gpt-4-turbo 等),Cursor 將內部使用 v0-1.0-md 模型進行處理。
注意,目前附件(圖片、檔案)尚不支援。
注意事項
授權問題:部分使用者在 Cursor 中整合 v0 API 時遇到授權錯誤(401)。請確保您使用的是 v0.dev 的 API 金鑰,而非 Vercel 的金鑰。
使用量控制:由於 v0 採用 Token 計費模式,建議您在使用時注意輸入與輸出內容的長度,以避免不必要的費用。
整合建議:將 v0 與 Cursor 結合使用,可大幅提升 UI 開發效率。建議先在 v0 中生成初步元件,然後在 Cursor 中進行優化與整合。
如需進一步了解 v0 的功能與使用方式,您可以參考以下影片:
留言
張貼留言