Vercel AI SDK:建構 AI 應用程式的完整開發者指南

Vercel AI SDK:建構 AI 應用程式的完整開發者指南

Vercel AI SDK 是一套用於建構 AI 應用程式的 TypeScript 工具包。它透過單一統一 API 處理文字生成、串流、結構化輸出、工具呼叫以及多步驟代理迴圈,並且能與任何主流 LLM 供應商搭配使用。如果你曾經嘗試將 OpenAI 或 Anthropic 直接整合到 Next.js 應用程式中,最後卻維護了三種不同的串流實作,那麼這個 SDK 正好能解決這個問題。

本指南涵蓋了 SDK 的核心能力、如何將其連接到 Novita AI 的 OpenAI 相容 LLM API,以及對於建構比簡單聊天機器人更複雜功能的開發者來說,代理工作流程的應用場景。

什麼是 Vercel AI SDK?

Vercel AI SDK(npm 套件名稱:ai)是一個開源函式庫,它抽象化了不同 LLM 供應商之間的差異。你不必分別學習 OpenAI、Anthropic 和 Google 各自的串流通訊協定,只需呼叫相同的 generateTextstreamTextgenerateObject 函式,然後透過更改單一匯入語句來切換供應商即可。

SDK 分為兩個層級:

  • AI SDK Core 負責處理模型互動:文字生成、串流、結構化物件、工具呼叫、嵌入以及代理迴圈。
  • AI SDK UI 提供 React hooks(useChatuseCompletionuseObjectuseAssistant),以及用於 Next.js、SvelteKit 和 Nuxt 的適配器,可在瀏覽器中管理串流狀態。

此外還有一個 @ai-sdk/openai-compatible 套件,可用於連接任何實作 OpenAI Chat Completions 格式的供應商——這也正是 Novita AI 的整合方式。

SDK 可在 Node.js、Deno、邊緣運行環境(Cloudflare Workers、Vercel Edge)以及瀏覽器環境中運作。

AI SDK Core:generateText、streamText 與 generateObject

安裝 SDK 及一個供應商套件:

npm install ai @ai-sdk/openai

generateText

適用於非串流補全——批次處理、分類、一次性生成:

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
  model: openai('gpt-4o-mini'),
  prompt: '用兩句話解釋 LLM 嵌入的運作原理。',
});

console.log(text);

streamText

適用於對延遲敏感的聊天介面:

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

const result = streamText({
  model: openai('gpt-4o-mini'),
  messages: [
    { role: 'user', content: '逐步引導我設定一個 Next.js 應用程式。' },
  ],
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

generateObject

當你需要結構化的 JSON 輸出而非純文字時——使用 Zod 自動處理 schema 驗證:

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4o-mini'),
  schema: z.object({
    name: z.string(),
    skills: z.array(z.string()),
    experienceLevel: z.enum(['junior', 'mid', 'senior']),
  }),
  prompt: '生成一個虛構的軟體工程師個人資料。',
});

console.log(object.name, object.skills);

SDK 會處理迫使模型輸出有效 JSON 所需的系統提示詞注入,並在輸出格式錯誤時進行重試。

AI SDK Tools:函式呼叫與工具使用

工具讓模型能夠在生成過程中呼叫外部函式——搜尋 API、資料庫查詢、計算機等。SDK 的 tools 參數接受一個物件,其中每個鍵都對應一個可呼叫的函式:

import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { text, toolCalls } = await generateText({
  model: openai('gpt-4o-mini'),
  tools: {
    getWeather: tool({
      description: '獲取某個位置的當前天氣',
      parameters: z.object({
        city: z.string().describe('城市名稱'),
        unit: z.enum(['celsius', 'fahrenheit']).default('celsius'),
      }),
      execute: async ({ city, unit }) => {
        // 替換為真實的天氣 API 呼叫
        return { city, temperature: 22, unit, condition: 'sunny' };
      },
    }),
  },
  prompt: '東京現在的天氣如何?',
});

console.log(text);

tool() 輔助函式可將 Zod schema 的型別推斷到 execute 函式的參數中,無需手動解析 JSON。

多步驟工具呼叫

預設情況下,generateText 在一輪工具呼叫後就會停止。設定 maxSteps 可讓模型在後續推理中使用工具結果:

const { text } = await generateText({
  model: openai('gpt-4o'),
  maxSteps: 5,
  tools: { getWeather, searchWeb, lookupCalendar },
  prompt: '為我規劃這個週末在柏林的戶外活動。',
});

SDK 會自動處理工具呼叫 → 結果 → 繼續迴圈。如果需要查看中間推理過程,每個步驟都會透過 onStepFinish 暴露出來。

使用 Vercel AI SDK 建構 AI 代理迴圈

