当前位置：首页 > news >正文

《60天AI学习计划启动 | Day 39: Agent 执行过程可视化（思考 / 工具 / 观察 / 回答》

news 2026/6/10 17:28:38

Day 39：Agent 执行过程可视化（思考 / 工具 / 观察 / 回答）

学习目标

理解 ReAct / Agent 在“思考→行动→观察→总结”的执行轨迹
会设计 一套前端展示结构（Timeline / Steps）
实现简单的「Agent 调用步骤时间线」组件

核心知识点

1. Agent 步骤抽象
- 一次 Agent 调用可以拆成若干 Step：
  - thought：思考/理由
  - action：调用的工具名 + 参数
  - observation：工具执行结果摘要
  - final_answer：最终回答
- 前端抽象：
```
export type AgentStepType = 'thought' | 'action' | 'observation' | 'final'export interface AgentStep {id: stringtype: AgentStepTypecontent: stringtoolName?: stringcreatedAt: number
}
```
2. 展示形态
- 时间线 / 步骤条：
  - 按顺序展示：Step1 思考 → Step2 调用X工具 → Step3 观察 → ... → 最终回答
- 交互：
  - 支持折叠「思考」内容（只展开有需要的）
  - 在工具步骤里高亮工具名、参数/结果要点

实战作业（附代码）

作业 1：定义 Agent 执行轨迹类型

export type AgentStepType = 'thought' | 'action' | 'observation' | 'final'export interface AgentStep {id: stringtype: AgentStepTypecontent: stringtoolName?: stringcreatedAt: number
}export interface AgentTrace {id: stringquestion: stringsteps: AgentStep[]
}

作业 2：简单时间线组件（React）

import React from 'react'
import type { AgentStep, AgentStepType } from './types'const typeLabel: Record<AgentStepType, string> = {thought: '思考',action: '调用工具',observation: '观察结果',final: '最终回答'
}const typeColor: Record<AgentStepType, string> = {thought: '#9e9e9e',action: '#2196f3',observation: '#4caf50',final: '#ff9800'
}interface AgentTimelineProps {steps: AgentStep[]
}export const AgentTimeline: React.FC<AgentTimelineProps> = ({ steps }) => {return (<div style={{ borderLeft: '2px solid #eee', paddingLeft: 12 }}>{steps.map((step) => (<div key={step.id} style={{ marginBottom: 12, position: 'relative' }}><divstyle={{position: 'absolute',left: -10,top: 4,width: 8,height: 8,borderRadius: '50%',background: typeColor[step.type]}}/><div style={{ fontSize: 12, color: typeColor[step.type] }}>{typeLabel[step.type]}{step.toolName && ` · ${step.toolName}`}</div><div style={{ fontSize: 12, whiteSpace: 'pre-wrap' }}>{step.content}</div><div style={{ fontSize: 10, color: '#aaa', marginTop: 2 }}>{new Date(step.createdAt).toLocaleTimeString()}</div></div>))}</div>)
}

作业 3：将后端 Agent 日志映射为前端 AgentTrace（示例）

// 假设后端返回类似：
/*
{"question": "...","trace": [{ "type": "thought", "content": "需要先查天气...", "ts": 123 },{ "type": "action", "tool": "get_weather", "content": "city=Beijing", "ts": 124 },{ "type": "observation", "content": "返回温度 26℃", "ts": 125 },{ "type": "final", "content": "北京现在 26℃，建议...", "ts": 126 }]
}
*/interface BackendStep {type: AgentStepTypecontent: stringtool?: stringts: number
}export function mapBackendTrace(question: string,raw: BackendStep[]
): AgentTrace {return {id: crypto.randomUUID(),question,steps: raw.map((s, idx) => ({id: `${idx}`,type: s.type,content: s.content,toolName: s.tool,createdAt: s.ts}))}
}