作为前端开发者，你是否也有这样的纠结：想入门 AI，却被一堆 Python 教程劝退？用过 ChatGPT、Stable Diffusion，却觉得只是 “用工具” 而非 “懂原理”？尝试过 RAG、Agent 这些概念，却不知道如何用 JavaScript 落地？

今天就从前端视角出发，用 LangGraph（JS 版）手把手实现一个 ReAct 智能体 —— 这是 AI Agent 的基础模式，也是掌握复杂智能体的第一步。哪怕你只懂基础 JS，跟着步骤走也能做出来。

前端学 AI 应该学什么？

学 AI 最痛苦的是 “找不到方向”：到底该从哪入手？学完怎么算 “真懂”？我刚开始接触 AI 时，走了不少弯路：先玩 Stable Diffusion 生成图片，再用各种大模型聊天，甚至用 AI 插件写代码。看似学了很多，却总觉得 “没抓住核心”—— 因为这些都是 “用工具”，没搞懂背后的逻辑，换个场景就懵了。

直到接触 RAG（检索增强生成）、MCP（多智能体协作）、LangChain 这些技术，才慢慢明白：前端学 AI，核心要学 “如何开发 Agent（智能体）”。

Agent 是 AI 的 “应用形态”—— 比如能自动查资料写报告的 AI 助手、能帮你处理重复工作的智能工具，本质都是 Agent。而网上关于 Agent 的教程，90% 以上用 Python，前端开发者想入门难上加难。

所以接下来，我会用 JS 语言，基于 LangGraph 做一系列 AI 项目，从基础到进阶，帮前端同学真正 “落地 AI 开发”，而不是停留在 “用工具” 的层面。

开发 Agent 一定要用 LangGraph 吗？

答案是：完全不用！

你可以用纯 JS 写逻辑（比如用循环实现 “思考 - 行动” 流程），也可以用 Coze、百度千帆这些云平台（拖拖拽拽搭 Agent），甚至能用纯提示词（比如给 ChatGPT 写指令，让它模拟智能体）。

那为什么推荐 LangGraph？有两个核心原因：

• 降低 “理解成本”：它把 Agent 的核心能力（比如记忆管理、决策逻辑、工具调用）都封装成了 “可复用模块”，不用你从零写复杂逻辑；
• 贴近前端思维：用 “节点”“边” 定义工作流，像画流程图一样开发，前端同学对 “组件化、模块化” 的理解能直接复用；
• debug 友好 ：搭配 LangStudio 能实时看流程运行，哪里错了一眼就懂，比自己写纯 JS 逻辑排错快 10 倍。

简单说：LangGraph 不是 “唯一选择”，却是前端入门 Agent 的 “最优选择”—— 它帮你把精力放在 “理解 AI 逻辑” 上，而不是 “写重复代码”。

ReAct 智能体：前端最易上手的 Agent 模式

为什么先学 ReAct？

对前端开发者来说，ReAct 是最 “接地气” 的 Agent 模式 —— 它的逻辑和 “人解决问题的思路” 几乎一样：

比如你想知道 “今天上海天气要不要带伞”，会先 “思考”（要不要查实时天气？），再 “行动”（打开天气 APP），最后 “总结”（多云，不用带伞）。

ReAct 的核心就是 “推理（Reason）+ 行动（Act）” 的循环，源自论文《ReAct: Synergizing Reasoning and Acting in Language Models》。它没有复杂的数学公式，全是 “逻辑判断”，用 JS 就能轻松实现。

更重要的是：所有复杂 Agent（比如能写报告、能处理业务的 AI），底层都是 ReAct 的延伸。学会它，后续学多智能体、长记忆智能体，都会像 “搭积木” 一样简单。

项目概述：技术栈与效果预览

用什么技术？

核心技术栈：**LangGraph（JS 版）+ LangStudio（调试工具）+ LangSmith（日志追踪）**

• LangGraph：负责构建智能体的 “思考 - 行动” 流程；
• LangStudio：可视化调试，实时看每一步运行状态；
• LangSmith：记录模型调用、工具执行的日志，方便排查问题。

这些工具都有免费额度，个人开发完全够用，不用担心收费问题。

最终效果是什么样？

你不用写复杂代码，启动项目后会自动打开 LangStudio，输入问题就能看到：

• 智能体先 “思考”：“用户问上海天气，我需要调用搜索工具查实时数据”；
• 再 “行动”：自动调用 Tavily 搜索（类似百度），获取天气信息；
• 最后 “总结”：把搜索结果整理成自然语言，输出 “今天上海多云转晴，气温 22-28℃，不用带伞”。

整个过程不用你手动干预，智能体自己完成 “思考 - 行动 - 输出”，像个 “迷你 AI 助手”。

