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），以簡化使用者輸入。