Vercel AI SDK で実現するリアルタイム AI チャット
Vercel AI SDK は、Next.js や React と統合された AI アプリケーション開発のための OSS ライブラリです。 OpenAI、Anthropic、Google など複数のプロバイダーを統一的な API で扱えます。
SSE ストリーミング
AI の応答をリアルタイムに表示
useChat フック
React でのチャット状態管理
統一プロバイダー API
複数の AI モデルを同じ API で
1. クライアント: useChat フックがメッセージを /api/chat に POST 送信
2. API Route: streamText で OpenAI にリクエストし、SSE 形式でストリーミング返却
3. クライアント: SSE を受信し、AI の応答をリアルタイムに画面に描画
下のチャットボックスにメッセージを入力して、AI とリアルタイムに会話してみましょう。 レスポンスが SSE で1トークンずつストリーミングされる様子を確認できます。
メッセージを入力して会話を始めましょう
aiAI SDK コアパッケージ。streamText、UIMessage 等を提供
@ai-sdk/reactReact 用フック。useChat でチャット状態を管理
@ai-sdk/openaiOpenAI プロバイダー。GPT-4o, GPT-4o-mini 等を利用
zodスキーマバリデーション。ツール定義等で使用