为什么每次给应用集成AI智能体，最终都变成一个聊天弹窗？
CopilotKit为解决这个问题押注了2700万美元。答案是协议——而这个谜题的最后一块拼图刚刚到位了。
第三个协议到位了
AI智能体基础设施有三个核心通信问题。
第一个：智能体怎么使用工具——Anthropic的MCP（模型上下文协议）解决了这个问题。它让智能体能发邮件、在GitHub提PR，是那个连接器。
第二个：智能体之间怎么协作——Google的A2A（Agent-to-Agent）协议负责这块。
但第三个问题一直悬而未决。智能体怎么和用户实时通信？这个空白被CopilotKit的AG-UI填上了。
AG-UI是MIT开源协议。它标准化了智能体与用户界面的通信方式——流式文本传输、应用状态共享、动态UI组件生成。LangGraph、CrewAI、微软Agent Framework、Google ADK、AWS Strands、Mastra、PydanticAI等9个以上主流智能体框架都支持AG-UI。
"人类与AI智能体之间的标准接口——一个此前从未存在过的基础设施层。"
— AG-UI系列A投资方
和聊天弹窗有什么区别？
传统方式是这样的：先做应用，再「附加」一个AI聊天窗口。智能体完全不知道应用在做什么，不知道用户在看什么数据，想完成什么任务——什么都不共享。
| 传统聊天弹窗 | AG-UI方式 | |
|---|---|---|
| 应用状态感知 | 无 | 实时同步 |
| UI生成 | 仅文本 | 动态UI组件 |
| 人机协作 | 有限 | 内置审批门控 |
| 框架支持 | 特定厂商锁定 | 9+框架无关 |
| 企业安全 | 需自行实现 | CORS·认证·审计内置 |
AG-UI的核心优势是智能体住在应用里面。用useCopilotReadable钩子把应用的当前状态共享给智能体，智能体就能知道「这个用户正在看Q3销售数据」，然后根据上下文响应。它可以直接渲染你定义的自定义饼图组件，而不是返回一段文字。
这就是为什么Deutsche Telekom、Docusign、Cisco、S&P Global都在用它。智能体在你现有的设计系统内生成UI，这样就能在保持品牌一致性的同时部署AI。
现在就开始的方法
前置准备
有React项目就够了。Node.js环境加上npm/yarn/pnpm任选其一即可。
- 初始化项目
在终端运行npx copilotkit@latest create。已有Next.js/React项目就npm install @copilotkit/react-core @copilotkit/react-ui。 - 包裹CopilotKit Provider
用<CopilotKit runtimeUrl="/api/copilotkit">包裹应用根节点。这是智能体和UI之间的桥梁。 - 共享应用状态
用useCopilotReadable({ description: "当前数据", value: yourData })给智能体传递上下文。从这一刻起，智能体就能看见应用的状态了。 - 连接智能体后端
把LangGraph、Mastra、LangChain通过AG-UI适配器连接。各框架的快速入门指南在docs.copilotkit.ai。 - 添加对话UI或自定义UI
用<CopilotPopup />快速上手，或用Generative UI让智能体直接在应用内渲染自定义组件。
注意
AG-UI是智能体-UI通信标准，不是LLM。你还需要自己配置LLM的API密钥（OpenAI、Anthropic等）。CopilotKit本身不提供AI模型。
想深入了解？
CopilotKit官方文档 从快速入门到企业部署的完整指南 docs.copilotkit.ai
AG-UI Protocol GitHub 协议规范、事件类型、各框架适配器完整列表 github.com
CopilotKit GitHub（40K+ stars） 源代码、示例应用、React/Angular/Vue组件库 github.com
AG-UI发布博客 协议诞生背景及与MCP、A2A的职责划分 copilotkit.ai
TechCrunch系列A报道 2700万美元融资背景、投资方评论和市场背景 techcrunch.com
