发布时间：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 |
文件内容，采用几种受支持的格式之一 |
当 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 并且浏览器尚未下载该模型，则在演示开始之前会显示进度指示器。
下一步
现在您已了解如何将 Prompt API 与 Vercel AI SDK 搭配使用，下一步是利用 AI SDK 界面和 AI 元素向应用添加图形界面。
AI SDK 界面旨在帮助您轻松构建互动式聊天、补全和助理应用。它是一种与框架无关的工具包，可简化将高级 AI 功能集成到应用中的过程。
AI 元素是一个组件库和自定义注册表，可帮助您更快地构建 AI 原生应用。它提供了预构建的组件，例如对话、消息等。
如需了解如何向应用添加 GUI，请参阅 将 Vercel AI SDK 界面和 AI 元素与 Prompt API 搭配使用。