从单 Chat 到多 Agent 程序：AI 应用的架构演进路线

前五篇搞定了 AI 应用的基础架构——网关、状态管理、流式链路。但这些都建立在一个假设上：一个 AI 做一件事。

现实场景远比这复杂。一个"智能项目助手"可能需要：

• 代码 Agent 负责生成和审查代码
• 文档 Agent 负责检索和更新知识库
• 运维 Agent 负责查询部署状态和日志
• 协调 Agent 决定什么时候调哪个 Agent

这就是 Multi-Agent 程序——多个 AI 各司其职、协作完成任务。对前端架构这代表着一系列全新的挑战。

AI 应用的五层演进

L0: 单次调用 → callAI → 返回结果
说到L1，多轮对话 → 维护 messages 数组，上下文管理
说到L2，RAG 提高 → 检索相关文档 → 注入上下文 → 调 AI
至于L3，Tool Use → AI 可以调用工具
至于L4，Multi-Agent → 多个 AI 各有角色，协作完成复杂任务

每一层对前端的架构影响

层级	后端变化	前端架构影响
L0	无状态简单请求-响应	-
L1	会话管理	对话历史 UI、上下文指示器
L2	向量检索 + 上下文拼接	引用来源展示、知识库关联
L3	工具调用循环	工具调用过程可视化、确认弹窗
L4	Agent 编排、并行/串行调度	多 Agent 状态展示、思考过程、冲突处理

Agent 编排模式

模式一这方面。串行

使用者输入 → Agent A → Agent B → Agent C → 最终输出
从示例来看，智能写作
使用者输入主题 → 大纲Agent生成大纲
→ 写作Agent撰写正文
→ 审校Agent校对润色

前端 ：展示为步骤条 / 进度条，每个 Agent 完成一步点亮一个节点。说起来，

interface PipelineStep {
agent : string
status : 'pending' | 'running' | 'done' | 'error'
至于input?，string
output?: string
startTime?: number
endTime?: number
}
// SSE 事件类型
type PipelineEvent =
| { type : 'stepstart';agent : string }
| { type : 'stepstream';按理说，agent : string;content : string }
| { type : 'stepdone';agent : string;output : string }
| { type : 'pipelinedone';finalOutput : string }

从模式二来看，并行

 ┌→ Agent A→┐
使用者输入 → 分发 ├→ Agent B→├→ 汇总 → 最终输出
└→ Agent C→┘

从示例来看。智能搜索 使用者问一个技术问题 → 同时搜三个来源 → 汇总最相关的答案

前端 ：多列并排展示，每列一个 Agent 的实时输出，最终合并。

interface ParallelAgents {
agents : {
: {
name : string
status : 'running' | 'done'
streamContent : string
}
}
mergedResult?: string
}

至于模式三，路由

使用者输入 → 路由Agent
├→ 文档Agent
└→ 通用Agent
示例的观点是。全能助手
使用者输入先经过分类，路由到最合适的专家Agent

前端 :展示路由决策——“AI 判断这是一个代码问题，已转给代码专家”。

模式四这方面，监督者

 Supervisor
←──┼→ 写作Agent ←┤ ← 协调、分配、审核
└→ 审校Agent ←┘
再看示例。报告生成
Supervisor 把任务拆分，分配给不同Agent，审核结果，不满意就退回重做

前端 :最复杂——展示 Supervisor 的决策树、各 Agent 的任务分配、重试过程。

至于前端架构，多 Agent 状态管理

状态模型

interface MultiAgentState {
sessionId : string
mode : 'pipeline' | 'parallel' | 'router' | 'supervisor'
// 全局状态
status : 'idle' | 'running' | 'done' | 'error'
userInput: string
finalOutput?:string
// 各 Agent 状态
agents的观点是，Record
// Agent 间通信记录
messages: AgentMessage
// 执行轨迹
从trace来看，TraceEvent
}
interface AgentState {
再看id。
string
从name来看，string
说到role，string
至于status，'idle'|'thinking'|'tool_calling'|'streaming'|'done'|'error'
currentTask?老实说，:string
streamContent:string
toolCalls:ToolCallRecord
output?:string
tokenUsage:{input:number;output:number}
}
interface AgentMessage{
from的观点是，string // agentId 或 'user' 或'supervisor'
to这方面，string
content:string
timestamp:number
}
interface TraceEvent{
再看type，'agent_start'|'agent_end'|'tool_call'|'handoff'|'decision'
agentId:string
从detail来看。any
timestamp:number
}

SSE协议设计

后端通过 SSE推送多Agent的事件流：

// 后端推送的事件类型
type ServerEvent =
// Agent 生命周期
说到|{type，'agent_start';agentId:string;task:string}
再看|{type，'agent_thinking';agentId:string;thought:string}
再看|{type，'agent_stream';agentId:string;content:string}
从|{type来看，'agent_done';怎么说呢，agentId:string;output:string}
|{type这方面，'agent_error';agentId:string;error:string}
//工具调用
至于|{type，'tool_call';agentId:string;其实，tool:string;args:any}
再看|{type，'tool_result';agentId:string;tool:string，result:any}
//Agent间协作
从|{type来看，'handoff';from:string，to:string;message:string}
至于|{type，'supervisor_decision';decision:string;assignments:any}
//全局
|{type这方面，'final_output';content:string}
说到|{type，'done';tokenUsage:any}

前端统一消费事件流，更新对应Agent的状态：

function handleServerEvent{
switch{
case'agent_start':
state.agents.status='thinking'
state.agents.currentTask=event.task
break
case'agent_stream':
state.agents.status='streaming'
state.agents.streamContent+=event.content
break
case'agent_done':
state.agents.status='done'
state.agents.output=event.output
break
case'handoff':
state.messages.push({
至于from，event.from,to:event.to,content:event.message,timestamp:Date.now。})
break
case'final_output':
state.finalOutput=event.content
state.status='done'
break
}
state.trace.push({
type的观点是，event.typeasany,agentId:.agentId||'system',detail:event,timestamp:Date.now,})
}

Thinking UI：展示Agent的思考过程

Multi-Agent程序最关键的UX设计——让使用者看到AI在干什么

设计原则

1. 透明度 —— 使用者知道哪些Agent在工作、各自在做什么 >

进度感 —— 即使AI还没出结果，也能看到中间进展 >

—— 使用者可以中断、跳过某个Agen t 、手动干预。

<="" less”l="" p="">

│使用者的观点是，“帮我重构这个模块并更新文档”│

├────────────────────────────────────────────────┤

││

│🤖 Supervisor│

│└─已拆分为个子任务│

│┌─🔧代码Agen t─────┐┌─📝文档Agen t────┐ │

│ ✅ 分析现有代码结构 │ ⏳ 等待代码Agen t ... │ │

│ ✅ 生成重构方案 │ │ │

│ 🔄正在重写代码... │ │ │

▌ │ │ │

📊Token消耗:。input/output │

至于⏱已用时，s │ │ │
│
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ 

/code>/pre>

。

---