大家好,我是双越。wangEditor 作者,前百度 滴滴 资深前端工程师,慕课网金牌讲师,PMP,前端面试派 作者。
我正致力于两个项目的开发和升级,感兴趣的可以私信我,加入项目小组。
开始
Chat App(如 ChatGPT / Claude Desktop)通常是同步交互模型:
- 发起一次请求
- 等待 LLM 推理完成
- 才能继续下一轮对话
👉 本质:一次请求 = 一次完整推理(阻塞)
而 Agent App(如 Manus / OpenClaw)则完全不同:
- 任务可以在后台执行
- 用户可以继续发起新的请求
- 任务完成后自动返回结果
- 甚至可以设置 cron 定时执行
👉 本质:异步任务系统 + Agent 执行引擎
整体架构
flowchart LR
A[Frontend UI
Next.js] --> B[API Layer] B --> C[Task Service] C --> D[(Postgres DB)] C --> E[Queue
BullMQ + Redis] E --> F[Worker] F --> G[Agent Runtime] G --> H[LLM] G --> I[Tools] I --> J[External APIs] F --> D D --> K[SSE / Event Stream] K --> A
Next.js] --> B[API Layer] B --> C[Task Service] C --> D[(Postgres DB)] C --> E[Queue
BullMQ + Redis] E --> F[Worker] F --> G[Agent Runtime] G --> H[LLM] G --> I[Tools] I --> J[External APIs] F --> D D --> K[SSE / Event Stream] K --> A
三条核心路径
1️⃣ 用户操作路径
arduino
Frontend → API → Task Service → DB
- 用户提交任务
- 系统创建 Task
- 不等待执行,立即返回 taskId
👉 非阻塞
2️⃣ 后台执行路径(核心)
Queue → Worker → Agent Runtime → Tools → LLM
- Worker 异步执行任务
- Agent Runtime 控制执行流程
- 调用 LLM + Tools 完成任务
👉 真正干活的地方
3️⃣ 实时反馈路径
Worker → DB → SSE → Frontend
- 执行过程持续写入 Step
- 前端通过 SSE 实时订阅
👉 用户可以看到:
erlang
🧠 Thinking...
🔧 Calling API...
📄 Got result...
Agent Runtime 执行流程
这是 Agent 最核心的部分,更加详细的流程如下:
flowchart TD
A[启动 Agent Runtime] --> B[构建 Context]
B --> C[调用 LLM]
C --> D[解析输出]
D --> E{是否完成?}
E -- 是 --> F[写入结果]
F --> G[结束任务]
E -- 否 --> H[解析 Action]
H --> I[调用 Tool]
I --> J[获取结果]
J --> K[记录 Step]
K --> B
它的核心思想如下,这就是 Agent 和 Chat 的本质区别
arduino
while (没完成) {
想 → 干 → 记录 → 再想
}
伪代码
js
async function runAgent(taskId: string) {
let stepCount = 0
const MAX_STEPS = 10
while (stepCount < MAX_STEPS) {
// 1. 构建上下文
const context = await buildContext(taskId)
// 2. LLM 推理
const output = await llm.invoke(context)
// 3. 记录 thought
await saveStep(taskId, {
type: 'thought',
content: output.thought
})
// 4. 判断是否结束
if (output.type === 'finish') {
await finishTask(taskId, output.result)
return
}
// 5. 调用工具
const result = await runTool(output.action)
// 6. 记录 observation
await saveStep(taskId, {
type: 'observation',
content: result
})
stepCount++
}
await failTask(taskId, 'max steps reached')
}
Step 管理
上面可以看到,一个任务需要一个 while 循环分多步骤执行,每一个步骤就是一个 step ,要单独记录下来。
step 的作用
- 记录执行过程(可视化)
- 构建上下文(context)
- 支持恢复(resume)
step 数据定义
step 分多种类型,如思考中、调用 tool 执行中、执行结果观察中。所以它数据结构也要有不同的定义。
ts
type Step =
| {
id: string
taskId: string
type: 'thought'
content: string
createdAt: Date
}
| {
id: string
taskId: string
type: 'action'
tool: string
input: any
createdAt: Date
}
| {
id: string
taskId: string
type: 'observation'
content: string
createdAt: Date
}
取消/恢复 step
异步任务可以在后台执行,用户也可以随时操作取消任务、恢复任务。恢复任务的时候就需要读取历史 steps ,重新构建 Context 重新执行,这样就不用重复之前的步骤了。
flowchart TD
A[任务中断] --> B[读取历史 Steps]
B --> C[构建 Context]
C --> D[重新进入 Agent Loop]
D --> E[继续执行]
A --> F[用户取消]
F --> G[更新 Task 状态为 cancelled]
G --> H[Worker 停止执行]
定时任务流程
有了以上的异步的架构,才可以在此基础之上执行定时任务。
flowchart TD
A[用户输入自然语言] --> B[LLM 解析意图]
B --> C{是否为定时任务}
C -- 否 --> D[普通任务执行]
C -- 是 --> E[生成 cron 表达式]
E --> F[创建 Task]
F --> G[注册 BullMQ repeat job]
G --> H[定时触发]
H --> I[Worker 执行 Agent]
I --> J[输出结果]
核心思路就是:
自然语言 → 结构化 cron → 调度系统 → 定期触发 Agent
说一个具体的例子
js
const result = await llm.invoke(`
每天早上9点帮我查 BTC 价格
`)
// LLM 识别到这是一个定时任务,输入 cron 表达方式
{
type: "cron",
cron: "0 9 * * *",
task: "查询 BTC 价格"
}
然后,在数据库创建一个 task 记录
js
const task = await db.task.create({
input: result.task,
cron: result.cron,
isCron: true
})
然后,把定时任务插入到 queue 任务队列
js
await queue.add('agent-task', {
taskId: task.id
}, {
repeat: {
cron: task.cron,
tz: 'Asia/Singapore'
}
})
最后,使用 queue worker 启动定时任务,就开始定时执行了。
js
new Worker('agent-task', async (job) => {
const { taskId } = job.data
await runAgent(taskId)
})
总结
Agent 本质是一个可持续执行的 LLM 状态机,这就有点接近于黄仁勋说的"Agent 是全新的操作系统"这个概念了。