Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

将内置的 Prompt API 与 Vercel AI SDK 搭配使用

Thomas Steiner

发布时间：2026 年 7 月 16 日

Vercel AI SDK 是一种与提供方无关的 TypeScript 工具包，旨在帮助您使用 Next.js、React、Svelte、Vue、Angular 等热门界面框架和 Node.js 等运行时构建 AI 驱动的应用和代理。虽然大多数提供方都是基于云的，但本系列的两部分中的第一部分指南重点介绍了一个由 Jakob Hoeg Mørk（由 Google 资助）创建的社区提供方，称为 Browser AI。借助 Browser AI，您可以将 Prompt API 与 Vercel 的 AI SDK 搭配使用。然后，本系列的第二部分将介绍如何向 AI 应用添加图形界面。

安装库

@browser-ai/core 软件包是 Prompt API 的 AI SDK 提供方。您可以使用 npm 安装它。底层 Vercel AI SDK 由该软件包作为对等依赖项自动安装。

npm install @browser-ai/core

基本用法

如需使用提供方，请执行以下操作：

从 @browser-ai/core 软件包导入 browserAI 构造函数。
从 Vercel AI SDK 导入 generateText() 或 streamText() 函数。这两个函数都会使用语言模型为给定提示生成文本并调用工具：

generateText() 函数是非流式传输的，非常适合短输出或只能在收到整个输出后才能继续的输出。
streamText() 函数会从语言模型流式传输文本生成。您可以将此函数用于聊天机器人和其他实时应用等互动用例。

如需创建模型实例，请执行以下操作：

调用 browserAI()。注意：最佳实践是始终检查模型的 availability()，这样您就可以在模型为 'unavailable' 时使用回退（请参阅混合用法），或者在模型为 'downloadable' 或 'downloading' 时显示进度更新。
然后，您可以调用 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 软件包支持使用 type: 'file' 对象在 messages 数组的内容对象中进行多模态输入。

content 对象字段 (type: 'file')

字段	接受的值类型	说明
type	'file'	将此内容对象标记为文件输入
data	string \| Uint8Array \| Buffer \| ArrayBuffer \| URL	文件内容，采用几种受支持的格式之一

字段

接受的值类型

说明

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 支持结构化输出，zod 是一种以 TypeScript 为先的架构验证，具有静态类型推断功能。如需了解详情，请查看 zod 的定义架构文档。

如需请求与您的架构匹配的 JSON 对象，请将 output: Output.object({ schema }) 传递给 generateText() 或 streamText()：

生成完成后，带有 Output.object() 的 generateText() 会在 output 字段中返回最终 JSON 对象。
带有 Output.object() 的 streamText() 提供了一个 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 提供方），您需要执行以下操作：

安装所选提供方。
```
npm install @ai-sdk/google
```
使用提供方的构造函数实例化 model，对于 Google 生成式 AI 等云提供方，这通常涉及传递 API 密钥。对于 Google Generative AI 提供方，您还可以传递云模型标识符，例如 '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 可用时使用它，并在其他情况下回退到云提供方。如需检查 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 形式流式传输的同一食谱。如果您选择 Built-in AI 并且浏览器尚未下载该模型，则在演示开始之前会显示进度指示器。

Vercel AI 演示

下一步

现在您已了解如何将 Prompt API 与 Vercel AI SDK 搭配使用，下一步是利用 AI SDK 界面和 AI 元素向应用添加图形界面。

AI SDK 界面旨在帮助您轻松构建互动式聊天、补全和助理应用。它是一种与框架无关的工具包，可简化将高级 AI 功能集成到应用中的过程。

AI 元素是一个组件库和自定义注册表，可帮助您更快地构建 AI 原生应用。它提供了预构建的组件，例如对话、消息等。

如需了解如何向应用添加 GUI，请参阅将 Vercel AI SDK 界面和 AI 元素与 Prompt API 搭配使用。