CopilotKit：用於建構應用內 AI Copilot 的開源前端堆疊

建構 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 組件和鉤子。

graph TD
    A[CopilotKit<br>根提供者] --> B[CopilotSidebar<br>完整聊天介面]
    A --> C[CopilotPopup<br>浮動小工具]
    A --> D[useCopilotAction<br>註冊工具]
    A --> E[useCopilotReadable<br>暴露狀態]
    A --> F[useCopilotChat<br>程式化控制]
    B --> G[你的 React 應用]
    D --> H[後端代理<br>LangChain / OpenAI / 自訂]
    E --> H
    F --> H
    H --> I[生成式 UI<br>渲染的組件]
    I --> J[使用者互動<br>流回代理]

AG-UI 協定是如何運作的？

AG-UI 協定是支援 CopilotKit 生成式 UI 能力的架構基礎。它定義了 AI 代理和 UI 組件如何即時通訊。

graph LR
    A[AI 代理] -->|串流 UI 定義<br>JSON schema| B[AG-UI 協定]
    B -->|渲染組件| C[React 組件<br>表單 / 圖表 / 表格]
    C -->|使用者互動| D[使用者輸入]
    D -->|發送互動<br>回代理| A
    A -->|更新狀態| E[應用狀態]
    E -->|代理可讀取| A

該協定設計為與框架無關。雖然 CopilotKit 的參考實作針對 React，但協定本身可以為任何 UI 框架實作。這意味著你使用 AG-UI 協定建構的後端代理可以服務多個前端。

CopilotKit 支援哪些框架和整合？

CopilotKit 的整合生態系統涵蓋前端框架和後端 AI 編排工具。

CopilotKit 如何處理狀態管理？

CopilotKit 的狀態整合是其最強大的功能之一。透過 useCopilotReadable 鉤子，你可以將應用狀態的部分暴露給 AI。AI 然後可以在對話中自然地引用此狀態。

例如，如果你的電子商務應用透過 useCopilotReadable 暴露購物車，AI copilot 可以回答像「我的購物車裡有什麼？」、「總共多少錢？」之類的問題，以及——透過已註冊的動作——「將藍色毛衣中號加入我的購物車。」應用狀態和 AI 對話會自動保持同步。

為什麼要使用 CopilotKit 而不是建構自訂聊天 UI？

建構一個自訂 AI 聊天介面需要解決一系列複雜的問題：將 AI 回應串流到 UI、解析和渲染工具呼叫、處理生成式 UI、維護狀態同步以及管理對話歷史。CopilotKit 開箱即用地解決了所有這些問題。

對於建構生產代理應用程式的團隊來說，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 示範應用 – 附原始碼的範例應用