过去两年，你大概已经把「Agent」这个词听出茧子了。

搭一个能查资料、能调工具、能自己规划步骤的 Agent，早不是什么难事。LangGraph、CrewAI、Claude Agent SDK……后端框架一抓一大把。

但有个尴尬的事实，不知道你注意到没有：

你辛辛苦苦调通的 Agent，最后只能挤在一个聊天框里，吐一堆 Markdown 文字。

用户想要一张图，它回你一段「描述这张图」的话。用户想改个订单，它回你一句「请点击此处修改」的说明。你手里明明是个该端茶倒水的「数字员工」，做出来却像个高级一点的搜索框。

问题从来不在模型。问题在最后一公里——Agent 和用户界面之间，那块一直没人认领的地。

今天要讲的 CopilotKit，干的就是这块地。38k star，MIT 协议。它对自己野心的一句话概括是：

The Frontend Stack for Agents & Generative UI.

（Agent 与生成式 UI 的前端技术栈。）

三道接口题，三块拼图

想搞懂 CopilotKit，得先站到它所在的那个坐标系里看一眼。Agent 生态里，一直有三道「接口题」要解：

协议解决什么一句话MCPAgent ↔ 工具 / 数据给 Agent 一双手A2AAgent ↔ Agent让 Agent 之间能对话AG-UIAgent ↔ 用户界面把 Agent 送到用户面前

前两个早就火了。MCP 是 Anthropic 提的，A2A 是 Google 提的。

可第三块——Agent 怎么把它的「想法」变成用户屏幕上真实的界面——一直没人给出标准答案。大家的做法是各写各的：每个应用、每个 Agent，都重新造一遍 Agent 和前端之间那根线。碎片化、重复劳动，还谈不上安全可控。

CopilotKit 就是要当这根线。而且它不只是做了个框架，它干脆把协议也开源了——这就是 AG-UI。

AG-UI：Agent 和界面之间的「USB 口」

AG-UI，全称 Agent–User Interaction Protocol（智能体-用户交互协议）。

它的自我定位很克制，就一句话：

一个开放、轻量、基于事件的协议，标准化 AI Agent 如何连接到面向用户的应用。

靠什么做到的？事件流。

Agent 后端往外吐标准化的事件，大约 16 种——「我吐了一段文字」「我要调一个工具」「我的状态变了」「我需要用户批准」。前端接住这些事件，渲染成界面；反过来，前端也能把事件推回去（用户输入、应用状态、前端工具调用）。中间那层传输不挑食：SSE、WebSocket、Webhook 都行。

你可以把它理解成 Agent 和界面之间的「USB 口」。 接口统一了，谁造的设备都能插，插上就能用。

更关键的是，这个协议不是 CopilotKit 关起门来定的。它最早是 CopilotKit 拉着 LangChain、CrewAI 一起搞出来的，现在已被一长串玩家采纳：

• 大厂： Microsoft Agent Framework、Google ADK、AWS Strands
• 主流框架： LangGraph、Mastra、PydanticAI、Agno、LlamaIndex、AG2
• 社区： Claude Agent SDK（Python / TypeScript）

一句「欧洲的协议」，正在变成「USB 标准」。

（想看效果，去玩它的 Dojo——上面每个 demo 只有 50~200 行代码，直接就能跑。）

CopilotKit 本体：把协议包成「开箱即用」

AG-UI 管的是「线怎么接」，CopilotKit 管的是「界面怎么用」。

官方一句原话总结得很干脆：「AG-UI 处理线协议，CopilotKit 处理 UI 层。」

它是给 React / Angular / Vue / React Native 用的前端 SDK，核心就几个 hook。感受一下它的用法：

123456789101112// 1. 把 App 里的状态「读」给 Agent 看

useCopilotReadable({

description: "当前购物车",

value: cart,

});

// 2. 把 App 里的能力「注册」成 Agent 能调用的动作

