可选课程模块
探索专为现代开发者设计的全面课程体系。
LangGraph.js Chat Bot 实战课
从最小聊天闭环开始，逐步完成一个可运行、可扩展、可部署的 AI Chat Bot。
01 · 项目初始化与最小架构
搭出 Chat Bot 的前端骨架，理解页面布局、组件边界和后续扩展落点。
02 · 核心对话流
打通用户输入到 Agent 回复的最小链路，建立真正可运行的 Chat Bot 闭环。
03 · 流式输出
把同步 JSON 响应升级成 SSE 事件流，让 assistant 回复能够边生成边显示。
04 · 分层架构
把聊天链路拆成清晰层次，理解 Route、Service、Agent 和 Utils 的职责边界。
05 · LangChain 消息类型
建立前端消息、序列化消息和 LangChain 运行时消息的清晰边界。
06 · 接入真实 API 与记忆系统
从这一课开始接入真实大模型 API，并引入 threadId 和 LangGraph 记忆能力，让聊天应用支持多轮上下文和历史会话切换。
07 · 工具调用
让 Agent 从"只会回答"升级到"会调用真实工具"，并把工具结果送入聊天事件流。
08 · 统一工具配置
把工具系统从"能调用"推进到"能统一注册、前端可选、后端动态绑定"。
09 · 模型切换与 Provider
把模型选择、工具选择和线程记忆统一进同一条真实工作流，支持多模型和多 provider 切换。
10 · 图片上传与多模态消息
支持图片选择、预览、发送与消息气泡渲染，并把图片附件真正组装成模型可用的多模态输入。
11 · 用户认证
把登录态提升为应用级状态，接入真实 Supabase Auth，并让聊天主页成为受保护页面。
12 · Supabase 数据库边界
把线程元数据接入 Supabase repository，把消息历史交给 LangGraph Supabase checkpointer，建立真实数据库边界。
13 · Google 图片生成工具
在统一工具系统中接入真实图片生成 API，让工具结果以 loading 卡片和最终图片卡片两段式进入聊天界面。
14 · Canvas 工作流
让模型在消息正文里输出 `canvasArtifact`，再把结构化 React 结果接到右侧只读 Canvas 面板。
15 · 自定义渲染与交互
在不改 `canvasArtifact` 协议的前提下，把右侧 Canvas 升级成可编辑、可保存、可分享的工作区。
16 · 部署与上线交付
为课程终态补上 `api/health` 和上线验收基线，把“本地能跑”收口成“可部署、可排查、可交付”。
17 · 定时唤醒 Supabase：让免费项目不被暂停
Supabase 免费项目连续 7 天无活动会被自动暂停，用 GitHub Actions 定时查询来保活。
LangGraph.js 教程
用图（Graph）来构建可控、可调试、可持久化的 AI 应用：从概念到实战
LangGraph.js 前端 Agent 面试题锦集
精选 LangGraph.js、前端 Agent、RAG 与 LangChain 面试题，按主题分类并附工程化参考答案
AI 应用与 LangGraph.js
探讨 AI 应用的类型及 LangGraph.js 在其中的作用
什么是 LangGraph？
深入了解 LangGraph 的定义、核心概念、设计理念以及它解决的核心问题
教程使用指南
如何高效使用本教程的学习建议和路径规划
核心概念
深入理解 LangGraph 的核心组件：图、状态、节点、边和 Reducers
Agent（智能代理）概念
深入理解智能代理的核心概念、架构类型和在 LangGraph 中的实现方式
环境搭建
从零开始搭建 LangGraphJS 开发环境，包含详细的安装步骤和配置指南
图结构详解
深入了解 StateGraph 和 MessageGraph，掌握图的创建、编译和可视化流程
状态管理与 Reducers
详解 Annotation 的使用、状态更新机制以及如何编写自定义 Reducer
节点设计
深入探讨节点的类型、编写规范以及异步和配置化节点的实现
边的路由逻辑
详解各类边的实现，包括条件边、动态路由及循环控制
ReAct 架构
深入理解 ReAct 架构原理，掌握使用预构建代理和自定义实现的方法
多代理系统
构建协作式的多 Agent 系统，实现任务分发与结果整合
子图 (Subgraphs)
使用子图实现逻辑封装和状态隔离，构建可复用的复杂系统
并行处理
利用 LangGraph 实现任务的并行执行和 Map-Reduce 模式
可视化
使用 Mermaid 和 LangGraph Studio 可视化图结构和执行流程
配置管理与 Configurable
使用 RunnableConfig 动态控制图的行为，实现参数热更新
错误处理
在图中优雅地捕获和处理异常，构建健壮的 Agent
Command 对象
使用 Command 对象实现节点内的动态路由和状态更新组合
聊天机器人
构建具备记忆、工具调用和流式响应能力的智能聊天机器人
RAG 系统
基于 LangGraph 构建检索增强生成 (Retrieval-Augmented Generation) 系统
数据分析 Agent
构建能够自动编写和执行代码进行数据分析的智能 Agent
代码生成与辅助
利用 LangGraph 构建支持多步骤规划、生成和评审的编码助手
流式处理
掌握 LangGraph.js 的多种流式模式，构建实时响应的 AI 应用
工具调用
让 LangGraph 代理具备调用外部 API 和执行操作的能力
持久化
利用 Checkpointer 实现状态保存、断点续传和历史回溯
人机交互
实现 Human-in-the-loop (HITL) 工作流，如审批、修改和澄清
记忆管理
构建具备短期对话记忆和长期用户偏好记忆的智能应用
时间旅行
使用 Time Travel 回放历史、从过去分叉并定位复杂问题
LangGraph Platform
了解 LangGraph 的生产级部署平台：架构、核心组件与部署选项
应用结构
LangGraph 项目的最佳目录结构与配置规范
LangGraph Studio
使用官方可视化 IDE 进行即时调试、追踪和状态检查
boltArtifact 协议详解
深入解析 AI 代码生成的流式交互协议：设计动机、解析流程与工程实践
自定义渲染协议
从 boltArtifact 到业务协议：打造你自己的 AI 组件系统
从 0 实现一个 Coding Agent
从最小本地终端闭环开始，逐步实现一个真正可用的 terminal-first coding agent。
01 · Harness：模型之外的工程
理解 Agent Harness 的概念，看懂 2026 年行业趋势从"做模型"到"造底盘"的转向，以及本课程 12 章如何对应一个完整 Harness 的构建过程。
02 · 什么是 Coding Agent
理解 Coding Agent 的精确定义、能力边界和核心闭环，为后续实现建立统一认知。
03 · 主流产品拆解
从架构和能力角度拆解 Claude Code、Codex CLI、Gemini CLI、OpenCode 四个产品，理解它们各自擅长什么、差异在哪里，为后续自己实现建立参考框架。
04 · 课程边界与工程取舍
划清课程做什么、不做什么，理解 终端优先、本地运行、聚焦编码 三条核心边界背后的取舍逻辑。
05 · 主项目与课程路线图
明确课程的最终交付物，看清 12 章的完整路线和每一步的代码演进，为后续动手实现做好准备。
01 · 最小 Agent 架构
拆解一个 Coding Agent 需要哪些基础部件，理解输入、状态、模型、工具、输出五层各自负责什么，为动手搭建建立清晰的心智模型。
02 · 搭建第一个 Agent 入口
从空目录开始，定义消息类型、封装模型调用、设计工具接口，把五层架构落地成可以运行的代码。
03 · 让 Agent 学会搜索和读文件
实现 search 和 read_file 两个工具，让 agent 真正能"看"到你的代码仓库。讨论工具设计中的长度控制、结果截断和输出格式化。
04 · 实战：第一个仓库问答任务
用三个真实任务验证 agent 的能力，看看它在什么场景下表现好、什么场景下会出错，理解当前 agent 的能力边界。
01 · 从一次回答到循环执行
第 1 章的 agent 只会"问一次答一次"。这一节把它升级成持续推进的执行循环，理解为什么 Coding Agent 必须是一个循环而不是单次调用。
02 · ReAct 与 Planning
把 ReAct 模式完整落地到代码中。模型先规划（Plan）、再执行（Act）、然后观察结果（Observe），形成完整的智能循环。
03 · Todo 机制
实现 TodoItem 类型、TodoManager 管理器和两个计划工具（create_todos / update_todo），让模型能拆分任务、跟踪进度。
04 · 退出条件与失败恢复
Agent Loop 不能无限跑下去。这一节实现三种退出条件、失败后的自动重试策略，以及结构化的执行统计。
05 · 实战：第一个多步骤任务
用一个真实的多步骤任务演示升级后的 agent 如何工作：创建计划、按步骤执行、展示 ReAct 循环的完整运转过程。
01 · Tool Calling 的本质
理解为什么 Coding Agent 的核心不是模型本身，而是模型调用的工具。工具是 agent 行为的真实落点。
02 · 搜索工具：rg 与 glob
两种互补的搜索方式：search 在文件内容中找关键词，glob 按路径模式列出文件。
03 · 文件工具：读、写、Patch
三种文件操作：read_file 读取、write_file 创建覆写、patch_file 精确修改。patch 比整文件覆写更安全。
04 · 命令工具：执行与验证
让 agent 能在终端执行命令，捕获 stdout/stderr，设置超时限制。这是 agent 能验证自己修改的关键能力。
05 · Git 工具：查看变更
git_status 查看哪些文件改了，git_diff 查看具体改了什么。让 agent 了解自己的修改影响。
06 · 实战：读-改-跑-验闭环
用完整的工具链跑通一次从搜索到验证的闭环。展示 agent 如何组合使用多种工具完成真实开发任务。
01 · 为什么需要权限系统
Coding Agent 能写文件、跑命令、改 git。没有权限边界，一句话就可能把仓库删了。
02 · 三种权限级别：allow / ask / deny
每种工具调用都有自己的权限级别。allow 自动放行，ask 需要确认，deny 直接拒绝。
03 · 高风险命令识别与拦截
rm -rf、git push --force、sudo 等命令一旦执行就可能造成不可逆损害。用模式匹配在执行前拦截。
04 · 审计日志与确认流程
记录每一次权限决策，让 agent 的行为可追溯。用户确认是最后一道防线。
05 · 实战：权限系统如何拦截和放行
用真实运行结果展示权限系统在实际任务中的表现：只读操作静默通过、写入操作等待确认、危险命令被拦截。
01 · 为什么 agent 需要实时反馈
没有中间输出的 agent 像黑箱——用户只能等它结束。加上事件流，agent 从脚本升级成交互工具。
02 · 事件系统设计与实现
定义 Agent 事件类型，实现一个轻量的 AgentEmitter 事件总线。
03 · 终端渲染器
监听事件流，把 Agent 状态实时输出到终端——用简单的 console.log 做出清晰的交互体验。
04 · 把一切串起来
在 agent 循环中插入事件发射，在 main.ts 中连接渲染器，完成从黑箱到实时交互的升级。
05 · 实战：事件流让黑箱变透明
用两个对比任务展示事件系统的效果：只读任务轻量流过，多步骤任务实时展示每一步。
01 · 三类记忆
Agent 需要三种不同时间尺度的记忆：短期执行链路、会话任务历史、项目级规则约定。
02 · 运行时状态跟踪
实现 ContextManager，跟踪 agent 在会话中读过的文件、失败的命令和最近的搜索。
03 · 项目规则加载
从 AGENTS.md 加载项目级规则，让 agent 自动感知项目的代码规范和目录约定。
04 · 上下文工程
不是所有信息都值得给模型看。选择、压缩、排序、隔离——用好有限的上下文窗口。
05 · 多轮任务连续性
在 main.ts 的交互循环中持久化 ContextManager，让 agent 跨轮次记住之前的操作。
06 · 实战：记忆与多轮对话
用三轮连续对话展示 ContextManager 的效果：第一轮搜索的信息在后续轮次中被记录，上下文随着会话逐步积累。
01 · 什么是 Skill
把巨大的系统提示词拆成按任务类型分发的技能模块——更可维护、更精准、更可复用。
02 · 三个内置技能
设计 debug、review、refactor 三个内置 skill，每种技能为模型定义特定的工作步骤和输出要求。
03 · 技能匹配机制
两种触发方式：显式前缀（/debug）和关键词自动匹配。显式优先，自动兜底。
04 · 技能系统工程化
把 skill 指令注入系统提示词，理解 skill 与 agent 的关系，以及可扩展的技能加载设计。
05 · 实战：技能匹配效果
用同一个任务分别触发 debug、review 技能，展示 skill 如何改变 agent 的工作方式。
01 · Hook 的四个时机
在 agent 执行的关键节点插入回调——before_tool、after_tool、after_edit、before_finish。
02 · 编辑后自动处理
利用 after_edit hook，在文件修改后自动格式化代码——让 agent 的输出更规范。
03 · 审计日志与风险拦截
用 after_tool hook 记录工具调用日志，用 before_tool hook 拦截危险操作——让 agent 的行为可追溯、可控制。
04 · Hook 系统的产品价值
Hook 不是炫技——它让 agent 的行为更稳定、更规范、更容易治理。
05 · 实战：Hook 执行效果
用 agent 修改文件的任务，展示 after_tool 审计日志 hook 在工具调用链中的实际表现。
01 · MCP 是什么
Model Context Protocol 让 agent 的工具能力不再写死在代码里——通过标准协议接入外部工具服务器。
02 · MCP Client 实现
通过 stdio JSON-RPC 连接 MCP server，发现和调用外部工具——核心只需要一个类。
03 · MCP 工具桥接
用 wrapMcpTool 把 MCP 工具定义转换为内部 Tool 接口——模型不需要知道一个工具是内置的还是外部的。
04 · MCP 的边界
MCP 是扩展机制，不是主线逻辑。先有本地核心能力，再谈外部扩展。
05 · 实战：MCP 接入外部工具
展示 MCP 配置解析、工具发现和桥接的完整流程，以及未配置 MCP 时 agent 的行为。
01 · 为什么需要 SubAgent
单 agent 面对复杂任务时，上下文膨胀、角色混乱。角色分工是自然的解法。
02 · 三种角色定义
explorer（搜索）、editor（修改）、reviewer（审查）——三种 subagent 角色，各有专门的系统提示词。
03 · 上下文隔离与结果传递
每个 subagent 只看到自己的任务，不共享全部上下文。前置任务的结果作为附加上下文传入。
04 · 编排与串行执行
Orchestrator 按顺序执行子任务，把前置结果传递给后续 subagent。
05 · 实战：SubAgent 协作
把前面所有能力综合起来，让主 agent 通过 delegate_tasks 工具协调多个 subagent 完成复杂任务。
01 · CLI 命令设计
把 agent 从启动脚本升级成正式的命令行工具——支持 ask、plan、interactive 三种模式。
02 · 配置与会话
通过环境变量配置模型、权限和 MCP。会话在交互模式下持续，退出时清理。
03 · 非交互模式
ask 和 plan 命令支持脚本化调用——适合 CI、自动化和管道操作。
04 · 错误处理与退出码
明确的退出码、清晰的错误信息、合理的重试建议——让 agent 的错误可诊断。
05 · 毕业项目
在真实仓库中完成一次完整任务——从理解需求到验证结果，把所有章节的能力串联起来。
06 · 课程总结
回看整个架构，对比主流产品，明确 agent 的演进方向。
什么是 Next.js？
本文介绍 Next.js 的核心概念、与 React 的关系以及其主要优势。
项目结构与配置详解
详细解析 Next.js App Router 的目录结构、核心配置文件及最佳实践。
路由系统基础
深入理解 Next.js 的文件系统路由、动态路由及路由组等核心概念。
API 路由完全指南
全面掌握 Next.js API Routes 的创建、请求处理及响应格式。
服务端与客户端组件
深入解析服务端组件与客户端组件的区别、使用场景及渲染模式。
数据获取模式
学习 Next.js 中的多种数据获取模式，包括 fetch、缓存及数据重新验证。
流式响应实现
实现基于 AI 的流式响应，提升聊天应用的实时交互体验。
React Hooks 与导航
掌握 React Hooks 在 Next.js 中的应用及页面导航的最佳实践。
中间件与认证模式
学习 Next.js 中间件的使用，实现路由拦截与用户认证功能。
企业级分层架构
构建可扩展的企业级应用架构，实现代码分层与模块化设计。
完整项目功能复盘
回顾完整项目功能，总结开发经验与关键技术点。
快速开始
LangGraph.js 核心概念极速入门教程
基础图结构
构建你的第一个 LangGraph 应用，理解图、节点和边的核心概念
状态管理详解
深入理解 LangGraph 的状态更新机制：Reducer 和默认值
LLM 节点集成
将大语言模型引入你的工作流，构建智能节点
流程控制与路由
掌握 LangGraph 的核心路由能力：条件分支、循环与并行执行
流式输出
构建实时响应的 AI 应用：掌握 LangGraph 的多种流式输出模式
工具调用与 Agent
构建真正的智能体：让 LLM 学会使用工具（Tool Calling）
记忆与持久化
让 AI 拥有记忆：使用 Checkpointer 实现多轮对话与状态保存
人机交互
构建可控的 AI：在工作流中插入人工审批和干预