文章目录CopilotKit给 AI Agent 加上 UI 层一行命令搞定它解决什么问题怎么用核心能力支持哪些平台useAgent Hook适合谁用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 copilotkitlatest create只需要一个 LLM 的 key支持 OpenAI、Anthropic、Gemini 等主流模型。核心能力聊天界面提供完整的聊天组件支持消息流式输出、工具调用、agent 响应渲染。样式可以完全自定义。后端工具渲染agent 调用后端工具后返回的结果可以直接渲染成 UI 组件。比如查数据库返回表格agent 不用返回原始数据直接返回一个可交互的表格组件。生成式 UIagent 可以根据用户意图在运行时动态生成和更新 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 HookuseAgent 是核心接口直接对接 AG-UI 协议提供对 agent 连接的完全编程控制const{agent}useAgent({agentId:my_agent});returndivh1{agent.state.city}/h1button 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 也反映了开发者的认可。
