使用 Vercel AI SDK 內建的 Prompt API

Thomas Steiner

發布日期：2026 年 7 月 16 日

Vercel AI SDK 是與供應商無關的 TypeScript 工具包，可協助您使用 Next.js、React、Svelte、Vue、Angular 等熱門 UI 架構，以及 Node.js 等執行階段，建構 AI 輔助應用程式和代理程式。雖然大多數供應商都以雲端為基礎，但本系列文章的第一部分 (共兩部分) 將著重於由 Jakob Hoeg Mørk 建立的社群供應商「Browser AI」(由 Google 贊助)。透過 Browser AI，您可以使用 Vercel 的 AI SDK 搭配 Prompt API。本系列文章的第二部分說明如何為 AI 應用程式新增圖形使用者介面。

安裝程式庫

@browser-ai/core 套件是 Prompt API 的 AI SDK 供應商。您可以使用 npm 安裝。 套件會自動安裝基礎 Vercel AI SDK 做為同層級依附元件。

npm install @browser-ai/core

基本用法

如要使用供應商，請按照下列步驟操作：

  1. 從 @browser-ai/core 套件匯入 browserAI 建構函式。
  2. 從 Vercel AI SDK 匯入 generateText() 或 streamText() 函式。這兩個函式都會使用語言模型，針對指定提示生成文字並呼叫工具：
  • generateText() 函式不支援串流，適合用於簡短輸出內容，或只能在收到完整輸出內容後繼續作業的輸出內容。
  • streamText() 函式會串流語言模型生成的文字。您可以使用這項功能處理互動式用途，例如聊天機器人和其他即時應用程式。

如要建立模型執行個體，請按照下列步驟操作：

  1. 呼叫 browserAI()。注意：最佳做法是一律檢查模型的 availability()，以便在模型為 'unavailable' 時使用備用方案 (請參閱「混合使用」)，或在模型為 'downloadable' 或 'downloading' 時顯示進度更新。

  2. 接著，您可以呼叫 generateText() 或 streamText()。如需完整的參數清單，請參閱 Vercel AI SDK 說明文件。舉例來說，您也可以傳遞更複雜的 messages 物件，進行多重提示，或傳遞 system 提示，而不是像下列程式碼範例一樣直接傳遞 prompt。

import { browserAI } from '@browser-ai/core';
import { generateText, streamText } from 'ai';

(async () => {
  const model = browserAI();
  const availability = await model.availability();

  if (availability === 'unavailable') {
    console.log('Your browser cannot run the built-in AI model.');
    return;
  }

  if (availability === 'downloadable' || availability === 'downloading') {
    await model.createSessionWithProgress((progress) => {
      console.log(`Download progress: ${Math.round(progress * 100)}%`);
    });
  }

  // Non-streaming text generation.
  const { text } = await generateText({
    model,
    prompt: 'Tell me a short joke',
  });
  console.log(text);

  // Streaming text generation.
  const result = streamText({
    model,
    prompt: 'Tell me a long joke',
  });

  for await (const chunk of result.textStream) {
    console.log(chunk);
  }
})();

多模態使用量

@browser-ai/core 套件支援多模態輸入，方法是在 messages 陣列的內容物件中使用 type: 'file' 物件。

content 物件欄位 (type: 'file')

欄位 可接受的值類型 說明 

type


'file'

將這個內容物件標示為檔案輸入 

data


string | Uint8Array | Buffer | ArrayBuffer | URL

檔案內容 (支援多種格式)

如果 data 是 string，則必須是下列其中一項：

格式 說明
Base64 編碼內容 以 Base64 編碼的原始檔案位元組
Base64 資料網址 例如：data:image/png;base64,...
http(s) 網址 系統將從中擷取檔案的遠端網址

請參考以下程式碼片段：

import { streamText } from 'ai';
import { browserAI } from '@browser-ai/core';

const base64ImageData = await getBase64ImageData();
const audioData = await getAudioBuffer();

const result = streamText({
  model: browserAI(),
  messages: [
    {
      role: 'user',
      content: [
        { type: 'text', text: "What's in this image?" },
        { type: 'file', mediaType: 'image/png', data: base64ImageData },
      ],
    },
    {
      role: 'user',
      content: [
        { type: 'text', text: 'Transcribe this audio file!' },
        { type: 'file', mediaType: 'audio/mp3', data: audioData },
      ],
    },
  ],
});

for await (const chunk of result.textStream) {
  console.log(chunk);
}

結構化輸出內容

Vercel AI SDK 透過 zod 支援結構化輸出，這項 TypeScript 優先的結構定義驗證功能具有靜態型別推論功能。詳情請參閱 zod 的「定義結構定義」說明文件。

