什麼是CopilotKit？
CopilotKit 是一個企業級 AI 代理前端堆疊，專為需要在真實應用程式中整合 LLM 或 AI Agent 的開發者設計。它透過 AG-UI 協議，在用戶端應用程式與後端代理之間建立雙向連接，讓代理能直接生成互動式 UI，而非僅回傳文字。CopilotKit 支援 React、Angular、Vue 以及 Slack、Teams 等頻道，適合需要快速建立具備生成式 UI 功能的 SaaS 產品或協作工具的團隊。
CopilotKit的特色是什麼？
- 生成式 UI (Generative UI)：代理能根據任務動態渲染互動式 UI 元件，例如航班資訊卡或資料表格，直接嵌入應用程式中，讓用戶在 AI 對話中直接操作。
- 連接到任何代理 (Connect Any Agent)：預設支援 OpenAI、LangGraph、MAF 等主流框架，開發者可以將現有代理輕鬆連接到網頁、Slack 或 Teams 等前端介面。
- 執行緒與持久化 (Threads + Persistence)：自動保存跨應用程式會話、Slack 執行緒和 Teams 對話的狀態，確保用戶離開後能無縫接續之前的互動記錄。
- React 與 Angular 前端 SDK：提供整合框架的直覺式 API 和預設 UI 元件，如 CopilotSidebar，讓開發者在幾分鐘內開始建置具備 AI 功能的應用程式。
- 可自訂的聊天元件 (Chat Components)：內建可立即使用的聊天 UI 元件，同時支援無頭模式 (Headless UI)，讓開發團隊能完全控制 UI 樣式與行為。
CopilotKit的使用案例有哪些？
- SaaS 產品經理：直接為產品加入 AI 助手，幫助用戶導航功能、自動化工作流程，並從資料中取得洞察。
- 創意工具開發者：建立與 AI 協作的設計或內容創作工具，讓代理能即時生成與修改 UI 元素，輔助設計流程。
- 企業內部工具團隊：在 Slack 或 Teams 中部署 AI 代理，讓員工能透過對話完成查詢資料、更新狀態等業務操作。
- 前端工程師：無需從零打造聊天介面，透過 SDK 快速整合生成式 UI，並與任何後端代理框架對接。
如何使用CopilotKit？
- 在終端機執行
npx copilotkit@latest create快速建立專案，並將 CopilotKit 整合到現有應用程式中。 - 安裝前端 SDK (
@copilotkit/react-core與@copilotkit/react-ui)，並使用<CopilotSidebar>元件加入聊天介面。 - 使用
useCopilotAction定義代理能呼叫的 UI 動作，例如顯示天氣卡片或航班資訊，並指定參數與渲染邏輯。 - 在後端設定
CopilotRuntime，並連接你的代理，例如使用LangGraphHttpAgent連接到本機端點。 - 部署應用程式後，啟用產品洞察功能，監控用戶與 AI 代理的互動行為，以優化功能。
