なぜ Vercel AI SDK か
Vercel AI SDK は React/Next.js とのインテグレーションが厚く、UI でのストリーミング体験を素早く組み立てられる。特に Next.js 16 の Server Components + Server Actions と相性が良く、トークン単位のストリーミングを fetch パイプの先まで一貫して伝搬できる。
基本構成
```tsx // app/api/chat/route.ts import { streamText } from 'ai'; import { anthropic } from '@ai-sdk/anthropic';
export async function POST(req: Request) { const { messages } = await req.json(); const result = streamText({ model: anthropic('claude-opus-4-7'), messages, tools: { searchKB: { ... } }, }); return result.toDataStreamResponse(); } ```
クライアント
```tsx "use client"; import { useChat } from 'ai/react';
export default function Chat() { const { messages, input, handleSubmit, handleInputChange } = useChat(); return (...); } ```
ツール呼び出し
`tools` プロパティに Zod スキーマを渡すだけで型付き tool calling が動く。React 側では `onToolCall` で UI を即時更新できるため、「ツール実行中…」のような UX が容易。
Edge ランタイム
Edge ランタイムでデプロイすると、Tokyo リージョンに Vercel Functions を寄せられ、p95 TTFT が CDN 直送なみに短くなる。ただし Node.js 専用ライブラリ（pg, sharp など）が使えないので、ツール側の選定は注意。
コスト最適化
- 短文 / FAQ → claude-haiku-4 や deepseek-chat
- 推論 / コード → claude-opus-4-7 or claude-sonnet-4-6
- Vercel AI SDK は `model` を簡単に切り替えられるため、ルーティングロジックを入れやすい
まとめ
Vercel AI SDK は「Next.js の延長で AI を載せる」最短ルート。社内 R&D の本番事例では、PoC から本番昇格まで 3 週間で到達できた。Edge ランタイム + 複数モデルルーティング + UI ストリーミングの 3 点を最初から組むのが推奨パターン。