7 天前端 Agent 体验：从流式到生成式界面

Agent 前端难在哪：事件协议与浏览器里的第一条流

先说清楚 Agent 界面和普通聊天界面到底差在哪三件事，再认识 AG-UI 这份公开的前后端事件协议，最后用原生 fetch 加 ReadableStream 在浏览器里读通第一条流，并搞懂为什么 EventSource 在这个场景里一开始就不够用。

不抖的流式渲染：渲染风暴、增量 Markdown 与滚动锚定

模型每秒吐几十上百个增量，最朴素的写法会让 React 每个增量重渲染一次，还会把用户正在打字的输入框拖卡。这一天依次解决渲染风暴、不完整 Markdown、滚动位置被抢三个问题，把流式聊天做到长会话也不抖。

工具调用可视化与人在回路：中断不是本地拦截

把工具调用的三段事件拼成一张有状态的卡片，让用户看见 Agent 正在做什么；再实现人在回路的审批，并搞清楚一件最容易做错的事：审批是一次运行的中断与恢复，不是前端自己弹个框拦一下。

推理过程与共享状态：可折叠的思考区和增量同步

先把模型的推理过程做成一个默认收起、可以展开的区域，再引入 Agent 前端真正区别于聊天界面的东西：一份前后端共享的状态，用整份快照打底、用 JSON Patch 增量更新，让界面能显示聊天记录之外的进展。

生成式界面的三种范式：从组件映射到声明式 UI

让 Agent 决定界面长什么样有三种做法，控制权从前端一路让渡到模型。这一天把三种范式各实现一遍，重点讲清楚它们的安全边界，以及为什么最灵活的那种在生产里往往是最危险的那种。

会话控制与长任务：打断、重试、分支与子 Agent

把一次性的问答变成真正能用的会话：中途打断、失败重试、编辑上一条重发、从某一轮分叉出新分支；再处理长任务的进度呈现与子 Agent 的可视化，以及流断在半路时前端该怎么续上而不产生重复消息。

可访问性与性能预算：让流式界面对所有人可用

流式输出对屏幕阅读器是一场灾难，而把实时区域直接指向流式元素恰恰是最常见也最错的做法。这一天用分段播报解决它，再给整个工作台立一份性能预算，最后把七天的成果收成一个能放进作品集的项目。