惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The GitHub Blog
The GitHub Blog
Y
Y Combinator Blog
B
Blog RSS Feed
大猫的无限游戏
大猫的无限游戏
J
Java Code Geeks
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 【当耐特】
MongoDB | Blog
MongoDB | Blog
Hugging Face - Blog
Hugging Face - Blog
有赞技术团队
有赞技术团队
T
The Blog of Author Tim Ferriss
B
Blog
小众软件
小众软件
T
Tailwind CSS Blog
MyScale Blog
MyScale Blog
I
InfoQ
Engineering at Meta
Engineering at Meta
Blog — PlanetScale
Blog — PlanetScale
P
Proofpoint News Feed
H
Help Net Security
雷峰网
雷峰网
S
SegmentFault 最新的问题
V
Visual Studio Blog
爱范儿
爱范儿

博客园 - 人艰不拆_zmc

AI 里的“本体”到底是什么?一篇写给技术小白的通俗解释 15000mAh 到底是什么概念?一篇看懂电池容量 go2_ros2_sdk 到底是干什么的?从 Go2、官方 SDK、ROS2 一路讲到 SLAM 和 Nav2 买了宇树 Go2 以后怎么二次开发?写给第一次做机器狗项目的人 买了一块 NVIDIA Jetson,怎么在上面安装 ROS2?从 JetPack 到 ROS2 的完整入门指南 NVIDIA Jetson 到底是什么?写给第一次接触机器人和边缘 AI 的人 ROS / ROS2 到底是什么?写给第一次接触机器人开发的人 大模型到底能同时多少人用?一篇看懂并发、排队与容量估算 大模型为什么有快有慢?一篇看懂响应速度背后的关键因素 技术小白也能看懂:大模型里的量化、蒸馏到底是什么意思? Codex 使用技巧:从“会聊天”到“真正能干活” 我终于搞懂了:Codex 对话中插件和 Skill 到底怎么用 我终于搞懂了 Agent Spec:它其实就是 Agent 的“标准设计图” 我终于搞懂了 Tool:原来不只是 Function Calling 里的函数 Skill 里的 Python 脚本,到底是不是 Tool? 我终于搞懂了 Codex 的 Plugin 和 Skill:顺便把 App、MCP 一次理清 我终于搞懂了 Codex 的“应用”:App 到底是什么,怎么添加和维护? 我终于搞懂了 Tool、Function Calling 和 MCP:大模型到底怎么知道该调哪个接口? 我终于搞懂了 MCP:从 HTTP API 到 ERP MCP Server 的完整入门 我终于搞懂了 Codex 的“记忆”是怎么回事 Codex 用久了越来越慢?我的上下文管理小技巧 我终于搞懂了 Codex 里的 Thread、Turn 和 Session 从 Qwen3.8-27B 到 FP8、NVFP4、MoE:一次搞懂几个常见大模型概念 FPS 是什么意思?简单理解 60 FPS、25 FPS 和视频帧率 DeepSeek Harness 明明像 AI Coding 工具,为什么又能用来构建各种 Agent? 使用 Codex 开发项目,怎么才能节约 Token? 模型里的 32K、128K、256K 是什么意思?简单聊聊上下文限制 Codex 一次对话到底会给模型发送什么?以 Spring Boot 项目为例讲清 Context、代码读取与 Token 消耗 AI Agent 中的 Rule 是什么?以 Codex 为例,小白也能看懂 我终于搞懂了 Harness:它不是论文,也不是标准,更不是 Codex 独有
AG-UI 是什么?一篇文章讲清楚 AI Agent 与前端如何交互
人艰不拆_zmc · 2026-09-18 · via 博客园 - 人艰不拆_zmc

随着 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 从简单的“聊天机器人”变成真正能够执行任务的智能体以后,这一层通信也会越来越重要。


参考资料