Vercel AI SDKでストリーミングチャット実装｜Next.js作例プロンプト

これはVercel AI SDKを使った完全なストリーミングチャットアプリケーションです。フロントエンドはTailwind CSSでスタイリングし、プレーンなJavaScriptでストリーミングfetchを処理します。AIが生成するメッセージがリアルタイムで表示され、スムーズなユーザー体験を提供します。

バックエンド（Next.js APIルート）:

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { message } = await req.json();
  const result = streamText({
    model: openai('gpt-4o-mini'),
    prompt: `あなたは親切なアシスタントです。ユーザーが言っています: ${message}`,
  });
  return result.toDataStreamResponse();
}

依存関係をインストール: npm install ai @ai-sdk/openai。環境変数にOpenAI APIキー（OPENAI_API_KEY）を設定してください。

上記のフロントエンドコードは単一のHTMLファイルで、どんなプロジェクトにも組み込めます。ストリーミング、自動スクロール、ローディング状態、エラーハンドリングを示しています。