AI SDK は、プロバイダーに依存しない TypeScript ツールキットで、Next.js, React, Svelte, Vue, Angular のようなポピュラーな UI フレームワークや Node.js のようなランタイムを使用して、AI で強化されたアプリケーションやエージェントを構築する支援をするように設計されています。
Vercel AI SDK 6 : 概要
作成 : Masashi Okumura (@classcat.com)
作成日時 : 12/25/2025
バージョン : ai@6.0.3
* 本記事は github.com/vercel/ai の以下のページを参考にしています :
* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。
Vercel AI SDK 6 : 概要
AI SDK は、プロバイダーに依存しない TypeScript ツールキットで、Next.js, React, Svelte, Vue, Angular のようなポピュラーな UI フレームワークや Node.js のようなランタイムを使用して、AI で強化されたアプリケーションやエージェントを構築する支援をするように設計されています。
AI SDK の使用方法について更に学習するには、API リファレンス と ドキュメント を確認してください。
インストール
ローカル開発マシンに Node.js 18+ と npm (またはその他のパッケージマネージャ) がインストールされている必要があります。
npm install ai
統一プロバイダー・アーキテクチャ
AI SDK は、OpenAI, Anthropic, Google と その他 のモデルプロバイダーと相互作用するための 統一 API を提供します。
npm install @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google
Alternatively you can use the Vercel AI Gateway.
使用方法
テキスト生成
import { generateText } from 'ai';
const { text } = await generateText({
model: 'openai/gpt-5', // use Vercel AI Gateway
prompt: 'What is an agent?',
});
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
const { text } = await generateText({
model: openai('gpt-5'), // use OpenAI Responses API
prompt: 'What is an agent?',
});
構造化データの生成
import { generateText, Output } from 'ai';
import { z } from 'zod';
const { output } = await generateText({
model: 'openai/gpt-5',
output: Output.object({
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()),
}),
}),
}),
prompt: 'ボルシチのレシピを教えてください。',
});
出力例
{
"recipe": {
"name": "ボルシチ",
"ingredients": [
{
"name": "ビーツ",
"amount": "2個"
},
{
"name": "キャベツ",
"amount": "1/4個"
},
{
"name": "ニンジン",
"amount": "1本"
},
{
"name": "ジャガイモ",
"amount": "2個"
},
{
"name": "タマネギ",
"amount": "1個"
},
{
"name": "セロリ",
"amount": "1本"
},
{
"name": "トマトペースト",
"amount": "大さじ2"
},
{
"name": "水",
"amount": "4カップ"
},
{
"name": "塩",
"amount": "適量"
},
{
"name": "黒胡椒",
"amount": "適量"
},
{
"name": "サワークリーム",
"amount": "適量"
},
{
"name": "ディル（飾り用）",
"amount": "適量"
}
],
"steps": [
"ビーツを皮をむいて、細切りにします。",
"キャベツ、ニンジン、ジャガイモ、タマネギ、セロリをそれぞれ食べやすい大きさに切ります。",
"鍋に水を入れ、タマネギとセロリを加え、中火で煮ます。",
"タマネギが透明になるまで煮たら、ビーツを加え、さらに数分煮ます。",
"次に、ニンジン、ジャガイモ、キャベツ、トマトペーストを加えて、全体が柔らかくなるまで煮ます（約20分）。",
"塩と黒胡椒で味を調えます。",
"器に盛り、サワークリームとディルを添えて完成です。"
]
}
}
エージェント
import { ToolLoopAgent } from 'ai';
const sandboxAgent = new ToolLoopAgent({
model: 'openai/gpt-5',
system: 'You are an agent with access to a shell environment.',
tools: {
shell: openai.tools.localShell({
execute: async ({ action }) => {
const [cmd, ...args] = action.command;
const sandbox = await getSandbox(); // Vercel Sandbox
const command = await sandbox.runCommand({ cmd, args });
return { output: await command.stdout() };
},
}),
},
});
UI 統合
AI SDK UI モジュールは、チャットボットや生成ユーザインターフェイスを構築するのに役立つフックのセットを提供します。これらのフックはフレームワークに依存しませんので、Next.js, React, Svelte や Vue で使用できます。
フレームワーク用にパッケージをインストールする必要があります、例えば :
npm install @ai-sdk/react
エージェント @/agent/image-generation-agent.ts
import { openai } from '@ai-sdk/openai';
import { ToolLoopAgent, InferAgentUIMessage } from 'ai';
export const imageGenerationAgent = new ToolLoopAgent({
model: openai('gpt-5'),
tools: {
generateImage: openai.tools.imageGeneration({
partialImages: 3,
}),
},
});
export type ImageGenerationAgentMessage = InferAgentUIMessage<
typeof imageGenerationAgent
>;
Route (Next.js App ルーター) @/app/api/chat/route.ts
import { imageGenerationAgent } from '@/agent/image-generation-agent';
import { createAgentUIStreamResponse } from 'ai';
export async function POST(req: Request) {
const { messages } = await req.json();
return createAgentUIStreamResponse({
agent: imageGenerationAgent,
messages,
});
}
UI コンポーネント for ツール @/component/image-generation-view.tsx
import { openai } from '@ai-sdk/openai';
import { UIToolInvocation } from 'ai';
export default function ImageGenerationView({
invocation,
}: {
invocation: UIToolInvocation>;
}) {
switch (invocation.state) {
case 'input-available':
return <div>Generating image...</div>;
case 'output-available':
return 
;
}
}
ページ @/app/page.tsx
'use client';
import { ImageGenerationAgentMessage } from '@/agent/image-generation-agent';
import ImageGenerationView from '@/component/image-generation-view';
import { useChat } from '@ai-sdk/react';
export default function Page() {
const { messages, status, sendMessage } =
useChat();
const [input, setInput] = useState('');
const handleSubmit = e => {
e.preventDefault();
sendMessage({ text: input });
setInput('');
};
return (
{messages.map(message => (
{`${message.role}: `}
{message.parts.map((part, index) => {
switch (part.type) {
case 'text':
return {part.text};
case 'tool-generateImage':
return
テンプレート
様々なユースケース、プロバイダーとフレームワークに対応した AI SDK 統合を含む テンプレート を構築しました。これらのテンプレートを使用して、AI で強化されたアプリケーションの開発を始めることができます。
以上