nextjs-chatbot

本番環境向け Next.js チャットボット

永続化された会話、ツールの承認、ツール結果の UI、埋め込みウィジェットを含むウェブチャット連携にこのスキルを使用してください。スキャフォールディングには ai-app、SDK バージョンの確認には ai-sdk、コンポーネントの契約には ai-elements を使用してください。マルチプラットフォームのメッセージングについては、Chat SDK を参照してください。

プロジェクトの技術スタックを維持してください。製品の品質、レイテンシ、プライバシー要件に基づいて、モデル、推論設定、ストレージ、クライアントの状態を選択してください。チャットボットに PostgreSQL、Zustand、MCP サーバー、すべてのメッセージアクションが必須というわけではありません。新規プロジェクトでまだ決まっていない場合は、デフォルトとして Bun、shadcn/ui 上の ai-elements、サーバー側の履歴保存に Drizzle + PostgreSQL、推論負荷が低いかゼロの高速モデルを使用します。チャットではレイテンシが製品そのものだからです。

永続化、ツールの使用、エラー、ストリームの再開については、インストール済みの node_modules/ai/docs/04-ai-sdk-ui/ を参照してください。正確な契約を確認するには、パッケージの型定義を使用し、同梱されている場合は src/ も確認してください。 リンク先の ai-sdk.dev ページはオンラインの代替資料であり、最新のメジャーバージョンについて説明しています。

連携の契約

• API 呼び出しを書く前に、ai、@ai-sdk/react、プロバイダーのバージョンを一致させてください。v7 では ai-sdk-7、既存の v6 プロジェクトでは ai-sdk-6 を使用してください。コアのコールバック名が変わっても、別個の useChat.onFinish の名前が変わるとは限りません。
• 会話へのアクセスを認証し、リクエストデータを検証し、サーバー上でツールを認可してください。クライアントの履歴、コンテキスト、モデル ID、同意フラグは信頼できません。プロンプトでテナントの分離や権限を強制することはできません。
• 会話 UI 全体を復元する必要がある場合は、安定した ID を付けて検証済みの UI メッセージを保存してください。モデルの履歴はインストール済み SDK のヘルパーを使って変換し、必要なツール呼び出し／結果とプロバイダーの推論との関係を維持してください。
• キャンセル、切断、再読み込み、再試行時の動作を決めてください。切断後もストリームを消費できるかどうかは、ホスティング環境での実行期間に依存します。永続的な実行には、対応する耐久性のあるランタイムが必要です。
• 相関 ID を付けて、機密情報を伏せた診断情報をログに記録してください。HTTP リクエストの失敗とストリーム内の失敗には、安全な公開用エラーを返してください。ヘッダーの送信後に発生したエラーでは、HTTP ステータスを変更できません。UI ストリームはデフォルトで通常のエラーをマスクします。プロバイダーが実行したツールのエラーは onError を経由しない場合があるため、ツールのエラーレンダラーも確認してください。カスタム onError の戻り値はそのままブラウザーに送信され、2xx 以外のレスポンスは、生のレスポンス本文をメッセージとして useChat の onError に渡します。
• 実際のプロキシのストリーミングとバッファリング設定を確認してください。SDK の UI メッセージレスポンスはすでに X-Accel-Buffering: no を送信します。独自に作成するストリーム（NDJSON／SSE の進捗通知）には、このヘッダーと Cache-Control: no-store, no-transform が必要です。このヘッダーは対応する nginx の設定では役立ちますが、すべてのホストでバッファリングなしにストリーム配信されることを保証するものではありません。

チャット画面

回答、関連するツールの結果、有用な情報源を読みやすく保ちます。デフォルトのレイアウトでは、ユーザーメッセージを右寄せの bg-muted バブルに表示し、アシスタントのメッセージは背景なしで全幅に表示します。また、スクロールバーにもブランドのデザインを反映します。製品の要件に応じて、フィードバック、再生成、削除、提案を追加します。デフォルトでは、「回答」という見出しや、すべてのメッセージに繰り返しアクションツールバーを表示しないでください。アイコンの選択には icons スキルを、周辺のインターフェイスには nextjs-shadcn を使用します。

読者が最下部にいる間はストリーミング出力に追従し、読者がスクロールして離れた場合や過去の履歴を読み込んだ場合は、読んでいる位置を維持します。適合する既存のスクロールプリミティブがあれば使用します。shadcn の Message Scroller も選択肢の一つです。ユーザーのメッセージをアンカーにして、その下に返信をストリーミング表示します。 Markdown はアプリケーションのレンダラー（デフォルトのスタックでは ai-elements の MessageResponse）を通じてレンダリングし、デフォルトでは shadcn Typeset でスタイルを設定します（CSS のみ。nextjs-shadcn を参照してください）。ネストしたリスト、長いリンク、コードブロックを検証します。

ツール間の一時的な空白ではなく、useChat のステータス（submitted／streaming）からターンの完了を判断します。会話を切り替える前に、生成を停止するか切り離します。ブラウザーのストレージによって、最初のクライアント側のレンダリングがサーバーでレンダリングされた同意状態や履歴と食い違わないようにしてください。

機能ごとの参照先

• ツールの承認：ポリシー、リプレイセキュリティ、UI の遷移。
• 永続化：ID、履歴のリプレイ、フィードバック、再開。
• ツールのレンダリング：型付き状態と安全な出力。
• ポップアップ／埋め込み：フォーカス、スクロール、ホストとの境界。
• 検索拡張：構造化フィルターと評価済みの検索方式。
• 提案：任意の、根拠に基づいた次のアクション。
• ウェブ検索：情報源の範囲、鮮度、プロバイダーの機能。
• 検証：UI の遷移、モデル／検索拡張の評価。

履歴復元後の2ターン目、承認と拒否、ツールの失敗、キャンセル、すばやい会話の切り替え、デプロイ済みのストリーム経路をテストします。実際に確認した動作を報告します。