CopilotKit 是什麼？2026 入門：AI agent 的使用者介面框架

CopilotKit 是做 AI agent 使用者端的開源 React 框架（核心 MIT 授權）。agent 送出 AG-UI 事件，CopilotKit 把它們變成聊天、圖表、表單和批准按鈕。

上一篇講到 .NET 後端已經能送出 AG-UI 事件。事件送出來之後，畫面還是得有人畫，這篇講的就是負責畫面的 CopilotKit。

CopilotKit 幫你做什麼

AG-UI 只是一條管道，只有後端的話，事件送出來沒人接。下面是同一次執行送出的四個事件，切換看看有沒有 CopilotKit 的差別。

除了圖上這四種，同一個 agent 還能接到多個入口（網頁、Teams／Slack、行動 app），不用每個入口各寫一套。

為什麼這麼多人用

AG-UI 是 CopilotKit 提出的協議，現在 Microsoft Agent Framework、LangGraph、Google ADK、AWS Strands、Mastra 都會送 AG-UI 事件，所以 CopilotKit 的前端接哪一家的 agent 都行。公司裡同時跑好幾套 agent 時，前端統一用它很省事。

agent app 最難寫的也是前端：串流顯示、狀態更新要照順序套用、生成式 UI、暫停等批准，這些它都做好了，核心又是開源免費，可以自己架。

它怎麼接到你的 agent

中間多了一個 Copilot Runtime。用 CopilotKit 會需要 Node，原因就在這裡。

前端是 Next.js 的話，Runtime 只是其中一個 API route，不用另開一台 server。想在正式環境跳過 Runtime、讓元件直連 agent，要用 selfManagedAgents，屬於付費的 Enterprise 方案。各種接法的比較在上一篇。

最小設定（v2）

Runtime 放在 Next.js 的 catch-all route，把 .NET 的 AG-UI endpoint 註冊成一個 HttpAgent。

// app/api/copilotkit/[[...slug]]/route.ts
import {
  CopilotRuntime,
  createCopilotRuntimeHandler,
  InMemoryAgentRunner,
} from '@copilotkit/runtime/v2'
import { HttpAgent } from '@ag-ui/client'

const runtime = new CopilotRuntime({
  agents: { default: new HttpAgent({ url: 'http://localhost:5001/' }) }, // .NET 的 AG-UI endpoint
  runner: new InMemoryAgentRunner(),
})

const handler = createCopilotRuntimeHandler({ runtime, basePath: '/api/copilotkit' })

export const GET = handler
export const POST = handler
export const PATCH = handler
export const DELETE = handler

頁面放一個聊天元件：

import { CopilotKit, CopilotChat } from '@copilotkit/react-core/v2'
import '@copilotkit/react-core/v2/styles.css'

export default function Page() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit" useSingleEndpoint={false}>
      <CopilotChat />
    </CopilotKit>
  )
}

從 v1 升上來的話，useCopilotAction 還能用，但建議改成 useFrontendTool，需要人批准的工具用 useHumanInTheLoop。

費用

核心開源免費。付費方案有 Pro（每月 39 美元）、Team（每人 100 美元）和 Enterprise。對話紀錄每個方案都有，免費版的保存期比較短；分析、自動學習和 selfManagedAgents 直連只在 Enterprise。

該不該用

我的判斷分兩步。先看需不需要 AG-UI 讓它變便宜的那三種功能：看得到 agent 在做什麼並能中途批准、同一個 agent 有多個入口、agent 直接操作 app 畫面。都不需要就用一般 SSE。需要的話，再決定使用者端要買現成的還是自己寫。

對客戶的產品選 CopilotKit，這正是它在賣的東西，自己寫的成本更高；.NET 端的套件還在 prerelease，要預留 API 改名的空間。內部工具只要聊天加進度，自己用 @ag-ui/client 寫一層簡單的 UI 就好。

常見問題

CopilotKit 可以接 .NET 後端嗎？

可以。.NET 用 Microsoft Agent Framework 的 MapAGUIServer 或 AGUI.Server 開一個 AG-UI endpoint，在 CopilotKit 的 Runtime 裡用 HttpAgent 註冊它就好。

用 CopilotKit 一定要 Node 嗎？

要。CopilotKit 的元件只連自家的 Runtime，Runtime 只有 Node 版；前端是 Next.js 的話，它只是其中一個 API route。正式環境想跳過 Runtime，要用付費的 selfManagedAgents。

useCopilotAction 還能用嗎？

還能用，但 v2 建議改成 useFrontendTool；需要使用者批准的工具用 useHumanInTheLoop。

內部工具需要 CopilotKit 嗎？

只要聊天加進度顯示的話不需要，用 @ag-ui/client 自己寫一層簡單的 UI，或直接用一般 SSE 就夠。

參考資料

• CopilotKit 文件：Copilot Runtime（Microsoft Agent Framework .NET）
• CopilotKit 文件：Self-managed agents
• CopilotKit 文件：從 v1 升級到 v2
• CopilotKit 定價
• AG-UI 文件：支援的框架
• CopilotKit GitHub