摘要：通过 Pydantic AI 可以很快的编写一个 Agent 应用，也可以像用 Pydantic-AI 打造你的专属 CLI 编码助手一样快速的实现一个命令行的界面，但是当与 Web 界面结合时，我们发现还有许多工作要做。
通过 Pydantic AI 可以很快的编写一个 Agent 应用，也可以像用 Pydantic-AI 打造你的专属 CLI 编码助手一样快速的实现一个命令行的界面，但是当与 Web 界面结合时，我们发现还有许多工作要做。
我们需要搞好后端 Agent 与前端界面的通讯，需要将 Agent 的返回数据展示到前端页面。虽然 Streamlit 和 Gradio 这样的框架能快速的创建一些美观的界面，但是似乎不太适合用于生产环境。
所以有人发明了 CopilotKit 以及其背后的 AG-UI 协议。Agent 和工具之间使用 MCP，Agent 之间用 A2A ，而 Agent 和用户之间则使用 AG-UI：
通过 AG-UI，我们可以直接将 Agent 的内容与 Web UI 结合起来。
下面以 Pydantic AI 为例，一窥 AG-UI 可以做什么。
编写 Agent
参考 Hello Pydantic AI，我们编写一个 agent.py：这个 agent 运行需要安装依赖：
另外，运行前需要设置 GOOGLE_API_KEY 环境变量。执行 uv run agent.py，会在本机的 8000 端口暴露 Agent 协议服务。编写前端
CopilotKit 的多数例子是基于 Next.js 的，各位可以自学快速入门。
在一个 Next.js 项目中，安装依赖：
然后设置 CopilotKit Runtime。创建 app/api/copilotkit/route.ts这创建了一个 的 POST API，这个 API 与前面创建的 Agent 后端关联。然后我们修改 app/layout.tsx：
然后编辑 app/page.tsx：
然后执行 npm run dev 可以运行前端。
可以看到一个聊天界面，发挥作用的正是刚才用 Pydantic AI 编写的 Agent。
总结
CopilotKit 有一些内置的组件，也可以自定义组件的样式，可以自定义 Action，可以为特定的 Agent 调用配置 Action，用不同的组件展示返回结果。这些都是自定义 UI 所常见的需求。
对于前端能力薄弱的开发团队， CopilotKit 无疑可以加快开发速度，而且这种标准化的前后台交互方式也能减少 AI 应用的维护成本。
不过，只有越来越多的产品支持 AG-UI 协议，它才能发挥更大的作用。比如说想使用 shadcn 的组件，不过没有 Google 到。
来源：消散在言语中