無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
建構 AI 驅動的應用程式傳統上意味著將聊天 UI、AI 後端、狀態管理和工具執行拼湊在一起——同時確保 AI 能夠與應用程式的資料和 UI 實際互動。CopilotKit 透過提供一個完整的開源堆疊來解決這個問題，為任何 React 應用程式添加 AI copilot，處理串流 AI 回應、生成式 UI 和共享狀態的複雜管道，讓你專注於應用邏輯。
擁有超過 30,000 個 GitHub Stars，CopilotKit 已成為團隊所稱的「應用內 AI」的領先框架。與在單獨視窗中運作的獨立聊天機器人不同，CopilotKit 的 copilot 深度整合到你的應用程式中——它們可以讀取和修改應用狀態、在其回應中渲染自訂 UI 組件，以及執行影響實際應用程式的動作。
魔法透過 CopilotKit 的 AG-UI 協定（代理生成式 UI）發生，這是一個用於 AI 代理和 UI 組件之間即時通訊的開放規範。此協定使 AI 能夠直接在聊天中渲染動態表單、圖表和表格，並且使用者與這些組件的互動會作為下一個動作的上下文流回代理。
CopilotKit 的核心組件有哪些？
CopilotKit 提供一組設計為無縫協作的 React 組件和鉤子。
根提供者] --> B[CopilotSidebar
完整聊天介面] A --> C[CopilotPopup
浮動小工具] A --> D[useCopilotAction
註冊工具] A --> E[useCopilotReadable
暴露狀態] A --> F[useCopilotChat
程式化控制] B --> G[你的 React 應用] D --> H[後端代理
LangChain / OpenAI / 自訂] E --> H F --> H H --> I[生成式 UI
渲染的組件] I --> J[使用者互動
流回代理]
| 組件/鉤子 | 用途 | 設定 |
|---|---|---|
| CopilotKit（提供者） | 為應用提供 AI 上下文的根包裝器 | API 端點、代理設定 |
| CopilotSidebar | 用於深度 AI 對話的側邊欄面板 | 位置、寬度、自訂標題 |
| CopilotPopup | 用於快速互動的浮動聊天氣泡 | 位置、觸發元素 |
| useCopilotAction | 註冊 AI 可呼叫的工具和動作 | 名稱、描述、參數、處理函數 |
| useCopilotReadable | 向 AI 暴露應用狀態 | 描述、狀態值、類別 |
| useCopilotChat | 對聊天的程式化控制 | 發送訊息、設定上下文、清除歷史 |
AG-UI 協定是如何運作的？
AG-UI 協定是支援 CopilotKit 生成式 UI 能力的架構基礎。它定義了 AI 代理和 UI 組件如何即時通訊。
JSON schema| B[AG-UI 協定] B -->|渲染組件| C[React 組件
表單 / 圖表 / 表格] C -->|使用者互動| D[使用者輸入] D -->|發送互動
回代理| A A -->|更新狀態| E[應用狀態] E -->|代理可讀取| A
| 協定功能 | 描述 |
|---|---|
| UI 串流 | 代理在回應生成期間以 JSON 串流組件定義 |
| 雙向事件 | 使用者與渲染 UI 的互動流回代理 |
| 狀態同步 | 代理可透過 CopilotReadable 讀取和修改應用狀態 |
| 工具執行 | 代理可呼叫任何已註冊的 useCopilotAction 工具 |
| 回應載入 | 代理在工具執行時顯示中間狀態 |
該協定設計為與框架無關。雖然 CopilotKit 的參考實作針對 React，但協定本身可以為任何 UI 框架實作。這意味著你使用 AG-UI 協定建構的後端代理可以服務多個前端。
CopilotKit 支援哪些框架和整合？
CopilotKit 的整合生態系統涵蓋前端框架和後端 AI 編排工具。
| 類別 | 支援的技術 |
|---|---|
| 前端框架 | Next.js 14/15（App Router + Pages Router）、Vite + React、Remix、純 React |
| AI 編排 | LangChain、LangGraph、LangServe、OpenAI Assistants API、自訂 API 端點 |
| 向量儲存 | Pinecone、Chroma、Weaviate、Supabase、自訂向量儲存 |
| LLM 提供商 | Claude（Anthropic）、GPT-4o（OpenAI）、Gemini（Google）、透過 LangChain 的本地模型 |
CopilotKit 如何處理狀態管理？
CopilotKit 的狀態整合是其最強大的功能之一。透過 useCopilotReadable 鉤子，你可以將應用狀態的部分暴露給 AI。AI 然後可以在對話中自然地引用此狀態。
| 狀態面向 | 鉤子/方法 | 範例 |
|---|---|---|
| 向 AI 暴露狀態 | useCopilotReadable | 「購物車目前有 3 件商品，總計 $45.20」 |
| 註冊 AI 動作 | useCopilotAction | 「將商品加入購物車」、「套用折扣碼」 |
| 執行操作 | 動作處理函數 | API 呼叫、資料庫更新、表單提交 |
| 狀態同步 | 透過 React 狀態自動 | AI 在每次變更後看到最新狀態 |
例如，如果你的電子商務應用透過 useCopilotReadable 暴露購物車，AI copilot 可以回答像「我的購物車裡有什麼？」、「總共多少錢？」之類的問題，以及——透過已註冊的動作——「將藍色毛衣中號加入我的購物車。」應用狀態和 AI 對話會自動保持同步。
為什麼要使用 CopilotKit 而不是建構自訂聊天 UI？
建構一個自訂 AI 聊天介面需要解決一系列複雜的問題：將 AI 回應串流到 UI、解析和渲染工具呼叫、處理生成式 UI、維護狀態同步以及管理對話歷史。CopilotKit 開箱即用地解決了所有這些問題。
| 關注點 | 自訂建構 | CopilotKit |
|---|---|---|
| 串流回應 | 手動 SSE/WebSocket 處理 | 內建、最佳化串流 |
| 工具執行 | 工具呼叫的自訂解析器 | 宣告式 useCopilotAction |
| 生成式 UI | 自訂協定設計 | 包含 AG-UI 協定 |
| 狀態同步 | 手動狀態管理 | 透過 useCopilotReadable 自動 |
| React 渲染 | 自訂聊天組件 | CopilotSidebar、CopilotPopup |
| 多模型支援 | 每個模型的自訂介面卡 | LangChain 整合 |
對於建構生產代理應用程式的團隊來說，CopilotKit 消除了數週的基礎設施工作，並為 AI UI 整合最具挑戰性的方面提供了經實戰考驗的模式。
常見問題
什麼是 CopilotKit？ CopilotKit 是一個擁有超過 30,000 個 GitHub Stars 的開源 SDK，用於建構全端代理 AI 應用程式。它提供 React 組件和鉤子，讓你可以添加應用內 AI copilot，支援生成式 UI、共享應用狀態管理和人在迴圈工作流程。它抽象化了串流 AI 回應、工具執行和 AI 與應用程式之間狀態同步的複雜性。
CopilotKit 的核心組件有哪些？ CopilotKit 有四個核心組件：CopilotSidebar（可讀取/寫入應用狀態的聊天側邊欄）、CopilotPopup（用於快速 AI 互動的浮動聊天小工具）、CopilotKit（包裝應用程式的根提供者），以及像 useCopilotAction（註冊 AI 可呼叫的工具）、useCopilotReadable（向 AI 暴露應用狀態）和 useCopilotChat（程式化聊天控制）等鉤子。
什麼是 AG-UI 協定？ AG-UI（代理生成式 UI）協定是 CopilotKit 的開放規範，用於 AI 代理和 UI 組件之間的即時通訊。它定義了代理如何在聊天回應中渲染動態 UI 元素（表單、圖表、表格）、使用者與這些元素的互動如何流回代理，以及代理如何讀取和修改應用狀態。該協定與框架無關，專為互通性而設計。
CopilotKit 支援哪些 React 框架？ CopilotKit 支援所有主要 React 框架，包括 Next.js（App Router 和 Pages Router）、Vite + React、Remix 和純 React。SDK 包含針對伺服器端渲染、串流和部署的框架特定最佳化。對 Vue、Svelte 和其他框架的支援可透過社群或 AG-UI 協定實作獲得。
CopilotKit 支援哪些整合？ CopilotKit 整合多個 AI 提供商和服務。對於 AI 編排，它支援 LangChain、LangGraph、LangServe、OpenAI Assistants API 和自訂端點。對於向量儲存和檢索，它與 Pinecone、Chroma、Weaviate 和 Supabase 整合。對於 LLM，它支援任何可透過 LangChain 或直接 API 整合存取的模型，包括 Claude、GPT-4o、Gemini 和開源模型。
延伸閱讀
- CopilotKit GitHub 倉庫 – 原始碼、議題和範例
- CopilotKit 官方文件 – 設定指南、API 參考和教學
- AG-UI 協定規範 – 用於 AI 到 UI 通訊的開放協定
- CopilotKit 示範應用 – 附原始碼的範例應用
