企业官网建设流程全解析

系列：100 天系统学习 AI Agent 开发
当前阶段：LangChain 与 LangGraph 工程化
今日目标：Agent UI 要展示任务状态、已调用工具、需要用户确认的动作和最终输出。

1. 先给结论

进入「LangChain 与 LangGraph 工程化」之后，我明显感觉 Agent 开发不只是 Prompt 技巧了。Agent UI 要展示任务状态、已调用工具、需要用户确认的动作和最终输出。 这件事越早建模，后面流程越不容易散。

2. 从工程视角看

• 状态：把任务进度、用户上下文、工具结果和错误信息显式保存。
• 节点：每个节点只处理一个清晰步骤，便于调试和替换。
• 路由：用条件边或规则决定下一步，关键路径不要完全交给模型猜。

3. 动手清单

今天的主任务是：画一个页面草图：输入区、事件流、审批按钮、结果区、错误提示。

我会按这个节奏做：

1. 先画状态，再写节点，最后补路由条件。
2. 完成主题任务：画一个页面草图：输入区、事件流、审批按钮、结果区、错误提示。
3. 检查每个节点的输入、输出、失败处理和是否需要 checkpoint。

4. 最小可交付物

今天可以留下一个最小状态图，先把流程跑顺：

5. 避坑笔记

我把「做一个最小 Agent 面板」当成一次小型技术评审来看。不是看文章写得顺不顺，而是看它能不能经得起追问。

面试官会追问：Agent UI 最重要的不是聊天框，那是什么？

是让用户看见“现在发生什么、下一步会发生什么、我还能控制什么”。最小面板应显示阶段、证据引用、工具事件、待审批动作、取消入口和可理解错误，而不是播放一段假的思考动画。

高风险动作必须用 diff 或结构化预览呈现。例如发送邮件前显示收件人、主题、正文摘要和附件；修改数据库前显示目标记录与字段变化。用户批准的是具体动作版本，不是抽象的“继续”。

我会做一次断网测试：页面刷新后用 run_id 恢复任务，已完成事件不重复，待审批动作仍可处理。能通过这条测试，UI 才真正连接了后台状态，而不是把流式文本暂存在浏览器。

今日检查清单

• 检查标题里是否有明确技术词：做一个最小 Agent 面板
• 检查正文有没有围绕这个任务展开：画一个页面草图：输入区、事件流、审批按钮、结果区、错误提示。
• 检查风险提醒是否具体到动作：Agent 不是普通聊天框。长任务、审批和失败恢复需要专门的交互设计。
• 给每个节点写清输入、输出、失败时去哪
• 标出哪一步需要 checkpoint 或人工确认
• 写一句“我明天会怎么继续”