CopilotKit：给 AI Agent 加上 UI 层，一行命令搞定

CopilotKit 在 GitHub 上已经拿到 35.5K Star 了。

这是一个用来构建 AI Agent 应用的 SDK。做 AI 应用的人应该都踩过同一个坑：后端 agent 逻辑写完了，前端对接还有一堆活。聊天界面要自己搭，状态同步要自己写，人工审批流程要自己接。每换一个前端框架，又得重新适配一遍。

CopilotKit 把这些全封装了。它提供了一套 SDK，内置了聊天界面、状态同步、人工审批、生成式 UI 这些能力。更关键的是，它已经从一个 React 库扩展成了多平台框架，同一套 agent 逻辑可以跑在 Web、移动端、Slack 里。

它解决什么问题

做 agent 应用，最难的不是模型调用，是 UI 这一层。agent 要跟用户交互，要展示数据，要等用户确认，这些全得在前端实现。而且不同平台的实现方式不一样，React 一套，移动端一套，Slack 又是一套。

CopilotKit 是 AG-UI 协议的发起方。这个协议定义了 agent 和 UI 之间的通信规范，Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 都已经接入。有了这个协议，agent 逻辑和前端展示彻底解耦，换框架不用动 agent 代码。

怎么用

安装一行命令，五分钟跑起来：

npx copilotkit@latest create

只需要一个 LLM 的 key，支持 OpenAI、Anthropic、Gemini 等主流模型。

核心能力

聊天界面：提供完整的聊天组件，支持消息流式输出、工具调用、agent 响应渲染。样式可以完全自定义。

后端工具渲染：agent 调用后端工具后，返回的结果可以直接渲染成 UI 组件。比如查数据库返回表格，agent 不用返回原始数据，直接返回一个可交互的表格组件。

生成式 UI：agent 可以根据用户意图，在运行时动态生成和更新 UI 组件。支持三种模式——静态模式走 AG-UI 协议，声明式模式走 A2UI 规范，开放式模式走 MCP 应用和 JSON。

共享状态：agent 和 UI 组件共享一个状态层，双方都能实时读写。agent 改了状态，UI 立刻更新；用户在 UI 上操作，agent 也能立刻感知。

人工审批：agent 执行到关键步骤时，可以暂停并等待用户确认、修改或补充输入。整个流程自动衔接，不需要额外的状态管理。

自我学习：还在早期阶段。agent 能从用户反馈中持续改进，不需要微调模型，通过上下文内的强化学习实现。

支持哪些平台

平台	状态
React / Next.js	已正式发布
Angular	已支持
Vue	已支持
React Native	已支持
Slack / MS Teams	测试中

一套 agent 代码，同时跑在网页、手机和 Slack 里。AG-UI 负责协议层，CopilotKit 负责各平台的 UI 适配。

useAgent Hook

useAgent 是核心接口，直接对接 AG-UI 协议，提供对 agent 连接的完全编程控制：

const { agent } = useAgent({ agentId: "my_agent" });

return <div>
  <h1>{agent.state.city}</h1>
  <button onClick={() => agent.setState({ city: "NYC" })}>
    Set City
  </button>
</div>

可以读取 agent 状态、更新状态、监听状态变化。agent 运行过程中，UI 可以实时响应。

适合谁用

正在做 AI 应用、需要给 agent 加界面的团队。特别是需要支持多平台的场景——不想为 Web、移动端、Slack 各写一套 UI 逻辑的团队。CopilotKit 的 agent 逻辑写一次，前端适配由框架处理。

AG-UI 协议已经被多家大厂采用，说明这套方案在生产环境里是跑通了的。35.5K Star 也反映了开发者的认可。

写一次，前端适配由框架处理。

AG-UI 协议已经被多家大厂采用，说明这套方案在生产环境里是跑通了的。35.5K Star 也反映了开发者的认可。