openai/openai-chatkit-advanced-samples

何を解決するか

このリポジトリは、OpenAI ChatKit SDK を使用して複雑なAIチャットインターフェースを構築するための高度でシナリオ駆動のデモを一覧しています。シンプルなチャットボットと完全に統合されたアプリケーション体験の間のギャップを埋め、AIエージェントをリアルタイムUI状態、外部データ、インタラクティブウィジェットと同期する方法を示しています。

動作方法

各例は、ChatKit Python SDK を使用する FastAPI ベースと、ChatKit.js を使用する Vite + React フロントエンドで構成されています。このシステムは双方向の情報フローを可能にします：

• サーバー → クライアント：バックエンドは「クライアントエフェクト」をストリーミングしてUIを更新（例：マップの更新や猫のステータスの変更）し、アクション設定付きのインタラクティブウィジェットを送信できます。
• クライアント → サーバー：フロントエンドは、クライアントツールコールを通じて現在のUI状態（例：選択されたマップノード）をエージェントに提供し、特定のコマンドやエンティティのメンション（@メンション）を送信できます。
• エージェント統合：エージェントは関数ツールを使用してアプリケーションデータを取得し、セッション状態を管理し、UI変更をトリガーします。また、専用の「タイトルエージェント」が会話の名前を自動的に付与します。

対象読者

高度なAI駆動アプリケーションを開発している開発者で、LLMをインタラクティブなフロントエンド、状態管理、複雑なUIコンポーネントと統合するためのプロダクション準備済みのパターンを知りたい方。

特徴

• インタラクティブウィジェット：クライアントサイドとサーバーサイドの両方のアクションハンドラーを持つウィジェットの実装により、ユーザーとのシームレスな相互作用を実現。
• UI状態同期：エージェントがフロントエンド状態を読み取り、変更可能（例：メトロマップキャンバスや顧客プロフィールの同期）。
• コンテキスト認識：リクエストヘッダーを使用して現在のページコンテンツに応じたAIの回答をスコープするページ認識対応。
• リッチメディア対応：画像添付、音声認識（音声からテキスト）、画像生成の進行状況を統合的に追跡するエンドツーエンド対応。
• 高度なナビゲーション：エンティティ（記事、駅など）の@メンションや、コンポーザーコマンド（例：/care や /find-events）をサポートし、ユーザー入力を簡素化。