AI Agent 的前端交互范式：流式输出与工具调用 UI

AI Agent 不是普通的表单应用，它的交互范式与传统前端有本质差异。本文聊聊构建 Agent 前端时，那些绕不开的设计问题。

流式输出：体验的起点

大模型生成是逐 token 输出的。如果等全部生成完才显示，用户会等到焦虑。流式输出是 AI 前端的标配。

技术上用 SSE（Server-Sent Events）或 WebSocket 逐段推送：

const res = await fetch('/api/chat', { method: 'POST', body });
const reader = res.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  appendText(decoder.decode(value)); // 逐段追加
}

配合打字机效果与「停止生成」按钮，体验才完整。

工具调用的可视化

Agent 执行任务时会调用工具（搜索、查数据库、执行代码）。把过程展示给用户是建立信任的关键：

• 展示「正在搜索…」「已检索 3 条结果」等中间状态；
• 用卡片、步骤列表呈现 Agent 的思考与行动轨迹；
• 允许用户介入或中止某一步。

过程透明与可干预

黑箱式的 Agent 让人不安。好的设计要：

• 显示 Agent 的「推理过程」或关键决策；
• 提供「重新生成」「撤销上一步」等控制；
• 对不确定的操作（如扣款、发送）请求用户确认。

状态管理的挑战

Agent 交互的状态远比表单复杂：多轮对话、任务队列、流式缓冲、工具调用状态。建议引入专门的状态模型，而非用简单的组件状态硬扛。

结语

AI 前端的设计原则可以概括为一句话：让不可见的过程变得可见、可理解、可干预。这不仅是技术问题，更是信任问题。