中文EN

搜索文章

输入关键词开始搜索
↑↓ 选择Enter 打开Esc 关闭

AG-UI

AI#AI#数据可视化#Agent#数据库#人员管理#架构

介绍视频

Agent 事件、工具调用、界面状态与人工审批的连接

先说结论

AG-UI 对我最大的启发，不是又多了一个协议名，而是它把 Agent 和前端 UI 之间的边界讲清楚了：模型怎么想是一层，工具怎么调是一层，运行过程怎么让用户看见、确认和接管，又是另一层。

如果要做可视化里的 Agent UI，这个分层很值得参考。前端不能只等一个最终结果，它需要知道任务开始了没有、模型正在说什么、工具调用到了哪一步、是否需要用户批准、状态有没有被更新。

The Agent–User Interaction (AG-UI) Protocol 是一个开放的、轻量级的标准协议，旨在解决 AI Agent（智能体）与前端用户界面（UI）之间通信标准化的难题。

在目前的 AI 代理生态系统（Agentic Ecosystem）中，AG-UI 被视为**“最后一公里”的连接协议——它不负责 Agent 如何思考（模型层），也不负责 Agent 如何调用工具（那是 MCP 协议的事），而是专门负责Agent 如何与人类用户进行实时、多模态的交互**。

这个三层职责值得参考，我们算是可视化的AG-UI：DataV AG-UI。

以下是对 AG-UI 协议的详细技术讲解：

1. 核心定位：Agent 协议栈的“三驾马车”

为了理解 AG-UI，首先需要明确它在现代 AI 架构中的位置。在 2025 年后的 AI 开发范式中，通常存在三大核心协议：

  1. MCP (Model Context Protocol): Agent ↔ 外部世界。由 Anthropic 主导，标准化 Agent 如何连接数据源、API 和工具（给 Agent“手”）。

  2. A2A (Agent-to-Agent): Agent ↔ Agent。标准化 Agent 之间如何协作、分包任务（给 Agent“团队”）。

  3. AG-UI (Agent-User Interaction): Agent ↔ 人类用户。标准化 Agent 如何将思考过程、工具状态、生成的内容流式传输给前端 UI（给 Agent“嘴”和“脸”）。

2. AG-UI 的核心机制：事件驱动流 (Event-Driven Stream)

AG-UI 抛弃了传统的 REST API（请求-响应）模式，采用了**事件驱动（Event-Sourcing）**架构。这是因为 Agent 的运行通常是长时间、多步骤且不确定的，前端不能傻等一个最终结果。

  • 传输层： 通常基于 Server-Sent Events (SSE) 或 WebSockets。

  • 数据格式： 一系列结构化的 JSON 事件。

标准化的事件生命周期

AG-UI 定义了约 16 种标准事件类型，主要分为五大类：

  1. 生命周期事件 (Lifecycle Events):

    • RUN_STARTED / RUN_FINISHED: 告诉 UI 一个任务流程开始了或结束了。

    • RUN_ERROR: 错误处理。

  2. 消息流事件 (Text Message Events):

    • TEXT_MESSAGE_START / _CONTENT / _END: 用于流式传输 LLM 生成的文本（Token-by-token），让用户感觉响应是实时的。

  3. 工具调用事件 (Tool Call Events):

    • 这是 AG-UI 的精华。当 Agent 决定调用一个工具（如“查询天气”或“运行代码”）时，它会发送 TOOL_CALL_START。

    • 前端表现： UI 可以据此渲染一个“正在查询…”的加载条，或者显示具体的参数，甚至弹出一个确认框让用户批准（Human-in-the-Loop）。

  4. 状态管理事件 (State Management Events):

    • STATE_UPDATE / STATE_DELTA: 同步后端 Agent 的内存状态与前端 UI 的显示状态。

3. 关键特性详解

A. Human-in-the-Loop (人机协同)

AG-UI 原生支持“中断”和“审批”。

  • 场景： Agent 想要执行一个敏感操作（如“删除数据库”）。

  • 流程： Agent 发送一个 REQUEST_APPROVAL 事件 -> UI 渲染“批准/拒绝”按钮 -> 用户点击 -> UI 将结果发回 Agent -> Agent 继续执行。

  • 这在传统的 Chat 接口中很难实现，但 AG-UI 将其标准化了。

B. Generative UI (生成式 UI)

AG-UI 不仅仅传输文本，它支持 Agent 动态控制 UI 组件。

  • 机制： Agent 可以发送包含 UI schema 的事件（类似于 Vercel 的 AI SDK RSC 或 Adaptive Cards）。

  • 例子： 当用户问“股票行情”时，Agent 不只是通过文本回答，而是通过 AG-UI 协议指示前端渲染一个特定股票的 ChartComponent（图表组件）。

C. 状态同步 (Shared State)

Agent 和前端共享同一个“上下文对象”。

  • 如果 Agent 在后端更新了任务列表，它会发送一个 JSON Patch（增量更新）。

  • 前端自动接收并更新 React/Vue 组件的状态，无需手动轮询。

4. 为什么需要 AG-UI？（解决了什么痛点）

在没有 AG-UI 之前，开发者连接 Agent 和前端非常痛苦：

  • 痛点 1： 需要自己手写 WebSocket 逻辑来处理流式文本。

  • 痛点 2： 很难在前端优雅地展示“Agent 正在思考”或“Agent 正在调用工具 A、工具 B”的中间状态。

  • 痛点 3： 更换后端框架（如从 LangChain 换到 Pydantic AI）通常意味着要重写前端代码。

AG-UI 的价值在于解耦：前端开发者只需要对接 AG-UI 标准接口，后端无论用 LangGraph、CrewAI 还是 Autogen，只要输出符合 AG-UI 标准的事件流，前端都能完美展示。

5. 总结

AG-UI Protocol 是连接智能体后端与现代前端的通用语言。

  • 对于后端开发： 你只需要关注 Agent 的逻辑，通过 AG-UI SDK 发出事件。

  • 对于前端开发： 你得到的是一个清晰的事件流，可以轻松渲染出类似 ChatGPT 或 Claude Artifacts 那样丝滑的交互界面。