useCopilotAction({

name: "addToCart",

parameters: [{ name: "itemId", type: "string" }],

handler: ({ itemId }) => addToCart(itemId), // 真的去改你的应用状态

});重点看第二段。

Agent 调 addToCart，改的是你 App 里真实的购物车，不是聊天框里一句「我已经帮你加购了」的鬼话。

这就是 CopilotKit 反复强调的那句 slogan：「Actions inside the product — whatever it changes stays changed.」（产品里发生的动作，改了就真的改了。）这是它和「聊天外挂」最本质的区别。

真正的杀手锏：Generative UI

如果只能记住 CopilotKit 一个概念，记住这个：Generative UI（生成式 UI）。

普通 AI 产品，Agent 的输出是文字。CopilotKit 的思路是：Agent 的输出，是界面本身。

Agent 想展示一张销售趋势图？它不「写一段描述图的话」，而是直接调用你 App 里已经写好的那个图表组件，把数据当 props 传进去，图表就在对话流里渲染出来了。

它有三种玩法，从「克制」到「放飞」：

模式谁说了算适合Controlled（受控）你写好组件库，Agent 从中挑一个渲染生产环境首选，可控、安全Declarative（声明式）Agent 按一套声明式规格组合你的组件灵活又不失控Open-ended（开放式）Agent 现场自由生成界面演示、探索、原型

最简的一种，连交互逻辑都不用写——只声明「这个组件可以被调用渲染」：

123456useComponent({

name: "WeatherCard",

description: "显示某城市的天气",

parameters: z.object({ city: z.string() }),

render: ({ city }) =>WeatherCard city={city} />,

});Agent 觉得该显示天气了，一块真实的 就出现在对话里。

界面不再是你替 Agent 预设好的模具，而是 Agent 手里可以随时调用的零件。 这一步跨过去，Agent 才算第一次有了「手脚」，而不只是「嘴」。

另外三张牌：状态、批准、多端

除了 Generative UI，CopilotKit 顺手把几个做 Agent 应用时的老大难问题也一起解了：

1. Shared State（共享状态） —— Agent 和 App 之间双向同步状态。Agent 能看到你的界面状态，也能改它；你的界面一变，Agent 也实时知道。读/写还是只读，你说了算。

2. Human-in-the-loop（人在环） —— 凡是靠近真实操作的动作（下单、转账、发邮件），都能卡一道「需要用户批准」。Agent 提方案，人点确认，才执行。这是企业敢把 Agent 放上生产的前提。

3. 后端无关 + 前端多端 —— 这条最「省心」：

• 后端随便换： LangGraph、CrewAI、Google ADK、Claude Agent SDK、Mastra……换 Agent 框架，前端一行不改。
• 前端到处跑： React、Vue、Angular、移动端，甚至 Slack、Teams、WhatsApp——同一套逻辑，多端复用。官方管这叫 **Channels**。

配套还有 CopilotKit Intelligence：把真实对话里的模式，自动沉淀成可复用的「技能」，再加上用户记忆、产品分析。它的定位是帮 Agent 「从每一次交互里学会变好」。

写在最后

过去两年，所有人都在往里看：模型更强了、Agent 更能干了、工具更多了。但往外看的那一步——Agent 怎么优雅地出现在用户面前——一直被认为是「小事」「脏活」。

CopilotKit 的赌注是：这恰恰是决定 Agent 能不能走出 Demo 的那件事。

别再让你的 Agent 死在聊天框里了。它可以是图表、是表单、是一个能真正动手的数字员工——只要有人愿意把「最后一公里」修通。

而这个「修路人」，现在已经有了标准、有了框架、也有了 38k 人在围观。

参考链接

文档：https://docs.copilotkit.ai/

仓库：https://github.com/CopilotKit/CopilotKit

AG-UI 协议：https://github.com/ag-ui-protocol/ag-ui

AG-UI 在线演示（Dojo）：https://dojo.ag-ui.com