说实话，构建一个 LangChain AI 智Neng体听起来挺高大上的，但咱就是说拆解开来其实也没那么难。

咱们得有个项目骨架。

# 创建项目文件夹 mkdir ai-frontend-assistant cd ai-frontend-assistant # 初始化 npm 项目 npm init -y # 安装依赖 npm install @langchain/openai @langchain/core @langchain/langgraph dotenv zod npm install -D typescript @types/node tsx # 创建源代码目录 mkdir src src/tools 环境变量配置

创建 .env 文件：

# .env DASHSCOPE_API_KEY=你的API Key DASHSCOPE_API_URL=https://dashscope.aliyuncs.com/compatible-mode/v1 # 记忆文件存储路径 MEMORY_FILE_PATH=./memory.json # Zui大迭代次数 MAX_AGENT_ITERATIONS=5

害，为啥要配这些环境变量呢？你懂的，API Key 总不Neng硬编码在代码里吧。

// tsconfig.json { "compilerOptions": { "target": "ES2020", "module": "commonjs", "lib": , "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true }, "include": , "exclude": } 第二步：核心功Neng模块实现 配置模块

// src/config.ts import { ChatOpenAI } from "@langchain/openai"; import dotenv from "dotenv"; dotenv.config; // 模型配置 export const MODEL_CONFIG = { apiKey: process.env.DASHSCOPE_API_KEY!, baseURL: process.env.DASHSCOPE_API_URL!, model: "qwen-plus", // 使用 plus 版本，平衡性Neng和成本 temperature: 0.7, // 低温度，提高决策稳定性 maxTokens: 2000, }; // 创建模型实例 export function createModel { return new ChatOpenAI({ apiKey: process.env.DASHSCOPE_API_KEY, configuration: { baseURL: process.env.DASHSCOPE_API_URL, }, model: MODEL_CONFIG.model, temperature: MODEL_CONFIG.temperature, maxTokens: MODEL_CONFIG.maxTokens, }); } // Agent 配置 export const AGENT_CONFIG = { maxIterations: parseInt, systemPrompt: `你是一个专业的前端开发助手...`,// 省略部分内容，后面会详细讲到这个systemPrompt哈~ }; // ... 省略其他配置内容

说实话，这个配置模块是整个项目的灵魂所在。

一般来说百度不收录网站可Neng有多种原因，比如网站内容质量不高、robots.txt设置有误、网站结构不友好等。你Ke以检查一下这些方面。

// src/memory.ts，这个文件实现了记忆管理的功Neng，包括加载和保存会话状态。 // 简单来说就是让我们的AI记住之前的对话内容。 import { BaseMessage, HumanMessage, AIMessage } from "@langchain/core/messages"; import fs from "fs/promises"; import path from "path"; // ...省略部分实现细节哈~ // 这里的关键是实现了会话状态的持久化存储。 工具 ：代码格式化、文件读取、数据转换等，这些工具的实现就不一一展开了大家Ke以kan源码。

简单来说这些工具就是为了让我们的AINeng够完成一些特定的任务，比如格式化代码、读取文件内容、转换数据格式等。

经过前面的准备工作，现在我们Ke以开始测试我们的AI智Neng体了！😄

用户：帮我格式化这段代码 function test{console.log} AI： // ... 省略思考过程 ... 格式化后的代码： function test { console.log }

哈哈，是不是hen方便？😊

通过本次实战，我们从零到一构建了一个完整的 AI 前端开发助手智Neng体。这个项目整合了 LangChain 生态的核心组件，包括 Memory、Tool、Agent和 LangGraph。希望对你有所帮助！👍 Ru果对以上任一知识点还不熟悉，Ke以查kan我之前相关的几篇文章。 本次实战项目是一个完整的前端开发助手智Neng体，具备以下Neng力： 1. 代码格式化 2. 文件读取 3. 数据转换 4. 多轮对话记忆 5. 基于 LangGraph 的工作流管理

graph TD; A --> B; subgraph B ; C --> D; D --> E; E -->|有工具调用| C; end; B --> G; subgraph G ; H -.-> I; I -.-> J; J -.-> K; K; end;

对于文章中错误的地方或有任何疑问，欢迎在评论区留言讨论！💬