目录结构：3 分钟看懂文件分工

项目叫 “react-agent”，文件不多，每个文件的职责都很明确，前端同学一看就懂：

react-agent/

不用怕文件多，核心逻辑全在graph.ts里，其他文件都是 “配置或辅助”，改改参数就能用。

核心实现：从流程到代码，前端能看懂的细节

先记住一个核心逻辑：整个智能体就是 “循环做 3 件事”—— 思考→判断要不要用工具→用工具 / 输出答案。

下面拆成 “状态管理、工作流、节点函数” 三部分，每个部分都附 “前端能懂的解释” 和 “可复制的代码”。

1. 状态管理：智能体的 “记忆本”

前端同学都懂 “组件状态”（比如 React 的 useState），智能体的 “状态” 其实就是它的 “记忆”—— 比如用户问了什么、之前思考了什么、工具返回了什么，都存在这里。

LangGraph 用MessagesAnnotation管理状态，简单说就是 “一个存消息的数组”，类似前端的 “聊天记录数组”。

在graph.ts里，状态的使用方式如下：

// graph.ts

前端视角解读：

• state就像 React 组件的state，存着所有 “历史数据”；
• Update就像setState的参数，告诉 LangGraph “要更新哪些数据”；
• 整个函数的逻辑：拿历史记录→问模型→把模型回复存起来，和前端 “请求接口→更新 UI” 的逻辑几乎一样。

2. 工作流构建：像画流程图一样写代码

智能体的 “思考 - 行动” 流程，用 LangGraph 的StateGraph定义，就像用 Visio 画流程图，前端同学很容易理解。

核心代码在graph.ts里：

// graph.ts

用流程图简化理解：

前端同学应该很熟悉这种逻辑：就像 “组件间跳转”，用 “条件判断” 决定下一步去哪，完全不用写复杂的循环和分支。

3. 工具调用：给智能体加 “外挂”

智能体自己不会 “查天气、算数学题”，需要靠 “工具” 实现。就像前端项目需要 “调用接口” 获取数据，智能体需要 “调用工具” 扩展能力。

在tools.ts里，我们定义一个 “搜索工具”（用 Tavily，类似百度搜索）：

// tools.ts

前端视角解读：

• 工具就像 “封装好的 API 函数”，智能体调用时，会自动传参数（比如搜索关键词），并返回结果；
• 后续想加 “计算器工具”，只需新增一个工具类，加入TOOLS数组即可，不用改核心流程，符合 “开闭原则”。

4. 配置与提示词：让智能体 “听话”

想让智能体按你的要求工作，需要两个关键配置：“用什么模型” 和 “系统提示词”。

在configuration.ts里定义配置项：

// configuration.ts

在prompts.ts里写系统提示词（核心是 “告诉智能体规则”）：

// prompts.ts

前端视角解读：

• 系统提示词就像 “组件的说明书”，告诉智能体 “该做什么、不该做什么”；
• 配置项用Annotation定义，类似前端用TypeScript做类型校验，避免传错参数。

完整运行流程：一步一步看智能体工作

以 “用户问：今天上海天气怎么样？” 为例，整个流程如下：

用户输入问题：调用reactAgent.invoke({ messages: [{ role: "user", content: "今天上海天气怎么样？" }] })；

第一步：思考（callModel）：

• 模型收到问题，结合系统提示词，判断 “需要调用搜索工具查实时天气”；
• 返回tool\_calls: [{ name: "tavily\_search\_results", parameters: { query: "2024年上海今日天气" } }]；

第二步：决策（routeModelOutput）：

检测到tool\_calls，决定跳转到 “tools” 节点；

第三步：行动（tools）：

调用 Tavily 搜索，获取结果：“上海今日多云转晴，气温 22-28℃，风力 3 级”；

第四步：再思考（callModel）：

模型分析搜索结果，判断 “不需要再调用工具，可直接整理答案”；

第五步：结束（end）：

模型返回自然语言回答：“今天上海多云转晴，气温 22-28℃，适合外出，不用带伞～”；

输出结果：前端拿到回答，展示给用户。

整个过程不用你手动干预，智能体自己完成 “思考 - 行动 - 总结”，和人解决问题的逻辑完全一致。

如何启动项目？3 步搞定（附命令）

第一步：准备环境

• 安装 Node.js（18 + 版本，前端同学应该都有）；
• 克隆项目（或下载压缩包）：git clone [你的仓库地址]（如果没有仓库，可直接新建文件夹，复制上面的代码）；
• 安装依赖：npm install @langchain/langgraph @langchain/core @langchain/community dotenv。

第二步：配置 API key（可选）

