环境搭建
引言
工欲善其事，必先利其器。在开始 LangGraphJS 的学习之旅之前，我们需要搭建一个完整的开发环境。本章将为你提供详细的环境搭建指南，确保你能够顺利开始开发工作。
系统要求
基础要求
- Node.js: 版本 18.0.0 或更高
- 包管理器: npm (8.0+)、pnpm (7.0+) 或 yarn (1.22+)
- 操作系统: Windows 10+、macOS 10.15+、Linux (Ubuntu 18.04+)
推荐配置
- Node.js: 最新 LTS 版本（当前推荐 20.x）
- 包管理器: pnpm（性能更好，磁盘占用更少）
- 编辑器: VS Code + TypeScript 插件
版本检查
快速开始
创建新项目
从零开始创建一个 LangGraph 项目：
# 创建项目目录
mkdir my-langgraph-project
cd my-langgraph-project
# 初始化 package.json
pnpm init
# 安装核心依赖
pnpm add @langchain/langgraph @langchain/core @langchain/openai zod dotenv
# 安装开发依赖
pnpm add -D typescript @types/node
如果你使用 npm 或 yarn，只需将 pnpm 替换为相应的命令即可。
为什么推荐 pnpm？
- 更快的安装速度：利用硬链接和内容寻址存储
- 节省磁盘空间：全局存储，避免重复下载
- 更严格的依赖管理：防止幽灵依赖问题
依赖说明
核心依赖
| 包名 | 作用 |
|---|---|
@langchain/langgraph | LangGraph 核心库 |
@langchain/core | LangChain 基础功能 |
@langchain/openai | OpenAI 模型集成 |
zod | 数据验证和类型安全 |
dotenv | 环境变量管理 |
可选依赖
根据你的需求，可能还需要以下依赖：
其他模型提供商：
@langchain/anthropic- Anthropic Claude@langchain/google-genai- Google Gemini@langchain/ollama- 本地模型
扩展功能：
@langchain/community- 预构建工具@langchain/mcp-adapters- MCP 协议支持
环境配置
API 密钥设置
创建 .env 文件来管理 API 密钥：
.env
# OpenAI API 密钥
OPENAI_API_KEY=your_openai_api_key_here
# Anthropic API 密钥（如果使用 Claude）
ANTHROPIC_API_KEY=your_anthropic_api_key_here
# LangSmith 追踪（可选）
LANGCHAIN_TRACING_V2=true
LANGCHAIN_API_KEY=your_langsmith_api_key_here
安全提醒
重要：
- 将
.env文件添加到.gitignore中 - 不要在代码中硬编码 API 密钥
- 在生产环境中使用环境变量或密钥管理服务
TypeScript 配置
创建 tsconfig.json 文件：
tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"types": ["node"]
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
项目结构
推荐的项目结构：
my-langgraph-project/
├── src/
│ ├── agents/ # Agent 定义
│ ├── tools/ # 自定义工具
│ ├── utils/ # 工具函数
│ └── index.ts # 入口文件
├── .env # 环境变量
├── .gitignore # Git 忽略文件
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
└── README.md # 项目说明
验证安装
创建测试文件
创建 src/index.ts 文件来验证环境是否正确：
import 'dotenv/config';
import { StateGraph, Annotation, START, END } from '@langchain/langgraph';
import { HumanMessage } from '@langchain/core/messages';
import { ChatOpenAI } from '@langchain/openai';
// 定义状态
const StateAnnotation = Annotation.Root({
message: Annotation<string>,
});
// 创建 LLM 节点
const llmNode = async (state: typeof StateAnnotation.State) => {
const model = new ChatOpenAI({ model: 'gpt-3.5-turbo' });
const response = await model.invoke([new HumanMessage(state.message)]);
return { message: response.content };
};
// 构建图
const graph = new StateGraph(StateAnnotation)
.addNode('llm', llmNode)
.addEdge(START, 'llm')
.addEdge('llm', END)
.compile();
// 运行
const result = await graph.invoke({ message: '你好！' });
console.log(result.message);
运行测试
# 使用 esno 直接运行 TypeScript（推荐）
esno src/index.ts
预期输出
如果一切配置正确，你应该看到类似以下的输出：
你好！很高兴见到你。我是一个AI助手，有什么可以帮助你的吗？
恭喜！
你已经成功创建并运行了第一个 LangGraph 应用！这个简单的示例展示了 LangGraph 的核心概念：
- 状态管理：使用
Annotation定义状态结构 - 节点：使用函数处理状态转换
- 边：定义节点之间的连接关系
- 执行：通过
invoke运行整个图
开发工具推荐
VS Code 插件
推荐安装以下 VS Code 插件提升开发体验：
- TypeScript Importer: 自动导入模块
- Prettier: 代码格式化
- ESLint: 代码检查
- DotENV: 环境变量语法高亮
VS Code 配置
创建 .vscode/settings.json：
{
"typescript.preferences.importModuleSpecifier": "relative",
"editor.formatOnSave": true
}
下一步
恭喜！你已经成功搭建了 LangGraphJS 开发环境。现在你可以：
- 探索示例：运行更多示例代码，了解不同功能
- 学习核心概念：深入理解图、节点、边和状态管理
- 构建第一个应用：创建你的第一个智能代理应用
相关资源
获取帮助
如果在环境搭建过程中遇到问题：
- 检查文档：首先查看官方文档和本指南
- 搜索问题：在 GitHub Issues 中搜索类似问题
- 社区求助：在 Discord 或论坛中寻求帮助
下一步
环境搭建完成！让我们继续学习《核心概念》，深入理解 LangGraph 的工作原理。