AG-UI 是什么？一篇文章讲清楚 AI Agent 与前端如何交互

随着 AI Agent 越来越多地进入真实业务系统，一个新的问题开始变得重要：

Agent 在后台执行任务时，前端页面怎么知道它正在做什么？

比如用户对一个 AI 助手说：

帮我分析一下这个月的销售数据，并生成一份结论。

后台 Agent 可能并不是马上返回一句话，而是会经历：

开始处理
  ↓
查询数据
  ↓
调用工具
  ↓
分析结果
  ↓
更新状态
  ↓
生成最终内容

如果前端只是在最后收到一个结果，那么用户在整个过程中几乎什么都看不到。

AG-UI 就是为解决这类问题而出现的。

一、AG-UI 到底是什么？

AG-UI 的全称是：

Agent-User Interaction Protocol

可以简单理解为：

AI Agent 与用户界面之间的一套通信协议。

它不是一个大模型，也不是一个聊天页面，更不是某个具体的 Agent。

它做的事情很简单：

规定 Agent 在运行过程中，怎样把消息、状态、工具调用、执行进度等信息，以统一的方式发送给前端。

可以把它想象成 Agent 和前端之间约定的一套“语言”。

┌──────────────┐
│   用户页面    │
│ Web / App    │
└──────┬───────┘
       │
       │ AG-UI
       │
┌──────▼───────┐
│   AI Agent   │
└──────────────┘

前端不需要猜 Agent 现在是什么状态，Agent 也不用针对每一个页面重新设计一套完全不同的消息格式。

双方按照约定的事件进行通信即可。

二、为什么普通接口还不够？

传统 Web 系统最常见的是这种模式：

前端发送请求
     ↓
后端处理
     ↓
返回结果

例如：

查询订单
→ 后端查询数据库
→ 返回订单列表

这个过程通常很快，而且结果比较确定。

但 Agent 不太一样。

一个 Agent 任务可能持续较长时间，中间还可能：

  • 连续生成文字；
  • 调用一个或多个工具；
  • 更新任务状态；
  • 根据执行结果继续下一步；
  • 等待用户确认；
  • 执行失败并返回错误；
  • 一边执行，一边把结果展示到页面。

所以 Agent 应用更像：

用户发起任务
     ↓
Agent 开始执行
     ↓
告诉前端：任务已开始
     ↓
告诉前端：正在生成内容
     ↓
告诉前端：正在调用工具
     ↓
告诉前端：工具执行完成
     ↓
告诉前端：状态发生变化
     ↓
继续生成内容
     ↓
告诉前端：任务完成

这已经不只是简单的“请求一次、返回一次”了。

AG-UI 的核心价值，就是把这些过程变成一套结构化、可持续传输的事件流。

三、AG-UI 最核心的概念：事件

理解 AG-UI，最重要的是理解两个字：

事件

AG-UI 采用的是一种基于事件的通信方式。

Agent 执行过程中发生了什么，就可以向前端发送对应的事件。

例如：

任务开始

可以发送“运行开始”事件。

Agent 正在输出回答：

正在分析数据……

可以持续发送文本消息事件。

Agent 开始调用某个工具：

正在查询销售数据库……

可以发送工具调用事件。

Agent 的状态发生变化：

分析进度：60%

可以发送状态更新事件。

任务最终结束：

分析完成

再发送运行完成事件。

于是前端收到的就不再只是最终的一大段结果，而是一连串有明确含义的事件。

Agent
  │
  ├── 任务开始
  │
  ├── 文本开始
  │
  ├── 文本内容
  │
  ├── 调用工具
  │
  ├── 工具结果
  │
  ├── 状态更新
  │
  ├── 文本内容
  │
  └── 任务完成
  │
  ▼
前端页面

这也是 AG-UI 最重要的设计思路。

四、举一个实际例子

假设我们做了一个 AI 数据分析助手。

用户输入：

帮我分析一下本月销售数据。

如果只是普通聊天接口，用户可能会看到：

正在生成……

过一会儿直接出现最终答案。

但如果前端能够接收 Agent 的实时事件，页面就可以展示成：

正在分析您的问题……

正在获取本月销售数据……

已获取 1,268 条销售记录

正在进行区域销售趋势分析……

发现 2 个异常指标

正在生成分析结论……

分析完成

甚至在分析过程中，页面上的数据卡片也可以同步发生变化：

┌─────────────────────────┐
│ 本月销售分析             │
├─────────────────────────┤
│ 当前状态：正在分析       │
│ 已处理数据：1268 条      │
│ 发现异常：2 项           │
│ 分析进度：80%            │
└─────────────────────────┘

