深入了解 AG-UI：开启 AI 代理与前端应用交互新时代
在当今数字化的浪潮中，AI 技术的发展日新月异，AI 代理与前端应用的交互需求也日益增长。AG-UI 作为一种新兴的协议，为解决这一交互问题提供了一种简单而灵活的解决方案。本文将深入探讨 AG-UI 的各个方面，包括其定义、特点、适用场景、框架支持、使用示例以及如何开始使用和贡献等内容，帮助你全面了解 AG-UI 并掌握其使用方法。
一、AG-UI 简介
1.1 什么是 AG-UI？
AG-UI 是一种轻量级、基于事件的协议，它标准化了 AI 代理与前端应用的连接方式。简单来说，它就像是一座桥梁，让 AI 代理和用户界面能够无缝地进行沟通和协作。这个协议的设计目标是既简单又灵活，以适应不同的应用场景和技术环境。
1.2 AG-UI 的核心特点
-
事件驱动：在 AI 代理执行任务的过程中，后端会发出与 AG-UI 约 16 种标准事件类型兼容的事件。同时，代理后端也可以接受几种简单的与 AG-UI 兼容的输入作为参数。这种事件驱动的方式使得系统能够实时响应和处理各种情况。 -
灵活的中间件层：AG-UI 包含一个灵活的中间件层，它确保了在不同环境下的兼容性。它可以与任何事件传输方式（如 Server-Sent Events、WebSockets、Webhooks 等）配合使用，并且允许对事件格式进行宽松匹配，从而实现了广泛的代理和应用之间的互操作性。 -
参考实现和默认连接器：为了帮助团队快速上手，AG-UI 提供了一个参考 HTTP 实现和默认连接器，让开发者可以更轻松地开始使用这个协议。
1.3 AG-UI 的优势
AG-UI 是基于实际需求和构建应用内代理交互的实践经验开发的。它在整个代理协议栈中具有独特的地位，与其他两个顶级代理协议（MCP 和 A2A）相互补充。MCP 为代理提供工具，A2A 允许代理之间进行通信，而 AG-UI 则将代理引入到面向用户的应用程序中。
二、AG-UI 的适用场景
2.1 实时代理聊天
AG-UI 支持实时的代理聊天，并且可以实现消息的流式传输。这意味着在聊天过程中，消息可以实时显示，就像我们在日常生活中与他人聊天一样自然流畅。无论是客户服务聊天机器人还是智能助手，都可以通过 AG-UI 实现高效的实时交互。
2.2 双向状态同步
在一些应用场景中，需要确保代理和前端应用的状态保持一致。AG-UI 提供了双向状态同步的功能，使得代理和前端应用能够实时更新彼此的状态，避免出现数据不一致的问题。例如，在一个协作式的项目管理应用中，代理和用户界面可以通过双向状态同步功能实时更新任务的状态和进度。
2.3 生成式 UI 和结构化消息
AG-UI 支持生成式 UI 和结构化消息的处理。这意味着可以根据代理的输出动态生成用户界面，并且可以对消息进行结构化处理，使得信息的展示更加清晰和有条理。例如，在一个智能购物应用中，代理可以根据用户的需求生成商品推荐列表，并以结构化的方式展示给用户。
2.4 实时上下文丰富
在交互过程中，实时上下文的丰富非常重要。AG-UI 可以实时获取和更新上下文信息，使得代理能够根据当前的上下文做出更准确的响应。例如，在一个智能旅游应用中，代理可以根据用户当前的位置和旅游偏好，实时提供相关的旅游景点推荐和路线规划。
2.5 前端工具集成
AG-UI 可以与前端工具进行集成，为开发者提供更多的便利。例如，可以集成一些常用的前端开发框架和工具，如 React、Vue.js 等，使得开发者可以使用自己熟悉的工具来开发基于 AG-UI 的应用。
2.6 人机协作
在一些复杂的任务中，需要人机协作来完成。AG-UI 支持人机协作，使得人类可以在必要时介入代理的执行过程，提供额外的指导和帮助。例如，在一个智能医疗诊断系统中，医生可以在代理给出初步诊断结果后，进行人工审核和干预，以确保诊断的准确性。
三、AG-UI 支持的框架
3.1 已支持的框架
AG-UI 与许多流行的代理框架集成，以下是一些已经支持的框架及其相关信息：
| 框架名称 | 支持状态 | AG-UI 资源 |
|---|---|---|
| No-framework | ✅ 支持 | ➡️ 文档即将推出 |
| LangGraph | ✅ 支持 | ➡️ 演示 |
| Mastra | ✅ 支持 | ➡️ 演示 |
| CrewAI | ✅ 支持 | ➡️ 演示 |
| AG2 | ✅ 支持 | ➡️ 演示 |
| Agno | ✅ 支持 | ➡️ 文档 |
| LlamaIndex | ✅ 支持 | ➡️ 文档 |
3.2 开发中的框架
除了已经支持的框架，还有一些框架正在开发中，以下是这些框架的相关信息：
| 框架名称 | 支持状态 | AG-UI 资源 |
|---|---|---|
| Pydantic AI | 🛠️ 开发中 | – |
| Vercel AI SDK | 🛠️ 开发中 | – |
3.3 开放贡献的框架
还有一些框架欢迎开发者进行贡献，如果你对这些框架感兴趣，可以参与到 AG-UI 的集成开发中：
| 框架名称 | 支持状态 | AG-UI 资源 |
|---|---|---|
| OpenAI Agent SDK | 💡 开放贡献 | – |
| Google ADK | 💡 开放贡献 | – |
| AWS Bedrock Agents | 💡 开放贡献 | – |
| Cloudflare Agents | 💡 开放贡献 | – |
| Strands Agents SDK | 💡 开放贡献 | – |
3.4 开发中的语言 SDK
除了框架支持，AG-UI 还在开发一些语言 SDK，以下是这些语言 SDK 的相关信息：
| 语言 SDK 名称 | 支持状态 | AG-UI 资源 |
|---|---|---|
| .NET | 🛠️ 开发中 | ➡️ PR |
| Nim | 🛠️ 开发中 | ➡️ PR |
| Rust | 🛠️ 开发中 |
四、AG-UI 的使用示例
4.1 Hello World 应用
AG-UI 提供了一个 Hello World 应用示例，你可以通过访问 https://agui-demo.vercel.app/ 来查看这个示例。此外，还有一个相关的视频展示，你可以通过 这里 观看。
4.2 AG-UI 展示：AG-UI Dojo（构建块查看器）
AG-UI Dojo 展示了许多 AG-UI 支持的构建块。这些构建块的设计简单而专注，代码行数通常在 50 – 200 行之间。你可以通过 这里 查看 AG-UI Dojo 的源代码。
五、如何开始使用 AG-UI
5.1 构建 AG-UI 驱动的应用程序
如果你想创建一个新的 AG-UI 应用程序，可以使用以下命令在几秒钟内完成创建：
npx create-ag-ui-app my-agent-app
创建完成后，你可以查看 文档 来了解更多信息，也可以加入 Discord 社区 与其他开发者交流。
5.2 构建 AG-UI 集成（新框架）
如果你想为新的框架构建 AG-UI 集成，可以按照以下步骤进行：
-
参考 构建新集成（快速入门） 文档开始开发。 -
如果你需要进一步讨论 AG-UI 与新框架的集成，可以 预约通话。 -
加入 Discord 社区 与其他开发者交流和获取帮助。
六、贡献 AG-UI
如果你对 AG-UI 感兴趣，并且想为其发展做出贡献，可以查看 贡献指南。此外，还有一个关于 “AG-UI: Build an agent canvas with AG-UI” 的活动，时间是 6 月 20 日星期五上午 9:00 PT，你可以通过 这里 了解更多信息。
七、AG-UI 的许可证
AG-UI 是开源的，并且遵循 MIT 许可证。这意味着你可以自由地使用、修改和分发 AG-UI，只要你遵循 MIT 许可证的相关规定。
八、常见问题解答（FAQ）
8.1 AG-UI 适合哪些类型的项目？
AG-UI 适合那些需要实现 AI 代理与前端应用交互的项目，如聊天机器人、智能助手、协作式应用、智能购物应用、智能旅游应用等。
8.2 我可以使用哪些事件传输方式与 AG-UI 配合使用？
AG-UI 可以与任何事件传输方式配合使用，如 Server-Sent Events、WebSockets、Webhooks 等。
8.3 如何开始使用 AG-UI 开发应用程序？
你可以使用 npx create-ag-ui-app my-agent-app 命令创建一个新的 AG-UI 应用程序，然后查看 文档 来了解更多信息。
8.4 我可以为 AG-UI 做出贡献吗？
当然可以！你可以查看 贡献指南 来了解如何为 AG-UI 做出贡献。
8.5 AG-UI 支持哪些流行的代理框架？
AG-UI 支持许多流行的代理框架，如 LangGraph、Mastra、CrewAI、AG2、Agno、LlamaIndex 等。具体信息可以参考本文中的框架支持表格。
8.6 AG-UI 与其他代理协议有什么关系？
AG-UI 与 MCP 和 A2A 是互补的关系。MCP 为代理提供工具，A2A 允许代理之间进行通信，而 AG-UI 则将代理引入到面向用户的应用程序中。
8.7 AG-UI 的许可证是什么？
AG-UI 遵循 MIT 许可证，这意味着你可以自由地使用、修改和分发 AG-UI，只要你遵循 MIT 许可证的相关规定。
九、总结
AG-UI 作为一种轻量级、基于事件的协议，为 AI 代理与前端应用的交互提供了一种简单而灵活的解决方案。它具有事件驱动、灵活的中间件层、参考实现和默认连接器等特点，适用于多种应用场景。AG-UI 支持许多流行的代理框架，并且提供了丰富的开发资源和工具。通过本文的介绍，你应该对 AG-UI 有了更全面的了解，并且可以开始尝试使用它来开发自己的应用程序。如果你对 AG-UI 感兴趣，不妨加入到 AG-UI 的开发和贡献中来，共同推动这个协议的发展。