Build An Agent

从零开始，一步一步，用代码构建一个真正的 AI Agent。

不是概念讲解，不是源码解读——是跟着做，每一步你手上都有一个能跑的东西。

为什么做这个

市面上 Agent 教程两种：一种讲概念（什么是 ReAct、什么是 Function Calling），一种解读现有框架源码（LangChain 怎么写的、Claude Code 怎么设计的）。

缺一种：从一个空文件夹开始，一步步长成一个完整 Agent 的过程。

这个项目补的就是这个。

怎么学

每章一个最小增量。上一章的代码 + 新功能 = 这一章的代码。

跟着做完，你就有了一个自己的 Agent——能调工具、能跑工作流、有界面、能部署。

章节大纲

Phase 1：最小 Agent（后端核心）

章节	标题	核心问题
s01	调通 API	拿到模型的第一个回复
s02	加入循环	让模型能连续多轮对话
s03	第一个工具	让 Agent 能读文件
s04	工具路由	多个工具按名分发，加工具不改循环
s05	结果回流	工具结果喂回模型——Agent 的真正起点

Phase 2：产品化（前端 + 体验）

章节	标题	核心问题
s06	对话界面	最简可用的聊天 UI
s07	流式输出	SSE + ReadableStream，打字机效果
s08	内容渲染	Markdown + 代码高亮 + 一键复制
s09	状态管理	多会话、历史持久化
s10	调用可视化	工具调用链的过程展示

Phase 3：工作流编排（从对话到流程）

章节	标题	核心问题
s11	可视化画布	React Flow 搭建拖拽画布
s12	自定义节点	LLM / 工具 / 条件判断节点
s13	连线与执行	节点之间的数据流和执行引擎
s14	序列化	工作流的导入导出（JSON）
s15	执行日志	每个节点的输入输出追踪

Phase 4：加固（生产级）

章节	标题	核心问题
s16	权限与确认	敏感操作的人工确认机制
s17	错误恢复	重试、降级、状态回滚
s18	部署上线	Vercel + 环境变量 + 监控

技术栈

• 后端：Python（Phase 1）
• 前端：Next.js + TypeScript + Tailwind CSS
• 画布：React Flow
• 状态管理：Zustand
• AI API：DeepSeek / OpenAI 兼容接口

进度

• Phase 1：最小 Agent（s01-s05）
• Phase 2：产品化（s06-s10）
• Phase 3：工作流编排（s11-s15）
• Phase 4：加固（s16-s18）

关注

X: @grainrain_young

每完成一章会在 X 上同步更新。