在 AI SDK 中,代理是一個模型,它與工具一起在迴圈中運行,直到決定擁有足夠的資訊來回答問題。這個模式與多步驟工具呼叫相同,但使用了更多工具和更長的 maxSteps

import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const result = await generateText({
  model: openai('gpt-4o'),
  maxSteps: 10,
  system: '你是一個研究助理。使用可用的工具進行詳盡的回答。',
  prompt: 'Llama 3.1 和 Qwen3 之間的主要差異是什麼?',
  tools: {
    search: tool({
      description: '搜尋網路以獲取最新資訊',
      parameters: z.object({ query: z.string() }),
      execute: async ({ query }) => searchWeb(query),
    }),
    summarize: tool({
      description: '摘要一個 URL 的內容',
      parameters: z.object({ url: z.string() }),
      execute: async ({ url }) => fetchAndSummarize(url),
    }),
  },
  onStepFinish({ stepType, toolCalls, toolResults }) {
    console.log('步驟:', stepType, toolCalls?.map(t => t.toolName));
  },
});

對於生產環境中的代理管線,可以將 Novita AI 連接為模型後端,以控制大規模的成本和吞吐量——這將在下一節中介紹。

AI SDK React:useChat Hook 與 Next.js 整合

useChat hook 無需樣板程式碼即可管理串流聊天狀態:

// app/chat/page.tsx
'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'user' : 'assistant'}>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="詢問一些事情..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>發送</button>
      </form>
    </div>
  );
}

對應的路由處理器:

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
  });

  return result.toDataStreamResponse();
}

toDataStreamResponse() 會處理 Vercel AI 串流通訊協定,客戶端的 useChat 能原生理解此協定。若要從 API 串流結構化物件,請將 useChat 替換為 useObject,並將 streamText 替換為 streamObject

如何將 Novita AI 與 Vercel AI SDK 搭配使用

Novita AI 在 https://api.novita.ai/v3/openai 提供一個 OpenAI 相容的 API,這使其可以作為任何使用 OpenAI Chat Completions 格式的 SDK(包括 Vercel AI SDK)的直接替代品。

為什麼要在 AI SDK 中使用 Novita AI

Novita AI 透過單一 API 端點託管 70 多個開源模型——Llama 3.3 70B、Qwen3、DeepSeek V3、Mistral 和 Gemma 3。無需管理 GPU 基礎設施。對於代理工作流程,無伺服器 API 可以從小型的 7B 指令模型擴展到大型推理模型,無需更改設定。

設定

安裝 OpenAI 相容的供應商套件:

npm install ai @ai-sdk/openai-compatible

設定供應商:

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';

const novita = createOpenAICompatible({
  name: 'novita',
  baseURL: 'https://api.novita.ai/v3/openai',
  apiKey: process.env.NOVITA_API_KEY,
});

這樣就完成設定了。現在可以像使用任何其他 AI SDK 供應商一樣使用它:

import { generateText } from 'ai';

const { text } = await generateText({
  model: novita('meta-llama/llama-3.3-70b-instruct'),
  prompt: '對於客服機器人來說,RAG 和微調之間的取捨是什麼?',
});

串流的方式也相同:

import { streamText } from 'ai';

