跳到主要内容

Agent 工作流与 MCP 落地（前端应用）

目录​

为什么要 Agent 工作流​

当任务涉及“查数据 -> 计算 -> 生成 -> 校验”时，单次模型调用很难稳定。 Agent 工作流把过程拆成多步，可观测且可回放。

最小工作流结构​

这个流程图的核心价值是把“大模型一次性完成所有事”拆成可控步骤：

  • Planner 负责决定步骤
  • Tool 负责执行外部能力（查、算、调接口）
  • Validator 负责收尾校验，避免错误结果直接暴露给用户

这样设计后，你可以对每一步做独立重试、超时和观测，整体稳定性会明显提升。

MCP 在前端产品中的作用​

  • 统一工具接入协议，减少“每个工具一套适配”
  • 前端可展示工具调用轨迹，提高可解释性
  • 便于权限控制和审计

前端建议展示字段：

  • 工具名
  • 入参摘要（脱敏）
  • 执行耗时
  • 成功/失败状态

工程落地要点​

  • 权限：工具调用必须二次鉴权
  • 超时：每步任务有独立超时与重试策略
  • 日志：统一 traceId 串联 Planner、Tool、Model
  • 回放：保留步骤快照，便于复盘

代码示例​

工作流步骤数据结构​

type StepStatus = "pending" | "running" | "success" | "failed";

type AgentStep = {
  id: string;
  name: string;
  tool?: string;
  inputSummary?: string;
  outputSummary?: string;
  status: StepStatus;
  startedAt?: number;
  endedAt?: number;
  error?: string;
};

前端执行轨迹面板​

export function AgentTimeline({ steps }: { steps: AgentStep[] }) {
  return (
    <ol>
      {steps.map((s) => (
        <li key={s.id}>
          <strong>{s.name}</strong> [{s.status}]
          {s.tool ? <div>tool: {s.tool}</div> : null}
          {s.inputSummary ? <div>in: {s.inputSummary}</div> : null}
          {s.outputSummary ? <div>out: {s.outputSummary}</div> : null}
          {s.error ? <div>error: {s.error}</div> : null}
        </li>
      ))}
    </ol>
  );
}

失败重试流程图​

最小验收标准​

  • 能展示至少两步工具调用流程
  • 某一步失败时，前端可见并可重试该步
  • 最终输出包含执行轨迹与关键证据