• 去 Tavily 官网免费申请 API key；
• 新建.env文件，写入：TAVILY\_API\_KEY=你的API key；
• 在tools.ts里引入 dotenv：import dotenv from "dotenv"; dotenv.config();，并给TavilySearchResults加apiKey: process.env.TAVILY\_API\_KEY。

第三步：启动项目并调试

1. 新建启动文件：在项目根目录新建index.ts，写入调用智能体的代码（复制即可用）：

// index.ts

配置运行脚本：打开package.json，在scripts里加启动命令：

"scripts":{

（如果没装ts-node，先执行npm install ts-node typescript -D，并新建tsconfig.json，用默认配置即可）

启动并调试：

要是遇到报错（比如 “模型连接失败”），先看 LangStudio 的 “Logs” 面板，里面会显示具体错误原因（比如 API key 无效、网络问题），按提示修改即可。

• 执行命令：npm start；

• 此时会自动打开浏览器，进入 LangStudio 调试页面；

• 在命令行输入问题（比如 “今天上海天气怎么样？”），就能在 LangStudio 里实时看到：

• 智能体先进入callModel节点，输出 “需要调用搜索工具”；

• 接着跳转到tools节点，显示搜索过程和结果；

• 最后回到callModel节点，整理结果并输出回答。

如何扩展？3 个前端能落地的方向

学会基础 ReAct 智能体后，你可以轻松扩展功能，把它变成 “实用工具”，比如：

1. 加 “计算器工具”：解决数学问题

在tools.ts里新增计算器工具，让智能体能算加减乘除：

// tools.ts 新增代码

启动后输入 “3.14 乘以 5 的平方是多少”，智能体会自动调用计算器工具，返回正确结果。

2. 对接前端项目：做个 “AI 助手组件”

把智能体集成到 React/Vue 项目里，做一个可嵌入的 AI 助手组件：

• 用 Node.js 写个后端接口（比如用 Express），封装智能体调用逻辑；
• 前端用 React 写个聊天组件，用户输入问题后调用后端接口；
• 把结果实时展示在页面上，像 ChatGPT 一样交互。

这样你就能拥有一个 “自己开发的 AI 助手”，嵌入到个人项目或作品集里，比单纯写 Demo 更有亮点。

3. 加 “长期记忆”：让智能体记住历史对话

目前的智能体 “聊完就忘”，你可以用 LangGraph 的Memory模块，让它记住历史对话：

1. 在graph.ts里引入MemorySaver；

2. 构建工作流时加入记忆配置：

import { MemorySaver } from"@langchain/langgraph";

调用时传入configurable: { sessionId: "用户唯一ID" }，智能体就会按用户 ID 保存历史对话。

后续就能实现 “连续对话”，比如先问 “上海天气怎么样”，再问 “那明天适合穿什么衣服”，智能体能结合前一个问题的答案回答。

常见问题：踩过的坑帮你避开

1. 启动后 LangStudio 打不开？

• 先检查命令行是否有 “端口被占用” 的提示，若有，执行lsof -i:3000（Mac）或netstat -ano | findstr "3000"（Windows），找到占用端口的进程并关闭；
• 若还是打不开，直接访问[http://localhost:3000]，手动输入sessionId（随便填，比如 “test123”），再点击 “Load” 即可。

2. 模型调用失败？

• 若用默认的deepseek/deepseek-chat，先检查网络（需能访问外网，或用国内模型如 “通义千问”）；
• 换国内模型：在configuration.ts里把model改成 “qwen-max”（通义千问），并安装对应的依赖npm install @langchain/aliyun；
• 若提示 “API key 无效”，检查.env文件里的 key 是否正确，或重新申请一个。

3. 工具调用没反应？

• 先看 LangStudio 的 “Tools” 面板，是否显示 “Tool Called”；
• 若没显示，检查routeModelOutput函数，确保tool\_calls的判断逻辑正确（比如是否漏了as any类型断言）；
• 若显示 “Tool Failed”，检查工具的 API key 是否有效（比如 Tavily key 是否过期）。

动手试试，你已经超过 80% 的前端！

很多前端同学对 AI 望而却步，其实不是技术难，而是没找到 “适合前端的入门路径”。

你现在已经掌握了：

• ReAct 智能体的核心逻辑（思考 - 行动 - 循环）；
• LangGraph 的基础用法（节点、边、工作流）；
• 工具调用、模型配置、调试排错的实用技巧。

这些能力已经能帮你落地很多小项目：比如自动查资料的脚本、个人 AI 助手、嵌入项目的交互组件。

接下来，你可以：

1. 先按步骤跑通项目，感受智能体的工作流程；
2. 试着加一个自己想要的工具（比如 “翻译工具”“天气查询工具”）；
3. 把它集成到你的前端项目里，做一个可视化的交互界面。

下一篇，我们会深入 “多智能体协作”—— 让多个智能体分工合作（比如一个负责搜索，一个负责写报告，一个负责校对），实现更复杂的任务。关注不迷路，前端学 AI，咱们一步一个脚印来～

互动时间

你已经用 JS 实现了 ReAct 智能体，接下来最想给它加什么功能？是 “计算器”“长期记忆”，还是集成到前端项目里？

评论区聊聊你的想法，抽 1 位同学送【LangGraph 官方中文文档 + 前端 AI 开发手册】（整理了我踩坑的所有笔记）～

能体的工作流程；
2. 试着加一个自己想要的工具（比如 “翻译工具”“天气查询工具”）；
3. 把它集成到你的前端项目里，做一个可视化的交互界面。

如何学习大模型 AI ？

我国在AI大模型领域面临人才短缺，数量与质量均落后于发达国家。2023年，人才缺口已超百万，凸显培养不足。随着Al技术飞速发展，预计到2025年，这一缺口将急剧扩大至400万，严重制约我国Al产业的创新步伐。加强人才培养，优化教育体系，国际合作并进，是破解困局、推动AI发展的关键。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

2025最新大模型学习路线

明确的学习路线至关重要。它能指引新人起点、规划学习顺序、明确核心知识点。大模型领域涉及的知识点非常广泛，没有明确的学习路线可能会导致新人感到迷茫，不知道应该专注于哪些内容。

对于从来没有接触过AI大模型的同学，我帮大家准备了从零基础到精通学习成长路线图以及学习规划。可以说是最科学最系统的学习路线。

针对以上大模型的学习路线我们也整理了对应的学习视频教程，和配套的学习资料。

大模型经典PDF书籍

新手必备的大模型学习PDF书单来了！全是硬核知识，帮你少走弯路！

配套大模型项目实战

所有视频教程所涉及的实战项目和项目源码等

博主介绍＋AI项目案例集锦

MoPaaS专注于Al技术能力建设与应用场景开发，与智学优课联合孵化，培养适合未来发展需求的技术性人才和应用型领袖。

这份完整版的大模型 AI 学习资料已经上传CSDN，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】

为什么要学习大模型？

2025人工智能大模型的技术岗位与能力培养随着人工智能技术的迅速发展和应用 ， 大模型作为其中的重要组成部分 ， 正逐渐成为推动人工智能发展的重要引擎 。大模型以其强大的数据处理和模式识别能力， 广泛应用于自然语言处理 、计算机视觉 、 智能推荐等领域 ，为各行各业带来了革命性的改变和机遇 。

适合人群

• 在校学生：包括专科、本科、硕士和博士研究生。学生应具备扎实的编程基础和一定的数学基础，有志于深入AGI大模型行业，希望开展相关的研究和开发工作。
• IT行业从业人员：包括在职或失业者，涵盖开发、测试、运维、产品经理等职务。拥有一定的IT从业经验，至少1年以上的编程工作经验，对大模型技术感兴趣或有业务需求，希望通过课程提升自身在IT领域的竞争力。
• IT管理及技术研究领域人员：包括技术经理、技术负责人、CTO、架构师、研究员等角色。这些人员需要跟随技术发展趋势，主导技术创新，推动大模型技术在企业业务中的应用与改造。
• 传统AI从业人员：包括算法工程师、机器视觉工程师、深度学习工程师等。这些AI技术人才原先从事机器视觉、自然语言处理、推荐系统等领域工作，现需要快速补充大模型技术能力，获得大模型训练微调的实操技能，以适应新的技术发展趋势。
  

课程精彩瞬间

大模型核心原理与Prompt：掌握大语言模型的核心知识，了解行业应用与趋势；熟练Python编程，提升提示工程技能，为Al应用开发打下坚实基础。

RAG应用开发工程：掌握RAG应用开发全流程，理解前沿技术，提升商业化分析与优化能力，通过实战项目加深理解与应用。

Agent应用架构进阶实践：掌握大模型Agent技术的核心原理与实践应用，能够独立完成Agent系统的设计与开发，提升多智能体协同与复杂任务处理的能力，为AI产品的创新与优化提供有力支持。

模型微调与私有化大模型：掌握大模型微调与私有化部署技能，提升模型优化与部署能力，为大模型项目落地打下坚实基础。

顶尖师资，深耕AI大模型前沿技术

实战专家亲授，让你少走弯路

一对一学习规划，职业生涯指导

• 真实商业项目实训
• 大厂绿色直通车

人才库优秀学员参与真实商业项目实训

以商业交付标准作为学习标准，具备真实大模型项目实践操作经验可写入简历，支持项目背调

大厂绿色直通车，冲击行业高薪岗位

文中涉及到的完整版的大模型 AI 学习资料已经上传CSDN，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】