CopilotKit 是一个专为 Agent 应用设计的前端框架它整合了界面交互、状态管理、工具调用和审批流程简化了 Agent 应用的开发。通过 AG-UI 协议CopilotKit 实现了前端与 Agent 的无缝连接支持流式事件处理和前端工具调用使 Agent 应用更加安全、高效。本文介绍了 CopilotKit 的核心功能包括 Chat UI、Runtime、State、Tools 和 Generative UI并探讨了它在不同场景下的应用和优势适合希望构建复杂 Agent 应用的前端团队。Agent 应用的难点已经从“能不能回一句话”转到“能不能安全地读界面、改状态、渲染结果、等待用户审批”。CopilotKit 处理的正是这层前端工程。CopilotKit 把 Agent 应用里分散在前端、后端、协议、运行时里的几件事放到了一条线上用户在界面上输入Agent 能看到上下文Agent 执行过程中前端能收到流式事件Agent 可以调用浏览器侧工具也可以让后端工具返回 UIUI 和 Agent 共享状态用户可以介入流程同一个 Agent 后端可以被 Web、移动端、Slack、Teams 这类不同 surface 使用。这套东西对大前端团队有现实意义。过去我们接 AI 能力常见做法是先挂一个 chat widget再慢慢给它加工具、加上下文、加审批、加埋点。CopilotKit 的方向更像是把这些散件先抽成 Agent UI 的基础设施。图 1CopilotKit 在 Agent 交互流中的位置它解决什么问题CopilotKit 官方给自己的定位是 frontend stack for agents and generative UI。用于构建 全栈 AI 原生应用、生成式 UI 和 聊天应用。CopilotKit/CopilotKit在 GitHub 上大约有 33.7k stars、4.2k forksMIT License最近 release 到v1.59.5。repo 仍在高频更新2026 年 6 月初连续发布了多个1.59.x版本。从功能上看它覆盖的是 Agent 应用里最容易被低估的五层层CopilotKit 做什么团队还要自己负责什么Chat UI预置 chat/sidebar、流式消息、tool call 展示产品体验、业务文案、错误态Runtime后端 endpoint、agent routing、middleware、proxy agent认证、租户隔离、部署策略StateUI 和 Agent 的 shared statestate schema、并发语义、回滚策略Toolsfrontend tools、backend tool rendering权限、审计、幂等性Generative UIReact component rendering、A2UI、MCP Apps组件白名单、设计系统映射、安全边界这也是它和普通 UI SDK 的差别。普通 UI SDK 解决“怎么显示聊天消息”CopilotKit 还要解决“Agent 执行时如何和用户界面互相影响”。图 2CopilotKit 负责 Agent UI 这一层AG-UI 是底座CopilotKit 现在的协议底座是 AG-UI。官方文档里有一句关键描述CopilotKit built on AG-UI protocol。消息、状态更新、tool calls 等都通过 AG-UI events 流动。前端侧拿到的agent是 AG-UI 的AbstractAgent可以读messages、state、isRunning也可以 subscribe 事件。一个简化后的前端代码大概是这样import { useAgent } from copilotkit/react-core/v2; export function AgentInfo() { const { agent } useAgent(); return ( div pAgent ID: {agent.agentId}/p pThread ID: {agent.threadId}/p pStatus: {agent.isRunning ? Running : Idle}/p pMessages: {agent.messages.length}/p /div ); }这个抽象对前端很重要。它把 Agent 从“一个远端接口”变成“一个可订阅、可读状态、可驱动 UI 的对象”。CopilotKit Runtime 则负责把这个对象接到后端 Agent。官方文档称之为 proxy pattern前端启动时访问 Runtime 的/infoendpoint 发现可用 agents然后包装成ProxiedCopilotRuntimeAgent当你运行 Agent 时前端通过 HTTP POST 请求 RuntimeRuntime 再把 AG-UI events 以 SSE 流式返回。服务端最小结构类似这样import { CopilotRuntime, ExperimentalEmptyAdapter, copilotRuntimeNextJSAppRouterEndpoint, } from copilotkit/runtime; import { NextRequest } from next/server; const serviceAdapter new ExperimentalEmptyAdapter(); const runtime new CopilotRuntime({ agents: { // your agents go here }, }); export const POST async (req: NextRequest) { const { handleRequest } copilotRuntimeNextJSAppRouterEndpoint({ runtime, serviceAdapter, endpoint: /api/copilotkit, }); return handleRequest(req); };这层 Runtime 的价值远超转发。认证、安全默认值、AG-UI middleware、agent routing、threads、observability、inspector 这类能力都挂在这里。官方也明确提醒直接连接 AG-UI agent 主要用于开发和原型生产环境要自己承担认证和生态能力缺失的风险。前端工具很关键Agent 要进入真实业务界面第一步通常是读上下文。过去很多 Web AI 功能的接法是把当前页面的信息拼成 prompt 发给模型。这个方式可以跑 demo但工程上很快会遇到问题哪些状态能读哪些动作能执行执行结果怎么回传失败怎么展示CopilotKit 提供了 frontend tools。你可以在浏览器侧定义一个工具让 Agent 调用逻辑在用户浏览器里执行import { z } from zod; import { useFrontendTool } from copilotkit/react-core/v2; useFrontendTool({ name: sayHello, description: Say hello to the user, parameters: z.object({ name: z.string().describe(The name of the user to say hello to), }), handler: async ({ name }) { alert(Hello, ${name}!); return Said hello to ${name}!; }, });官方文档列的场景包括读写 React component state、访问localStorage/sessionStorage/ cookies、触发 UI 更新或动画、和第三方前端库交互。这对客户端/前端团队的启发很直接Agent 的工具不应该全部在服务端。很多动作天然发生在用户当前界面里例如读取当前筛选条件、表格选中项、画布里的节点在不刷新页面的情况下调整 UI 状态触发一次本地预览、滚动、聚焦、复制把用户确认后的结果写回前端状态再交给后端继续执行。但这里也有边界。浏览器侧工具离用户上下文最近也最容易碰到隐私和权限问题。前端工具的设计应该默认带上参数 schema、权限说明、可审计返回值避免把“页面里能做的事”全部暴露给 Agent。Shared State 是分水岭CopilotKit 的 Shared State 值得单独看。它让 UI 和 Agent execution 之间形成双向连接。Agent 的进度和中间结果可以反映到 UI用户在 UI 里更新的输入也可以反映到 Agent 执行里。这和单纯的聊天上下文不同。聊天上下文是消息历史Shared State 是业务状态。对一个旅行规划、表单填写、数据分析、看板整理类应用来说Agent 不能只会说“我建议你选 A”。它需要把 A 写进状态UI 立刻显示出来用户改成 B 后Agent 后续步骤要读到 B。这类状态同步如果自己做前端会很快写出一套临时协议LLM 输出 JSON → 前端解析 → patch 本地状态 → 再把状态塞回下一轮 prompt这条路能跑通但维护成本高。状态格式变了、多个工具同时写、用户中途编辑、Agent 失败回滚、线程恢复都会把临时协议逼成半套 runtime。CopilotKit 把它抽出来之后前端团队至少可以把问题变得显性哪些 state 是 Agent 可读的哪些 state 是 Agent 可写的用户和 Agent 同时修改时怎么处理state 更新是否需要审计thread 恢复后 state 是否跟着恢复。这些问题比“接哪个大模型”更贴近生产环境。图 3Shared State、Frontend Tools 和 HITL 形成闭环UI 生成要收敛CopilotKit 的 Generative UI 路线有几个层次。最可控的一层是让工具返回或触发已定义好的 React component。比如 Agent 调用showWeather前端渲染一个天气卡片import { z } from zod; import { useComponent } from copilotkit/react-core/v2; useComponent({ name: showWeather, description: Display a weather card., parameters: z.object({ city: z.string(), temp: z.number(), }), render: ({ city, temp }) ( div classNamerounded border p-3 div classNamefont-medium{city}/div div classNametext-2xl{temp}°F/div /div ), });这一层适合大多数业务应用组件由团队定义Agent 只填参数。设计系统、权限边界、可测试性都比较可控。更开放的一层是 A2UI。CopilotKit 文档把 A2UI 描述为 Google 的 declarative、LLM-friendly Generative UI specification特点是 JSONL-based、platform-agnostic、streaming-first。CopilotKit Runtime 可以注入render_a2ui工具让 Agent 产出 A2UI surface前端 renderer 自动渲染。后端启用方式类似import { CopilotRuntime } from copilotkit/runtime; const runtime new CopilotRuntime({ agents: { default: myAgent }, a2ui: { injectA2UITool: true, }, });前端还可以传入自定义 catalog把业务组件以 schema 形式暴露给 Agent。这条路线的优势是跨平台和流式渲染。它的风险也很明确UI 生成越开放设计系统一致性、安全边界、组件能力描述、错误恢复就越重要。对业务团队来说合理路线通常是从固定组件和小 catalog 开始先把 Agent 可用组件收敛在白名单里。HITL 要做真审批Human-in-the-loop 在 CopilotKit 里也是一等能力。官方文档强调Agent 可以在执行中请求人类输入或审批适合 quality control、edge cases、expert input 和 reliability。这个方向容易被做浅弹一个确认框让用户点“确认”。生产里的 HITL 应该至少解释三件事Agent 准备执行什么动作这个动作会影响哪些数据或用户用户批准后系统如何记录和回滚。前端在这里承担的责任很重。HITL 同时是后端 workflow 的暂停点也是用户理解 Agent 行为的界面。一个审批卡片如果写得含糊用户点了确认风险仍然留在系统里。CopilotKit 的价值在于把 HITL 放进 Agent UI 流里减少团队在 LangGraph、后端任务和前端弹窗之间拼接临时状态的成本。和现有方案怎么分工如果你已经在用 Vercel AI SDK、LangChain、LangGraph、Mastra、CrewAI、PydanticAI 之类工具CopilotKit 的位置并不冲突。更准确的分层是问题更靠近谁模型调用、stream text、tool callingVercel AI SDK / provider SDKAgent graph、workflow、memory、tool orchestrationLangGraph / Mastra / CrewAI / PydanticAI 等Agent 和用户界面的事件协议AG-UI前端 Chat UI、Shared State、Generative UI、HITLCopilotKit业务权限、数据治理、审计应用团队CopilotKit README 里也强调它能接很多 agent backend。repo 的 examples/integrations 目录能看到 LangGraph、Mastra、Pydantic AI、ADK、Strands、CrewAI、Agno、AgentCore、A2A/A2UI、MCP Apps 等集成示例。所以它更像 Agent 应用的前端中间层。底层 agent 怎么推理、怎么规划、怎么调用业务工具可以继续留给原有框架CopilotKit 负责把它变成用户能看、能改、能审批、能持续交互的产品界面。适合谁用我会把 CopilotKit 推荐给三类团队。第一类是已经有 Agent backend但前端还停留在聊天框阶段的团队。此时继续写 message list 收益有限更该补齐 state、tool、UI rendering、HITL 这些交互能力。第二类是做 B 端应用、数据工具、工作台、内部系统的前端团队。这类场景里Agent 经常要读表格、改筛选、生成卡片、等待审批、保留执行历史。CopilotKit 的 shared state 和 frontend tools 会比单纯调用 LLM API 更贴近问题本身。第三类是想探索 Generative UI但又不想牺牲设计系统的团队。先用固定 component rendering再逐步把小范围组件 catalog 暴露给 A2UI是相对稳妥的路线。暂时不太适合的场景也很明确只需要一个极简 AI 问答入口用现成 chat SDK 更轻后端还没有清晰的 agent/tool 设计先接 CopilotKit 也救不了业务流程对安全审计、数据隔离、权限控制没有投入浏览器侧工具和 UI 生成会放大风险非 React / Next.js 技术栈要先评估成熟度README 虽然写到 Angular、Vue、React Native supported但 React 生态明显更完整。结论Agent 进入业务系统后用户界面要承载上下文、状态、工具、审批、可视化结果和错误恢复。前端团队如果继续把 AI 当成一个远端 completion API很快就会在这些地方补一堆临时胶水。CopilotKit 的工程判断是Agent UI 需要自己的技术栈。它把 Agent 应用的前端问题拆得比较准。这个判断我认同。尤其对大前端和客户端团队来说下一阶段的机会会落在真实产品界面的交互协议、状态边界、组件系统和安全审批上。Agent 应用成熟之后前端不会只负责展示模型回复。前端会成为 Agent 的上下文入口、状态控制面和用户授权界面。如何学习大模型 AI 由于新岗位的生产效率要优于被取代岗位的生产效率所以实际上整个社会的生产效率是提升的。但是具体到个人只能说是“最先掌握AI的人将会比较晚掌握AI的人有竞争优势”。这句话放在计算机、互联网、移动互联网的开局时期都是一样的道理。我在一线科技企业深耕十二载见证过太多因技术卡位而跃迁的案例。那些率先拥抱 AI 的同事早已在效率与薪资上形成代际优势我意识到有很多经验和知识值得分享给大家也可以通过我们的能力和经验解答大家在大模型的学习中的很多困惑。我们整理出这套AI 大模型突围资料包✅ 从零到一的 AI 学习路径图✅ 大模型调优实战手册附医疗/金融等大厂真实案例✅ 百度/阿里专家闭门录播课✅ 大模型当下最新行业报告✅ 真实大厂面试真题✅ 2026 最新岗位需求图谱所有资料 ⚡️ 朋友们如果有需要《AI大模型入门进阶学习资源包》下方扫码获取~① 全套AI大模型应用开发视频教程包含提示工程、RAG、LangChain、Agent、模型微调与部署、DeepSeek等技术点② 大模型系统化学习路线作为学习AI大模型技术的新手方向至关重要。 正确的学习路线可以为你节省时间少走弯路方向不对努力白费。这里我给大家准备了一份最科学最系统的学习成长路线图和学习规划带你从零基础入门到精通③ 大模型学习书籍文档学习AI大模型离不开书籍文档我精选了一系列大模型技术的书籍和学习文档电子版它们由领域内的顶尖专家撰写内容全面、深入、详尽为你学习大模型提供坚实的理论基础。④ AI大模型最新行业报告2025最新行业报告针对不同行业的现状、趋势、问题、机会等进行系统地调研和评估以了解哪些行业更适合引入大模型的技术和应用以及在哪些方面可以发挥大模型的优势。⑤ 大模型项目实战配套源码学以致用在项目实战中检验和巩固你所学到的知识同时为你找工作就业和职业发展打下坚实的基础。⑥ 大模型大厂面试真题面试不仅是技术的较量更需要充分的准备。在你已经掌握了大模型技术之后就需要开始准备面试我精心整理了一份大模型面试题库涵盖当前面试中可能遇到的各种技术问题让你在面试中游刃有余。以上资料如何领取为什么大家都在学大模型最近科技巨头英特尔宣布裁员2万人传统岗位不断缩减但AI相关技术岗疯狂扩招有3-5年经验大厂薪资就能给到50K*20薪不出1年“有AI项目经验”将成为投递简历的门槛。风口之下与其像“温水煮青蛙”一样坐等被行业淘汰不如先人一步掌握AI大模型原理应用技术项目实操经验“顺风”翻盘这些资料真的有用吗这份资料由我和鲁为民博士(北京清华大学学士和美国加州理工学院博士)共同整理现任上海殷泊信息科技CEO其创立的MoPaaS云平台获Forrester全球’强劲表现者’认证服务航天科工、国家电网等1000企业以第一作者在IEEE Transactions发表论文50篇获NASA JPL火星探测系统强化学习专利等35项中美专利。本套AI大模型课程由清华大学-加州理工双料博士、吴文俊人工智能奖得主鲁为民教授领衔研发。资料内容涵盖了从入门到进阶的各类视频教程和实战项目无论你是小白还是有些技术基础的技术人员这份资料都绝对能帮助你提升薪资待遇转行大模型岗位。以上全套大模型资料如何领取