跳到主要内容

Agent前端与交互

本目录写 Agent 的交互层：用户看到什么、何时能打断、高风险动作如何审批、工具过程如何可视化、模型输出如何变成界面，以及微信 / 支付宝 / H5 / App 上的协议差异。

它不是「做一个聊天框」。生产 Agent 的前端是 Agent Loop 的可观察投影：把 run、span、工具调用、审批中断和最终产物映射成可操作界面。

核对日期：2026-08-26。流式 API、AI SDK 事件名和各端基础库能力会变，实现时以官方文档和目标基础库为准。

1. 阅读顺序​

顺序文件解决的问题
1流式协议与中断.mdSSE / fetch 流 / WebSocket 怎么选，如何中断和保存半成品
2流式Tool-Use与前端状态.md工具名、参数增量、并行调用如何变成前端状态机
3HITL交互界面.md审批界面必须展示什么，如何避免空确认框
4Generative-UI工程.md白名单组件、结构化 props、禁止渲染模型 HTML
5跨端流式差异.md微信、支付宝、H5、App 的协议与降级
6轨迹回放界面.md运营 / 研发如何回放 run，而不是只看聊天记录

2. 和相邻目录的边界​

主题主文件本目录只写
HITL 策略、风险分级、超时升级../01-Agent基础理论/Human-in-the-loop.md、../12-安全与治理/人类审批.md审批卡片、参数预览、恢复协议
工具 schema、权限、MCP../04-工具调用体系/README.md工具卡片、参数流、调用中 / 成功 / 失败态
队列、幂等、会话、部署../09-Agent工程化/README.md前端如何订阅 run、如何 abort
Trace、仪表盘../11-可观测性与运维/README.md回放时间线、span 可视化
回放 runner、fixture../09-Agent工程化/回放与调试.md回放页的交互与权限
Skill / MCP 任务封装../19-Skills与能力平台/README.md回放里展示加载了哪个 Skill 版本，不写能力目录

横向能力体系里的 Streaming / Generative UI 是通识长文；本目录按 Agent 系统契约来写，作为主库工程主线。

3. 交互层在系统中的位置​

前端不应自己「猜」Agent 在做什么。它只消费后端的 AgentUiEvent，并把用户动作回写成带 run_id 的控制事件。

4. 最低交付面​

一个可进入灰度的 Agent 产品，交互层至少具备：

能力最低要求
流式文本POST 流可解析；用户可停止；停止后半成品可落库
工具可视化显示工具名、风险等级、参数就绪态、结果摘要
中断客户端 abort 必须传到模型请求的 AbortSignal
审批高风险工具执行前可中断；界面展示目标、参数、证据、影响
产物结构化 UI 走白名单组件；禁止把模型 HTML 当 DOM
关联所有界面状态能回到 run_id / trace_id
跨端H5 与小程序有明确协议；不假设 EventSource 可用

5. 权威资料​