Skip to content

Agent UI 产品化设计:不要只做一个聊天框 ​

这篇文章解决什么问题 ​

很多 Agent 产品第一版都是聊天框。但真实业务用户不只需要聊天,他们需要:

  • 看任务状态。
  • 看证据来源。
  • 审批高风险动作。
  • 修改结构化结果。
  • 查看执行轨迹。
  • 反馈答案质量。
  • 重新运行失败步骤。

Agent UI 的核心不是“把模型回复展示出来”,而是把 Agent 的执行过程、证据、状态和控制点产品化。

为什么聊天框不够 ​

聊天框适合:

  • 开放问答。
  • 灵感生成。
  • 简单咨询。

不适合:

  • 长任务。
  • 工单生成。
  • 多 Agent 协作。
  • 高风险工具调用。
  • 需要引用和证据的 RAG。
  • 需要人工审批的流程。

生产级 Agent UI 应该让用户看到系统正在做什么,以及用户在哪里可以介入。

核心 UI 模块 ​

1. 任务面板 ​

展示:

  • 任务目标。
  • 当前状态。
  • 已完成步骤。
  • 待处理动作。
  • 失败原因。

2. 证据面板 ​

展示:

  • 引用文档。
  • 页码/段落。
  • 置信度。
  • 原文片段。
  • 检索来源。

3. 工具调用面板 ​

展示:

  • 工具名称。
  • 参数摘要。
  • 风险等级。
  • 执行结果。
  • 是否需要审批。

4. 审批面板 ​

用于:

  • 确认创建工单。
  • 确认发送消息。
  • 确认写入数据库。
  • 拒绝危险动作。
  • 修改参数后再执行。

5. 反馈面板 ​

收集:

  • 有用/无用。
  • 引用错误。
  • 答案不完整。
  • 工具调用错误。
  • 人工修正内容。

反馈要进入 Eval Dataset 或失败样本库。

UI 状态设计 ​

Agent UI 至少要支持:

状态含义
idle等待任务
planning任务拆解
retrieving检索证据
calling_tool调用工具
waiting_approval等待人工审批
generating生成结果
failed执行失败
completed完成

不要只有 loading。

长任务交互 ​

长任务需要:

  • 进度条。
  • step timeline。
  • 可取消。
  • 可暂停。
  • 可恢复。
  • 失败重试。
  • 局部重跑。

用户不应该盯着一个无限转圈的按钮。

RAG UI ​

RAG UI 重点不是回复,而是证据:

  • 答案旁显示引用。
  • 引用可点击展开原文。
  • 显示没有足够证据时的拒答。
  • 支持用户标记引用错误。
  • 支持查看召回文档。

这能显著提高用户信任。

多 Agent UI ​

多 Agent UI 可以展示:

  • Planner 计划。
  • 各 Agent 当前状态。
  • Handoff 内容。
  • 结果聚合。
  • 冲突意见。
  • Critic 审核结果。

但不要为了炫酷展示一堆角色头像。重点是任务推进和可控性。

面试表达 ​

可以这样讲 Agent UI:

我不会把 Agent 产品只做成一个聊天框。生产级 Agent UI 应该展示任务状态、证据来源、工具调用、审批点、执行轨迹和用户反馈。比如 RAG 场景要让用户看到引用文档和原文片段;工具调用场景要展示参数摘要、风险等级和审批按钮;长任务场景要有 step timeline、失败重试和恢复。UI 的目标是让用户理解 Agent 正在做什么,并在关键风险点介入,而不是被动等待模型回复。

相关链接 ​