公開日: 2026 年 7 月 16 日
Vercel AI SDK は、Next.js、React、Svelte、Vue、Angular などの一般的な UI フレームワークや、Node.js などのランタイムを使用して AI を活用したアプリケーションやエージェントを構築できるように設計された、プロバイダに依存しない TypeScript ツールキットです。プロバイダのほとんどはクラウドベースですが、この 2 部構成のシリーズの最初のガイドでは、Jakob Hoeg Mørk（Google から資金提供を受けた）が作成した Browser AI というコミュニティ プロバイダに焦点を当てます。Browser AI を使用すると、Vercel の AI SDK で Prompt API を使用できます。シリーズのパート 2 では、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 のドキュメントをご覧ください。たとえば、次のコードサンプルに示すようにpromptを直接渡すのではなく、マルチショット プロンプト用に複雑なmessagesオブジェクトを渡したり、systemプロンプトを渡したりすることもできます。
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 データ URL | 例: data:image/png;base64,... |
| http(s) URL | ファイルの取得元となるリモート URL |
例として、次のコード スニペットをご覧ください。
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 は、静的型推論による TypeScript ファーストのスキーマ検証である zod を介して構造化出力をサポートしています。詳しくは、zod のスキーマの定義に関するドキュメントをご覧ください。
スキーマと一致する JSON オブジェクトをリクエストするには、output: Output.object({
schema }) を generateText() または streamText() に渡します。
Output.object()を含むgenerateText()は、生成が完了するとoutputフィールドの最終的な JSON オブジェクトを返します。Output.object()を使用したstreamText()は、各中間結果が JSON として正しく解析されることが保証されているpartialOutputStream非同期イテラブルを提供します。たとえば、スキーマで 2 つの数値の配列が適用されている場合、最初の部分結果として[]、2 番目の部分結果として[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 生成 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 を使用し、それ以外の場合はクラウド プロバイダにフォールバックすることです。プロンプト 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）] または [組み込み AI] を選択し、[実行] をクリックします。ページに 4 つのセクションが順番に表示されます。generateText() で一度に生成された短いジョーク、streamText() でトークンごとにストリーミングされた長いジョーク、完全な JSON オブジェクトとして返されたラザニアのレシピ、partialOutputStream を使用して増分的に有効な JSON としてストリーミングされた同じレシピです。[組み込み AI] を選択し、ブラウザがまだモデルをダウンロードしていない場合は、デモが開始される前に進行状況インジケーターが表示されます。
次のステップ
Vercel AI SDK で Prompt API を使用する方法を理解したら、次のステップとして、AI SDK UI と AI 要素を使用して、アプリにグラフィカル ユーザー インターフェースを追加します。
AI SDK UI は、インタラクティブなチャット、補完、アシスタント アプリケーションを簡単に構築できるように設計されています。フレームワークに依存しないツールキットであり、高度な AI 機能をアプリケーションに効率的に統合できます。
AI Elements は、AI ネイティブ アプリケーションの迅速な構築に役立つコンポーネント ライブラリとカスタム レジストリです。会話やメッセージなどの事前構築済みコンポーネントを提供します。
アプリに GUI を追加する方法については、Prompt API で Vercel AI SDK UI と AI 要素を使用するをご覧ください。