const result = streamText({
  model: novita('qwen/qwen3-235b-a22b-instruct-2507'),
  messages: [
    { role: 'system', content: '你是一個有用的程式碼助手。' },
    { role: 'user', content: '教我如何使用 FastAPI 建立一個 REST API。' },
  ],
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

在 Novita AI 中使用工具呼叫

支援函式呼叫的模型無需任何額外設定即可與 AI SDK 的工具介面搭配運作。Llama 3.3 70B Instruct 和 Qwen3 透過 Novita 的 API 支援工具呼叫:

import { generateText, tool } from 'ai';
import { z } from 'zod';

const { text } = await generateText({
  model: novita('meta-llama/llama-3.3-70b-instruct'),
  maxSteps: 5,
  tools: {
    calculator: tool({
      description: '計算一個數學表達式',
      parameters: z.object({ expression: z.string() }),
      execute: async ({ expression }) => {
        return { result: eval(expression) }; // 在生產環境中請使用安全的數學解析器
      },
    }),
  },
  prompt: '847 的 12% 是多少,然後再除以 3.14?',
});

環境設定

將你的 Novita API 金鑰新增到 .env.local

NOVITA_API_KEY=your_novita_api_key_here

novita.ai 取得金鑰——新帳戶包含免費額度供你測試 API。

適用於長時間運行工作負載的代理沙箱

對於需要執行程式碼、存取檔案系統或執行耗時數分鐘的工作流程的代理任務,Novita AI 的 Agent Sandbox 在 LLM API 之上提供了隔離的執行環境。AI SDK 負責模型推理層,而沙箱則負責處理無法在邊緣函式逾時限制內運行的有狀態執行。

為 Vercel AI SDK 選擇 LLM 供應商

AI SDK 讓切換供應商變得容易,這很有用——但在為生產環境選擇供應商之前,了解其中的取捨是很重要的。

延遲:對於串流聊天來說,到第一個 token 的時間比總生成速度更重要。較小的模型(8B–14B)產生第一個 token 的速度更快。Novita AI 的無伺服器端點針對開源模型優化了低冷啟動延遲。

規模化成本:GPT-4o 表現出色,但在高查詢量下,前沿模型與精心調校的開源模型(例如 Llama 3.3 70B)之間的價格差距會變得顯著。AI SDK 讓你能在不重寫應用邏輯的情況下嘗試兩者。

工具呼叫支援:並非所有模型都可靠地支援函式呼叫。請針對你的工具 schema 測試你特定的模型——即使是同一個模型家族,不同供應商之間的行為也可能有所不同。

上下文視窗:對於文件密集型的 RAG 或長時間的對話歷史,請檢查上下文限制。許多開源模型支援 128K token,這涵蓋了大多數實際使用案例。

供應商鎖定:AI SDK 的供應商抽象層搭配 Novita AI 的 OpenAI 相容端點,讓你可以切換模型或新增備援供應商,而無需修改應用程式程式碼。

結論

Vercel AI SDK 消除了建構 AI 應用程式時的重複性工作——一個 API 即可處理文字生成、串流、工具呼叫和代理迴圈,並可跨任何 LLM 供應商使用。無論你是要使用 useChat 建構串流聊天介面、使用 generateObject 提取結構化資料,還是運行一個會呼叫外部工具的多步驟代理,SDK 都會處理好底層細節,讓你能專注於應用邏輯。

對於開源模型推理,Novita AI 的 OpenAI 相容 API 透過 @ai-sdk/openai-compatible 可直接接入 SDK。你可以存取 70 多個模型——Llama、Qwen3、DeepSeek、Mistral——無需管理 GPU 基礎設施,並且可以在不修改應用程式碼的情況下切換模型或新增供應商備援。

立即前往 novita.ai 開始使用——新帳戶包含免費額度。

常見問題

什麼是 ai sdk react?

AI SDK 的 React 整合位於 ai/react 套件中。它提供了 hooks——useChatuseCompletionuseObjectuseAssistant——這些 hooks 將 React 前端連接到伺服器端的串流路由。這些 hooks 負責處理串流狀態、訊息歷史、載入指示器和錯誤處理,因此你無需在元件狀態中管理 ReadableStream

ai sdk 5 新增了什麼?

AI SDK 5(於 2025 年中作為 beta 版本發布)重新設計了供應商規範以獲得更好的型別安全性,將 UI 狀態管理與模型互動邏輯分離,並引入了一種修訂後的訊息格式,使得代理 UI 狀態更易於序列化。如果你在 2026 年開始一個新專案,請前往 ai-sdk.dev 查看最新的穩定版本——該 SDK 在後續的版本 6 和 7 中持續演進。

是否有 ai sdk 文件可以參考?

官方文件位於 ai-sdk.dev。它包含了供應商設定指南、所有核心函式的 API 參考、框架整合逐步教學(Next.js、Nuxt、SvelteKit),以及針對常見模式(如 RAG、代理迴圈和結構化提取)的食譜範例。

我可以在非 OpenAI 模型上使用 ai sdk tools 嗎?

可以。任何支援函式呼叫的供應商都可以與 AI SDK 的 tool() 介面搭配使用。Novita AI 託管了多個支援函式呼叫的開源模型。行為品質各異——在 Novita API 提供的開源模型中,Llama 3.3 70B 和 Qwen3 在多步驟工具使用方面最為可靠。

vercel ai sdk docs 和 ai-sdk.dev 文件有什麼不同?

它們是相同的產品。文件之前位於 sdk.vercel.ai,現在重新導向到 ai-sdk.dev。該 SDK 由 Vercel 團隊維護,但它是開源的,並且不侷限於部署在 Vercel 基礎設施上。

人工智慧 SDK 與直接呼叫 LLM API 相比如何?

直接 API 呼叫適用於簡單的一次性請求。當你需要同時處理多件事情時,SDK 就變得有價值:與 UI 框架整合的串流、多步驟工具呼叫迴圈、結構化輸出驗證、統一的供應商切換,以及跨供應商的一致重試/錯誤處理。AI SDK 在函式庫層級處理所有這些功能,讓你不必在每個專案中重新實作。

推薦文章