如要要求與結構定義相符的 JSON 物件，請將 output: Output.object({ schema }) 傳遞至 generateText() 或 streamText()：

  • generateText() with Output.object() 會在生成完成後，於 output 欄位中傳回最終的 JSON 物件。
  • streamText() 與 Output.object() 搭配使用時，會提供 partialOutputStream 非同步可疊代項目，保證每個中繼結果都能正確剖析為 JSON。舉例來說，如果結構定義強制執行兩個數字的陣列，您會收到 [] 做為第一個部分結果、[123] 做為第二個部分結果，以及 [123, 456] 做為最終結果。
import { browserAI } from '@browser-ai/core';
import { generateText, streamText, Output } from 'ai';
import z from 'zod';

const model = browserAI();

const schema = z.object({
  recipe: z.object({
    name: z.string(),
    ingredients: z.array(z.object({ name: z.string(), amount: z.string() })),
    steps: z.array(z.string()),
  }),
});

const prompt = 'Generate a lasagna recipe.';

// Non-streaming object generation.
const { output } = await generateText({
  model,
  output: Output.object({ schema }),
  prompt,
});

console.log(output);

// Streaming object generation.
const { partialOutputStream } = streamText({
  model,
  output: Output.object({ schema }),
  prompt,
});

for await (const partialObject of partialOutputStream) {
  console.log(partialObject);
}

混合使用

Vercel 的 AI SDK 最擅長的是混合使用。它在基礎供應商的低層級實作項目之上，提供更高層級的抽象層。使用 Prompt API 做為供應商時，請呼叫 browserAI 建構函式來建立 model。

import { browserAI } from '@browser-ai/core';

const model = browserAI();

如要使用其他供應商 (例如 Google 生成式 AI 供應商)，請按照下列步驟操作：

  1. 安裝所選供應商。

    npm install @ai-sdk/google

  2. 使用供應商的建構函式例項化 model，對於 Google 生成式 AI 等雲端服務供應商，這通常需要傳遞 API 金鑰。如果是 Google Generative AI 提供者，您也可以傳遞雲端模型 ID，例如 'gemini-2.5-flash'。其餘程式碼 (例如對 streamText() 的呼叫) 則完全不變。

    import { createGoogleGenerativeAI } from '@ai-sdk/google';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

const google = createGoogleGenerativeAI({ apiKey: API_KEY });
const model = google('gemini-2.5-flash');

雲端備用廣告

在混合式情境中，常見的用途是在 Prompt API 可用時使用該 API，並在其他情況下改用雲端供應商。如要檢查 Prompt API 是否可用，@browser-ai/core 套件提供 doesBrowserSupportBuiltInAI() 函式。您可以使用此函式，將 model 動態例項化為雲端式模型或內建模型。

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

const model = await (async () => {
  if (doesBrowserSupportBuiltInAI()) {
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  }
  const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
  const google = createGoogleGenerativeAI({ apiKey: API_KEY });
  return google('gemini-2.5-flash');
})();

內建備用機制

另一個混合式用途是盡可能在連線時使用雲端供應商，但如果支援 Prompt API，則會改用內建供應商。

import { doesBrowserSupportBuiltInAI } from '@browser-ai/core';

const API_KEY = 'YOUR_GOOGLE_AI_API_KEY';

let model;

const switchProvider = async (forceCloud = false) => {
  model = await (async () => {
    if (navigator.onLine || forceCloud) {
      const { createGoogleGenerativeAI } = await import('@ai-sdk/google');
      const google = createGoogleGenerativeAI({ apiKey: API_KEY });
      return google('gemini-2.5-flash');
    }
    const { browserAI } = await import('@browser-ai/core');
    return browserAI();
  })();
};

if (doesBrowserSupportBuiltInAI()) {
  window.addEventListener('online', switchProvider);
  window.addEventListener('offline', switchProvider);
}
await switchProvider(true);

示範

透過 即時試用 ，你可以並排比較兩家供應商的服務。從圓形按鈕選取「Cloud API (Gemini 2.5 Flash)」或「Built-in AI」，然後按下「Run」，即可看到頁面依序填入四個部分：使用 generateText() 一次生成的短笑話、使用 streamText() 逐一串流的長笑話、以完整 JSON 物件形式傳回的千層麵食譜，以及使用 partialOutputStream 串流的相同食譜 (以遞增方式驗證 JSON)。如果選取「內建 AI」，但瀏覽器尚未下載模型，系統會在開始展示前顯示進度指標。

Vercel AI 示範

後續步驟

您現在已瞭解如何搭配使用 Prompt API 和 Vercel AI SDK，接下來的步驟是使用 AI SDK UI 和 AI 元素，在應用程式中加入圖形使用者介面。

AI SDK UI 旨在協助您輕鬆建構互動式聊天、完成和助理應用程式。這項工具組與架構無關，可簡化將進階 AI 功能整合至應用程式的程序。

AI 元素是元件程式庫和自訂登錄檔，可協助您更快建構 AI 原生應用程式。並提供預先建構的元件，例如對話和訊息等。

請參閱「Use the Vercel AI SDK UI and AI Elements with the Prompt API」，瞭解如何為應用程式新增 GUI。