这样用户看到的就不再是一个“黑盒”。

而是能够知道：

Agent 现在正在干什么、执行到哪一步、发生了什么变化。

五、AG-UI 主要能传递什么？

从使用者角度，不需要一开始就记很多事件名称。

只需要知道，AG-UI 主要帮助前端理解下面几类信息。

1. Agent 是否正在运行

例如：

任务开始
任务完成
任务失败

前端可以据此显示：

处理中……

或者：

执行完成

2. Agent 正在输出什么内容

AI 的回答通常不是一次性全部生成，而是一点一点产生。

例如：

根据
根据本月
根据本月销售
根据本月销售数据……

AG-UI 可以支持这种流式消息，让页面实时显示 Agent 正在生成的内容。

3. Agent 正在调用什么能力

例如 Agent 需要查询数据。

前端可以知道：

正在调用：销售数据查询

执行完成之后，又可以收到：

查询完成

这可以让 Agent 的执行过程更加透明。

4. Agent 当前的状态

有些 Agent 不只是生成文字，还会维护自己的任务状态。

例如：

当前步骤：数据分析
进度：60%
已发现异常：2 项

AG-UI 可以把这些状态同步给前端。

这样页面上的：

  • 进度条；
  • 状态卡片；
  • 表格；
  • 按钮；
  • 数据区域；

都可以随着 Agent 的执行实时更新。

六、AG-UI 不只是“聊天框流式输出”

第一次接触 AG-UI，很容易把它理解成：

不就是让 AI 回答一个字一个字显示出来吗？

其实不只是这样。

流式文字只是最基础的一部分。

真正的 Agent 应用往往需要：

消息输出
+
工具执行
+
状态同步
+
页面更新
+
用户交互

比如 Agent 分析完成之后，可以让页面出现：

发现 3 条异常数据。

[查看详情]    [重新分析]    [生成报告]

用户点击“重新分析”之后，又可以继续驱动 Agent 执行。

所以 AG-UI 更重要的意义在于：

把 Agent 真正接入一个可以实时交互的业务界面。

七、AG-UI 解决的本质问题是什么？

如果没有统一协议，每做一个 Agent 应用，开发人员都可能自己规定：

Agent 开始时发送什么格式？

Agent 输出文字发送什么格式？

调用工具发送什么格式？

任务结束发送什么格式？

页面状态变化怎么同步？

项目一多，就容易出现很多不同的私有实现。

AG-UI 希望解决的，就是这一层的标准化问题。

可以简单理解成：

以前：

Agent
  │
  │ 各项目自己定义
  ▼
前端


AG-UI：

Agent
  │
  │ 统一的事件和交互方式
  ▼
前端

因此，AG-UI 本身并不是负责“让 Agent 更聪明”。

它解决的是：

怎么让 Agent 与用户界面更标准、更实时、更清晰地进行交互。

八、什么时候会用到 AG-UI？

如果你的 AI 应用只是：

用户提问
  ↓
模型回答

那么未必一定需要复杂的 Agent 与 UI 通信机制。

但如果系统逐渐变成：

用户提出任务
  ↓
Agent 执行多个步骤
  ↓
调用外部能力
  ↓
持续产生结果
  ↓
改变任务状态
  ↓
等待用户操作
  ↓
继续执行

这时候，Agent 和前端之间就需要更完善的交互方式。

典型场景包括：

  • AI 助手；
  • AI 数据分析平台；
  • 智能客服；
  • AI 编程助手；
  • 自动化办公 Agent；
  • 带任务执行过程的业务系统；
  • 需要用户确认后继续执行的 Agent。

这类系统都比较适合关注 AG-UI。

九、最后总结

对于第一次接触 AG-UI 的人，不需要马上研究协议里的每一个事件。

先记住下面这一句话就够了：

AG-UI 是 AI Agent 与用户界面之间的通信协议，用来把 Agent 的消息、执行状态、工具调用和状态变化，以结构化事件的方式实时传递给前端。

它解决的不是：

AI 聪不聪明

而是：

Agent 在后台干活时，
前端怎么知道它在干什么，
又怎么把这些过程展示给用户。

所以可以把 AG-UI 最简单地理解成：

让后台 Agent 和前端页面能够“说同一种语言”。

当 Agent 从简单的“聊天机器人”变成真正能够执行任务的智能体以后，这一层通信也会越来越重要。

参考资料

posted @ 2026-09-18 13:50  人艰不拆_zmc  阅读(3)  评论(0)    收藏  举报