CopilotKitMiddleware,使 LangGraph 图、LangChain 代理或 Deep Agent 可以使用 Agent UI (AG-UI) 传输协议,将工具和消息事件流式传输到聊天 UI,并读取或写入共享的 CopilotKit 状态切片。它还提供 helper,用于在图前面挂载与 CopilotKit 兼容的 HTTP 端点。
当你需要以下能力时,此方法很有用:
- 使用现成聊天运行时,而不是自己连接
stream.messages - 在已部署图旁边添加自定义服务器端点,以支持提供商特定行为
- 从受约束组件注册表渲染结构化生成式 UI
如需 CopilotKit 专用 API、UI 模式和运行时配置,请参阅
CopilotKit 文档。如需 Deep Agent 演练,请参阅 CopilotKit 文档中的
Deep Agents and CopilotKit。
工作方式
从高层看,CopilotKit 位于 React 应用和 LangGraph 部署之间。前端会将对话状态发送到与图 API 并列挂载的自定义/api/copilotkit 路由,该路由将请求转发给 LangGraph,响应会带回助手消息以及组件注册表可渲染的任何结构化 UI payload。
- 照常部署图,可以使用 LangSmith 或 LangGraph 开发服务器。
- 用 HTTP app 扩展部署,在图 API 旁边挂载 CopilotKit 路由。
- 用
CopilotKit包裹前端,并将其指向该自定义运行时 URL。 - 注册动态 UI 组件,并在渲染时将助手响应解析为这些组件。
安装
对于后端端点:使用自定义端点扩展 LangGraph 部署
关键思路是,LangGraph 部署不只提供图服务。它还可以加载 HTTP app,使你可以在部署本身旁边挂载额外路由。 在langgraph.json 中,将 http.app 指向自定义 app 入口点:
app.ts
CopilotRuntime,并使用 LangGraphAgent 将其指回已部署图:
copilotkit.ts
output_schema,并将其转换为模型的结构化 responseFormat:
agent.ts
useAgentContext({ description: "output_schema", ... }) 变得有用。CopilotKit 运行时会转发 schema,代理会将其转换为模型必须遵循的结构化输出契约。
结果是清晰的关注点分离:
- LangGraph 仍负责图执行和持久化
- CopilotKit 负责面向聊天的运行时契约
- 你的自定义端点在一个部署内将二者粘合在一起
LangGraphAgent;Python 图和中间件仍定义工具行为和代理逻辑。
:::
组织前端应用
在前端,用CopilotKit 包裹应用,并将其指向自定义运行时 URL:
runtimeUrl="/api/copilotkit"会将聊天发送到自定义后端路由,而不是直接发送到原始 LangGraph APIuseAgentContext(...)会将 UI schema 发送给代理,让模型知道应生成什么结构化输出格式
注册动态组件
组件注册表位于useChatKit() 中。你可以在这里定义代理允许发出的组件集合,例如卡片、行、列、图表、代码块和按钮。
将助手消息渲染为动态 UI
助手响应到达后,自定义消息渲染器会决定如何显示它。在此示例中:- 助手消息会根据 UI kit schema 解析为结构化 JSON
- 有效的结构化输出会渲染为真实 React 组件
- 用户消息会渲染为普通聊天气泡
- CopilotKit 处理聊天状态和传输
- 自定义渲染器决定助手 payload 如何变成 UI
- Hashbrown 将已验证的结构化数据转换为具体 React 元素
资源
- CopilotKit 文档中的 Deep Agents and CopilotKit:端到端 Next.js、开发服务器和 Deep Agent 路径
- CopilotKit: LangGraph features:生成式 UI、HITL、共享状态
- LangGraph deployment:生产和开发服务器
最佳实践
- 保持自定义端点精简:用它将 CopilotKit 适配到图部署,而不是复制图中已有的业务逻辑
- 显式发送 schema:每次页面挂载时,
useAgentContext都应描述 UI 契约 - 注册受约束的组件集合:只暴露你真正希望模型使用的组件和 props
- 将渲染视为解析步骤:渲染前先根据 schema 解析助手内容
- 保持用户消息为普通消息:只有助手消息需要结构化渲染器;用户消息可以保持普通聊天气泡
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.

