快速开始
LangGraph.js 核心概念极速入门教程
🚀 LangGraph.js 快速开始
欢迎来到 LangGraph.js 快速入门系列教程。本系列教程通过 8 个循序渐进的示例,帮助你从零开始掌握 LangGraph 的核心概念。
所有示例代码均基于 langgraphjs-course-code 仓库。
📖 教程目录
精心设计的学习路径:
1️⃣ 基础篇
2️⃣ 进阶篇
3️⃣ Agent 篇
🛠️ 准备工作
1. 前置要求
在开始之前,请确保你已经:
- ✅ 安装了 Node.js (推荐 v18 或更高版本)
- ✅ 准备好一个 OpenAI 兼容的 API Key (阿里云百炼 / OpenAI / 其他)
- ✅ 熟悉基础的 TypeScript / JavaScript 语法
2. 克隆项目并安装依赖
# 克隆示例代码仓库
git clone https://github.com/loock-ai/langgraphjs-course-code.git
cd langgraphjs-course-code
# 安装依赖
npm install
# 配置环境变量
cp .env.example .env
# 编辑 .env 填入你的 API Key3. 环境变量配置
支持的 AI 平台
本项目支持所有兼容 OpenAI API 规范的平台,包括:
- 阿里云百炼平台 ⭐ (推荐,性价比高)
- OpenAI 官方 API
- 其他兼容 OpenAI 格式的平台
获取 API Key
阿里云百炼平台:
-
访问 阿里云百炼控制台
-
登录并创建 API Key
-
复制生成的 Key
OpenAI 官方:
- 访问 OpenAI API Keys
- 创建新的 API Key
- 复制生成的 Key
配置环境变量
在项目根目录创建 .env 文件:
# AI 模型配置
OPENAI_API_KEY=your_api_key_here
OPENAI_BASE_URL=https://dashscope.aliyuncs.com/compatible-mode/v1 # 阿里云百炼
# OPENAI_BASE_URL=https://api.openai.com/v1 # OpenAI 官方
# 可选:指定默认模型
OPENAI_MODEL=qwen-plus # 阿里云百炼模型
# OPENAI_MODEL=gpt-4 # OpenAI 模型重要提示: .env 文件已在 .gitignore 中,确保不会泄露你的 API 密钥。
如何获取模型名称:
在阿里云百炼的模型广场找到合适的模型,点击查看详情,复制模型名称即可:
4. LangSmith 配置 (可选)
LangSmith 是 LangChain 官方提供的可观测性平台,用于调试、测试和监控 LLM 应用。配置后可以追踪每次 LangGraph 运行的详细信息。
获取 LangSmith API Key
-
创建账户: 访问 smith.langchain.com,使用 Google、GitHub 或 邮箱 登录
-
创建 API Key: 进入 Settings page → API Keys → Create API Key,复制生成的 Key 并妥善保存
配置环境变量
在 .env 文件中添加以下配置:
# LangSmith 配置 (可选,用于调试和监控)
LANGSMITH_API_KEY=your_langsmith_api_key_here
LANGSMITH_TRACING=true
LANGSMITH_PROJECT=langgraph-course # 项目名称,可自定义配置完成后,运行示例代码时会自动将追踪数据发送到 LangSmith,你可以在 LangSmith 控制台 中查看详细的运行日志、Token 使用量、延迟等信息。
提示: 如果不需要追踪功能,可以不配置 LangSmith,不会影响示例代码的正常运行。
5. 全局安装 esno
esno 是一个轻量级的 TypeScript 运行器,可以直接运行 .ts 文件,无需预编译:
# 全局安装 TypeScript 运行器
npm install -g esno
# 或者使用 pnpm
pnpm add -g esno6. 验证环境配置
在运行示例代码之前,建议先验证环境配置是否正确:
# 运行环境检查脚本
esno check-setup.ts这个脚本会检查:
- ✅ 环境变量是否正确配置
- ✅ 依赖包是否完整安装
- ✅ LangGraph 模块是否可以正常导入
💻 运行示例代码
项目提供了三种运行方式,选择最适合你的工作流:
方式 1: esno 命令行运行 (推荐)
最简单直接的方式,适合快速验证和调试:
# 运行示例代码
esno quick-start/1.graph.ts控制台会输出执行结果:
方式 2: VS Code Code Runner 运行
适合 VS Code 用户,一键运行代码:
步骤 1: 安装插件
步骤 2: 配置插件
按 Cmd + Shift + P (Mac) 或 Ctrl + Shift + P (Windows/Linux),输入 open user settings json:
在配置文件中添加:
{
"code-runner.executorMap": {
"typescript": "/path/to/esno" // 替换为 esno 的绝对路径
}
}提示: 运行
which esno(Mac/Linux) 或where esno(Windows) 可以获取 esno 的安装路径。
步骤 3: 运行代码
打开 .ts 文件,点击右上角的播放按钮,下方控制台会输出执行结果:
方式 3: LangGraph Studio 可视化调试
最强大的方式,提供可视化界面和交互式调试:
步骤 1: 启动服务
项目已配置好 langgraph.json 文件,直接启动:
pnpm start控制台会输出访问链接:
步骤 2: 打开 Studio UI
点击 Studio UI 链接,在浏览器中查看图结构:
步骤 3: 交互式调试
在 Input 区域输入内容,右侧会实时显示每个节点的执行过程和输出:
步骤 4: 切换不同的图
点击顶部的下拉菜单,可以切换到不同的示例图:
🎯 下一步
准备好了吗?让我们开始第一章的学习吧!
👉 01 基础图结构
在第一章中,你将学习:
- 如何创建你的第一个 LangGraph 图
- 理解节点 (Node) 和边 (Edge) 的概念
- 掌握图的基本构建方法
登录以继续阅读
解锁完整文档、代码示例及更多高级功能。