React / Next.jsでVercel AI SDK v3を活用したストリーミングAI UIとマイクロインタラクションの実装

ユーザーはローディングスピナーではなく、ChatGPTのような リアルタイムテキストストリーミング や、チャット中にカードやグラフが生成される Generative UI を求めています。

ReactおよびNext.js App Router環境において、これを実現する標準ライブラリが Vercel AI SDK です。

ポイント

• ストリーミングの利点: 체감 レイテンシを80%以上削減。
• useChat / streamText: クライアントStateとAIモデルストリームを自動同期。
• Generative UI: Tool Calling経由で動的なReactコンポーネントを即座に描画。

1. サーバー側の実装例 (app/api/chat/route.ts)

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const runtime = 'edge';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
  });
  return result.toDataStreamResponse();
}