可选课程模块
探索专为现代开发者设计的全面课程体系。
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` 和上线验收基线，把“本地能跑”收口成“可部署、可排查、可交付”。
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 组件系统
什么是 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：在工作流中插入人工审批和干预