LangGraph.js Chat Bot 实战课

这套课程面向想真正做出一个 AI Chat Bot 的学习者。它不是零散知识点合集，而是让一个真实项目沿着课程顺序持续演进：先跑通最小对话，再解释架构，再补上记忆、工具、多模型、数据库、认证、高级输出和部署。

课程目标

学完后，你应该能够：

• 用 Next.js App Router + TypeScript 搭出聊天应用的前后端骨架
• 用 LangGraph.js 组织最小 Agent 工作流
• 理解聊天应用里的消息模型、流式输出和分层结构
• 继续把 Demo 扩展到记忆、工具调用、多模型和产品化能力

前置知识

开始前建议你已经具备：

• 基础的 JavaScript / TypeScript 能力
• 对 React 和 Next.js 有入门了解
• 知道 API 请求、环境变量和依赖安装这些基本开发概念
• 对大模型和 Prompt 有初步认知，但不要求有 Agent 开发经验

学习方式

这套课程最重要的原则是按顺序推进。每一课都建立在上一课的代码基础上，不是彼此独立的小示例。

推荐阅读顺序：

1. 先看课程首页，建立整体路线图。
2. 再按阶段分组进入具体课时，理解这一阶段到底在解决什么问题。
3. 最后结合源码逐步实现和验证。

课程目录

前言

第一阶段 · 最小可运行闭环

先把聊天应用跑起来，解决”页面能用、消息能发、回复能显示”的最小问题。

第二阶段 · 结构理解与代码组织

解释为什么代码要分层、为什么消息不能只用一种结构，帮助你建立后续工程化扩展的认知基础。

第三阶段 · Agent 核心能力

让 Chat Bot 从”能回复”升级到”接入真实 API、能记住上下文、能调用工具”，真正进入 Agent 能力建设。

第四阶段 · 模型与多模态扩展

让应用开始具备模型切换、多 provider 适配，以及图片上传和多模态消息能力。

第五阶段 · 真实产品基础能力

让应用进入真正的产品化基础阶段，先补上用户身份边界，再把线程元数据和工作流历史接进真实数据库。

第六阶段 · 高级功能

让工具结果不再停留在纯文本层，而是先进入真实图片生成，再把结构化 React 结果接进 Canvas，并继续升级成可编辑、可保存、可分享的工作区。

第七阶段 · 交付上线

把已经完成的聊天、工具、数据库、认证和 Canvas 能力带入部署语境，补上 api/health、关键环境变量检查和上线前验收路径。

课程源码

• 查看课程源码仓库
• 查看默认分支源码
• 查看课程大纲

当前示例覆盖范围

当前网站文档已经覆盖前 16 课：

• 第 01 课 · 项目初始化与最小架构
• 第 02 课 · 核心对话流
• 第 03 课 · 流式输出
• 第 04 课 · 分层架构
• 第 05 课 · LangChain 消息类型
• 第 06 课 · 接入真实 API 与记忆系统
• 第 07 课 · 工具调用
• 第 08 课 · 统一工具配置
• 第 09 课 · 模型切换与 Provider
• 第 10 课 · 图片上传与多模态消息
• 第 11 课 · 用户认证
• 第 12 课 · Supabase 数据库边界
• 第 13 课 · Google 图片生成工具
• 第 14 课 · Canvas 工作流
• 第 15 课 · 自定义渲染与交互
• 第 16 课 · 部署与上线交付

推荐起点

如果你第一次进入这套课程，建议直接从这里开始：

1. 第 01 课 · 项目初始化与最小架构
2. 第 02 课 · 核心对话流