Chat with Gemini
{messages.map((message) => (
{message.role === "user" ? "User: " : "AI: "}
{message.parts.map((part, i) => {
switch (part.type) {
case "text":
return
{part.text}
;
}
})}
))}
);
}
```
`@ai-sdk/react` パッケージが提供する `useChat` フックを利用することで、メッセージ履歴の管理、入力ハンドリング、API リクエストの送信といった、チャット UI に必要な状態管理やロジックを簡略化できます。`handleSubmit` 関数は、フォーム送信時に自動的に `/api/chat` (デフォルト) エンドポイントへ POST リクエストを送信し、ストリーミング応答を処理します。このエンドポイントは、先ほど作成した API ルートハンドラーに対応しています。
ここまでの実装で、基本的なチャットアプリケーションが完成しました。以下のコマンドで開発サーバーを起動します。
```bash
npm run dev
```
ブラウザで `http://localhost:3000` にアクセスし、チャット UI が表示されることを確認してください。メッセージを入力して送信すると、設定した LLM からの応答がストリーミング表示されます。