Day 116 · Agent Loupe(五):两次运行逐步对比
改了一句提示词,Agent 的行为变了,但是从哪一步开始变的?今天给 Agent Loupe 加上逐步对比:用「这一步做了什么决定」当签名,LCS 对齐两条步骤序列,标出相同、不同、多出、缺少,再用按词切分的逐词 diff 看清具体改了什么。
Day 115 · Agent Loupe(四):步骤详情、token 成本与上下文占用
点开任意一步,看模型收到的完整 messages、返回的工具调用和思考内容;把每次模型调用的上下文拆成系统提示词、工具定义、历史、工具结果、本轮新增五块,看各占多少;再画一张上下文增长图和一张成本冰柱图,找出「哪一步把上下文撑大了」「钱花在了哪」。
Day 114 · Agent Loupe(三):React 时间轴与一万步的渲染性能
前端开工。Vite + React + TypeScript 起项目,写运行列表页和运行详情页,用步骤树加瀑布时间轴把一次 Agent 运行画出来;再用虚拟滚动让一万步也能顺畅滚动,并学会用 Chrome Performance 面板测量它到底卡不卡。
Day 49 · 界面与流式体验:Next.js 客服工作台、展示工具调用与审批
用 FastAPI 把工作流包成 HTTP 接口,用 SSE 把每个步骤、每次工具调用、每个字推给前端;再用 Next.js + React + TypeScript 做两个页面:客户视角看着 Agent 干活并追问,客服工作台一键审批退款。讲清楚为什么不用 EventSource、要不要上 Vercel AI SDK、怎么停止、怎么让读屏软件不被逐字播报逼疯。不会前端的同学,文末有 Streamlit 版。
Day 10 · ReAct 与规划:先想再做,边做边看
用纯提示词实现一次 2022 年 ReAct 论文里的 Thought/Action/Observation 循环,看清 stop 序列为什么是关键;再看原生 function calling 和推理模型时代 ReAct 变成了什么,最后实现 plan-and-execute 和 Claude Code 式的待办清单规划。