AI SDK は、Next.js、React、Svelte、Vue、Angular などの一般的な UI フレームワークや、Node.js などのランタイムを使用して、AI を活用したアプリケーションとエージェントを構築するのに役立つように設計されたプロバイダー非依存の TypeScript ツールキットです。
AI SDK の使用方法の詳細については、API リファレンスとドキュメントを確認してください。
ローカル開発マシンに Node.js 22 以上と npm（またはその他のパッケージマネージャー）をインストールする必要があります。
npm install aiClaude Code や Cursor などのコーディングエージェントを使用している場合は、AI SDK スキルをリポジトリに追加することをお勧めします：
npx skills add vercel/aiAI SDK は、統一 API を提供して、OpenAI、Anthropic、Google、その他のようなモデルプロバイダーと相互作用します。
デフォルトでは、AI SDK は Vercel AI Gateway を使用して、すべての主要なプロバイダーへのアクセスをすぐに提供します。サポートされているモデルについては、モデル文字列を渡すだけです：
const result = await generateText({
model: 'anthropic/claude-opus-4.6', // or 'openai/gpt-5.4', 'google/gemini-3-flash', etc.
prompt: 'Hello!',
});SDK パッケージを使用してプロバイダーに直接接続することもできます：
npm install @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/googleimport { anthropic } from '@ai-sdk/anthropic';
const result = await generateText({
model: anthropic('claude-opus-4-6'), // or openai('gpt-5.4'), google('gemini-3-flash'), etc.
prompt: 'Hello!',
});import { generateText } from 'ai';
const { text } = await generateText({
model: 'openai/gpt-5.4', // use Vercel AI Gateway
prompt: 'What is an agent?',
});import { generateText, Output } from 'ai';
import { z } from 'zod';
const { output } = await generateText({
model: 'openai/gpt-5.4',
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: 'Generate a lasagna recipe.',
});import { ToolLoopAgent } from 'ai';
const sandboxAgent = new ToolLoopAgent({
model: 'openai/gpt-5.4',
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() };
},
}),
},
});AI SDK UI モジュールは、チャットボットと生成 UI を構築するのに役立つ一連のフックを提供します。これらのフックはフレームワークに依存しないため、Next.js、React、Svelte、Vue で使用できます。
フレームワークに合わせてパッケージをインストールする必要があります。例えば：
npm install @ai-sdk/reactimport { openai } from '@ai-sdk/openai';
import { ToolLoopAgent, InferAgentUIMessage } from 'ai';
export const imageGenerationAgent = new ToolLoopAgent({
model: 'openai/gpt-5.4',
tools: {
generateImage: openai.tools.imageGeneration({
partialImages: 3,
}),
},
});
export type ImageGenerationAgentMessage = InferAgentUIMessage<
typeof imageGenerationAgent
>;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,
});
}import { openai } from '@ai-sdk/openai';
import { UIToolInvocation } from 'ai';
export default function ImageGenerationView({
invocation,
}: {
invocation: UIToolInvocation<ReturnType<typeof openai.tools.imageGeneration>>;
}) {
switch (invocation.state) {
case 'input-available':
return <div>Generating image...</div>;
case 'output-available':
return <img src={`data:image/png;base64,${invocation.output.result}`} />;
}
}'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<ImageGenerationAgentMessage>();
const [input, setInput] = useState('');
const handleSubmit = e => {
e.preventDefault();
sendMessage({ text: input });
setInput('');
};
return (
<div>
{messages.map(message => (
<div key={message.id}>
<strong>{`${message.role}: `}</strong>
{message.parts.map((part, index) => {
switch (part.type) {
case 'text':
return <div key={index}>{part.text}</div>;
case 'tool-generateImage':
return <ImageGenerationView key={index} invocation={part} />;
}
});
})}
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={e => setInput(e.target.value)}
disabled={status !== 'ready'}
/>
</form>
</div>
);
}
