Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
从零手写 Mini Cursor 编程AgentLangChain.jsDeepSeek全自动创建React TodoList前言用过Cursor、Claude Code的前端应该都深有体会一句自然语言AI就能自动创建项目、读写文件、执行终端命令、写完完整业务代码全程不用手动操作。网上大多只讲Python版LangChain AgentNode.js前端原生可运行的完整实战教程极少很多人照着文档写还疯狂踩坑循环逻辑错乱response is not defined报错多工具串行执行任务卡顿严重文件/命令工具缺少容错一报错直接中断流程workingDirectory和cd混用目录找不到模块导入后缀不统一报ERR_MODULE_NOT_FOUND本文带你从零手写一套可直接运行的迷你Cursor编程Agent读完你能收获吃透ReAct Agent完整执行循环底层原理4套生产级工具读/写文件、查看目录、执行终端命令Promise.all并发多工具解决串行卡顿痛点完整可运行Node.js代码一键自动生成带动画、持久化的ReactTS TodoList全套踩坑解决方案、空值兜底、异常捕获、最大循环防死循环逻辑一、先搞懂纯大模型为什么做不了自动化编程原生LLM天生存在3个致命短板只能输出文字无法真正操作本地项目无状态不会自动保存对话上下文必须手动维护消息数组无操作权限不能读写本地文件、执行bash命令、查看目录结构无自主规划能力复杂任务不会拆分步骤不会迭代校验结果Agent核心公式Agent LLM Memory记忆 Tool工具调用 ReAct循环工具就是给大模型装上手脚让AI拥有操作系统文件、执行终端的能力自主完成完整开发流程。ReAct完整执行流程本文代码核心逻辑传入系统提示词用户需求组装消息列表LLM推理判断是否需要调用工具返回tool_calls数组并发批量执行所有工具捕获执行结果工具结果绑定唯一tool_call_id追加进消息上下文循环执行推理→调用工具直到模型不再返回工具调用输出最终结果二、前置环境准备1. 安装依赖pnpminstalldotenv langchain/openai langchain/core chalk zod2. 环境变量 .envDEEPSEEK_API_KEY你的密钥DeepSeek接口完全兼容OpenAI格式使用ChatOpenAI即可快速对接无需额外适配。3. 项目目录结构hello-langchain/ ├── .env ├── src/ │ ├── all-tools.mjs # 四大工具统一导出 │ └── mini-cursor.mjs # Agent主执行逻辑踩坑提醒文件后缀统一使用.mjsESM模块混用.js会出现模块找不到报错。三、工具层实现all-tools.mjs 完整代码封装4个编程必备工具基于node:fs、child_process实现自带异常兜底、路径自动创建。import{tool}fromlangchain/core/tools;importfsfromnode:fs/promises;importpathfromnode:path;import{spawn}fromnode:child_processimport{z}fromzod;// 1. 读取文件工具constreadFileTooltool(async({filePath}){constcontentawaitfs.readFile(filePath,utf-8);console.log([工具调用] read_file(${filePath}) 成功读取${content.length}字节)returncontent;},{name:read_file,description:读取本地文件内容查看代码、分析配置时调用支持相对/绝对路径,schema:z.object({filePath:z.string().describe(待读取文件路径)})})// 2. 写入文件工具自动递归创建目录constwriteFileTooltool(async({filePath,content}){try{constdirpath.dirname(filePath);awaitfs.mkdir(dir,{recursive:true});awaitfs.writeFile(filePath,content,utf-8);console.log([工具调用] write_file(${filePath}) 成功写入${content.length}字节)return成功写入文件${filePath}}catch(err){console.log([工具调用] write_file(${filePath}) 错误${err.message})return写入文件失败${err.message}}},{name:write_file,description:写入文件自动创建不存在的上级目录,schema:z.object({filePath:z.string().describe(文件路径),content:z.string().describe(文件文本内容)})})// 3. 列出目录文件工具constlistDirectoryTooltool(async({directoryPath}){try{constfilesawaitfs.readdir(directoryPath);console.log([工具调用] list_directory(${directoryPath}) 列出${files.length}个文件)return目录内容\n${files.join(\n)}}catch(err){console.log([工具调用] list_directory(${directoryPath}) 错误${err.message})return读取目录失败${err.message}}},{name:list_directory,description:查看指定目录下全部文件与文件夹,schema:z.object({directoryPath:z.string().describe(目标目录路径)})})// 4. 执行终端命令工具核心封装spawn子进程constexecuteCommandTooltool(async({command,workingDirectory}){constcwdworkingDirectory||process.cwd();console.log([工具调用] execute_command(${command}) 工作目录${cwd});returnnewPromise((resolve,reject){// 拆分命令与参数const[cmd,...args]command.split( );constchildspawn(cmd,args,{cwd,stdio:inherit,shell:true,})leterrorMsg;child.on(error,(err){errorMsgerr.message});child.on(close,(code){if(code0){// 三元兜底空字符串防止undefinedconstcwdInfoworkingDirectory?\n\n重要提示命令在目录“${workingDirectory}” 执行:;resolve(命令行成功执行${command}${cwdInfo});}else{resolve(命令执行失败退出码${code}\n 错误${errorMsg})}})})},{name:execute_command,description:执行系统bash命令支持指定工作目录禁止在command内使用cd,schema:z.object({command:z.string().describe(待执行命令字符串),workingDirectory:z.string().describe(指定命令运行目录)})})// 统一导出工具export{readFileTool,writeFileTool,listDirectoryTool,executeCommandTool}关键细节说明三元兜底空值写法const cwdInfo workingDirectory ? 提示文本 : 行业叫法默认值兜底、空保护强制变量永远为字符串避免undefined导致拼接报错。spawn拆分命令通过解构[cmd,...args]拆分指令与参数适配任意多参数命令。执行目录规范workingDirectory会自动切换工作目录命令内禁止写cd xxx否则会路径找不到。四、主程序mini-cursor.mjsReAct循环Agent完整实现完整可运行代码// 手写mini-cursor编程Agent自动生成React TodoListimportdotenv/config;import{ChatOpenAI}fromlangchain/openai;import{HumanMessage,SystemMessage,ToolMessage}fromlangchain/core/messages;import{executeCommandTool,readFileTool,writeFileTool,listDirectoryTool}from./all-tools.mjs;importchalkfromchalk;// 初始化DeepSeek模型constmodelnewChatOpenAI({modelName:deepseek-v4-pro,apiKey:process.env.DEEPSEEK_API_KEY,temperature:0,// 关闭随机性工具调用稳定configuration:{baseURL:https://api.deepseek.com/v1,},});// 注册全部工具consttools[readFileTool,writeFileTool,listDirectoryTool,executeCommandTool]constmodelWithToolsmodel.bindTools(tools);// Agent执行任务需求constcase1创建一个功能丰富的React TodoList 应用 1. 创建项目 echo -e n\nn | pnpm create vite react-todo-app --template react-ts 2. 修改 src/App.tsx ,实现完整功能的TodoList: - 添加、删除、标记完成 - 分类筛选全部/进行中/已完成 - 统计信息显示 - localStorage 数据持久化 3. 添加复杂样式 - 渐变背景蓝到紫 - 卡片阴影圆角 - 悬停效果 4. 添加动画 - 添加/删除时的过渡动画 - 使用css transitions 5. 列出目录确定项目结构 注意 使用pnpm 功能要完整 样式要美观 要有动画效果 之后 react-todo-app 项目中 1. 使用 pnpm install 安装依赖 2. 使用 pnpm run dev 启动服务器// Agent核心执行函数带最大迭代次数防死循环asyncfunctionrunAgentWithTools(query,maxIterations30){// 初始化消息上下文仅创建一次不重复覆盖constmessages[newSystemMessage(你是专业前端项目管理助手使用工具完成开发任务。 当前工作目录:${process.cwd()}可用工具: 1. read_file: 读取文件 2. write_file: 写入/创建文件 3. execute_command: 执行终端命令支持workingDirectory 4. list_directory: 查看目录结构 强制规则 execute_command workingDirectory 参数会自动切换目录命令内绝对不能写cd 错误示例{ command: cd react-todo-app pnpm install, workingDirectory: react-todo-app } 正确示例{ command: pnpm install, workingDirectory: react-todo-app } 回复简洁仅描述执行操作),newHumanMessage(query)];// ReAct循环主逻辑for(leti0;imaxIterations;i){console.log(chalk.blue(\n 第${i1}轮LLM推理 ));// 关键调用模型获取response修复response未定义报错constresponseawaitmodelWithTools.invoke(messages);messages.push(response);// 无工具调用任务结束if(!response.tool_calls||response.tool_calls.length0){console.log(chalk.green(\n✅ AI 任务完成最终回复\n${response.content}\n));returnresponse.content}console.log(chalk.yellow(检测到${response.tool_calls.length}个工具调用串行执行));// 批量执行工具可替换Promise.all实现并发提速for(consttoolCallofresponse.tool_calls){constfoundTooltools.find(tt.nametoolCall.name);if(foundTool){consttoolResultawaitfoundTool.invoke(toolCall.args)messages.push(newToolMessage({content:toolResult,tool_call_id:toolCall.id}))}}}// 达到最大循环次数强制退出returnmessages[messages.length-1].content}// 程序入口try{awaitrunAgentWithTools(case1);}catch(err){console.error(chalk.red(\n ❌ 运行错误${err.message}));}// 超时兜底1000000毫秒强制退出进程setTimeout((){console.log(⏰ 超时兜底强制退出进程);process.exit(0);},1000000);之前踩坑核心修复点response is not defined报错根源最初代码循环内部没有调用modelWithTools.invoke获取response直接使用变量修复后每轮循环先请求大模型拿到返回对象。上下文丢失问题删除循环内重复定义messages数组仅外层初始化一次完整保存多轮工具交互历史。死循环防护增加maxIterations30最大循环限制防止模型无限调用工具卡死程序。彩色日志区分状态引入chalk区分推理、成功、错误日志调试更直观。五、性能优化Promise.all并发多工具串行VS并行性能差距模拟两个IO工具耗时对比// 模拟耗时工具functiongetFileA(){returnnewPromise((resolve)setTimeout(()resolve(文件A内容),2000))}functiongetFileB(){returnnewPromise((resolve)setTimeout(()resolve(文件B内容),500))}// 串行总耗时20005002500msconstrunSerialasync(){constaawaitgetFileA();constbawaitgetFileB();}// 并行总耗时Max(2000,500)2000msconstrunParallelasync(){const[a,b]awaitPromise.all([getFileA(),getFileB()]);}改造工具执行逻辑实现并发把循环串行执行替换为Promise.all批量并发工具越多性能提升越明显// 替换原for循环工具执行代码console.log(chalk.yellow(检测到${response.tool_calls.length}个工具调用并发执行));consttoolResultsawaitPromise.all(response.tool_calls.map(async(toolCall){constfoundTooltools.find(tt.nametoolCall.name);if(!foundTool)return工具不存在${toolCall.name};try{returnawaitfoundTool.invoke(toolCall.args);}catch(err){return工具执行异常${err.message};}}));// 绑定对应tool_call_id存入消息列表response.tool_calls.forEach((toolCall,idx){messages.push(newToolMessage({content:toolResults[idx],tool_call_id:toolCall.id}))});并发核心优势独立无依赖工具同时启动总耗时等于最慢工具耗时单个工具报错单独捕获不会中断整批任务结果数组顺序与tool_calls一一对应完美匹配tool_call_id六、开发全流程高频踩坑提醒坑1ERR_MODULE_NOT_FOUND 文件找不到导入路径后缀必须完整写.mjsESM不支持省略后缀文件名大小写严格匹配Windows ESM导入区分大小写确认all-tools.mjs文件真实存在导出名称和导入完全一致坑2workingDirectory与cd混用目录不存在错误写法command:cd react-todo-app pnpm install,workingDirectory:react-todo-app正确写法command:pnpm install,workingDirectory:react-todo-app子进程会自动切换到指定目录无需手动cd。坑3缺少tool_call_id绑定LLM上下文错乱所有工具返回结果必须通过ToolMessage绑定tool_call_id否则模型无法区分哪条结果对应哪个工具调用逻辑完全混乱。坑4串行调用多工具响应速度极慢文件读取、命令执行都是IO密集操作无依赖工具必须使用Promise.all并发仅工具存在数据依赖时才串行执行。坑5未做空值兜底变量出现undefined所有可选变量使用三元?: 、空值合并??兜底字符串避免后续字符串拼接、打印时报错。坑6无限循环调用工具必须设置最大迭代次数上限防止模型幻觉持续调用工具程序卡死。七、完整执行效果运行命令nodesrc/mini-cursor.mjsAgent全自动完成6大步骤全程无需人工干预调用execute_command执行pnpm create vite创建ReactTS项目调用list_directory校验项目目录生成成功调用writeFileTool重写App.tsx实现Todo完整业务、样式、动画调用readFileTool读取生成代码校验功能完整性切换目录执行pnpm install安装项目依赖执行pnpm run dev启动开发服务器输出最终完成总结八、拓展升级方向接入LangGraph拆分规划Agent、执行Agent实现多智能体分工增加超时控制使用Promise.allSettled替代all单独处理超时卡死工具新增更多工具git操作、npm包查询、代码格式化工具记忆持久化接入Memory模块支持多轮连续开发对话MCP第三方工具接入联网搜索、文档解析能力拓展AI能力边界九、总结本文从零手写了一套迷你Cursor编程Agent完整覆盖LangChain.js工具调用、ReAct循环、Node子进程、文件IO、并发优化核心知识点。核心要点回顾Agent本质是「大模型推理工具执行循环」工具是AI操作本地环境的核心Promise.all并发多工具是解决Agent卡顿的关键优化手段生产级Agent必须包含参数校验、异常捕获、空值兜底、循环次数限制workingDirectory是命令行工具规范禁止在命令内拼接cd切换目录

相关新闻

信息管理与信息系统找工作难吗?岗位方向怎么选

信息管理与信息系统找工作难吗?岗位方向怎么选

信息管理与信息系统,简称信管,找工作并不算“天坑”,但它确实不是一个只靠专业名字就能直接上岸的专业。它的核心优势在于懂业务、懂数据、懂系统,劣势是很多同学学得太散,毕业时不知道自己到底投技术岗、产品岗还是数…

2026/7/22 1:41:27 阅读更多 →
Python进阶:装饰器与面向对象编程实战解析

Python进阶:装饰器与面向对象编程实战解析

1. Python学习笔记的价值与定位Python作为当下最热门的编程语言之一,其学习资源早已泛滥成灾。但真正有价值的学习笔记,往往不是那些大而全的教程,而是能够反映真实学习路径、记录关键突破点的实战记录。ScalersTalk成长会的这份第7周Python小…

2026/7/23 7:02:59 阅读更多 →
MyBatis-Plus实战:高效数据层开发与优化

MyBatis-Plus实战:高效数据层开发与优化

1. MyBatis-Plus实战指南:数据层高效开发之道作为Java生态中最受欢迎的ORM框架之一,MyBatis-Plus在传统MyBatis基础上进行了全方位增强。我在三个大型企业级项目中深度使用后发现,其BaseMapper与Wrapper组合能够减少约60%的数据层样板代码。本…

2026/7/24 1:06:03 阅读更多 →

最新新闻

第九篇:《GORM 实战:连接 MySQL 与 CRUD 操作》

第九篇:《GORM 实战:连接 MySQL 与 CRUD 操作》

在前面的文章中,我们的图书数据都存储在内存中——服务重启后数据全部丢失。在实际项目中,数据需要持久化存储,最常用的关系型数据库是 MySQL。GORM 是 Go 生态中最流行的 ORM 库,它提供了对象-关系映射能力,让我们可以…

2026/7/24 9:12:01 阅读更多 →
D-ID数字人语音克隆失效?深度解析TTS引擎兼容性问题(实测12种音频格式成功率数据)

D-ID数字人语音克隆失效?深度解析TTS引擎兼容性问题(实测12种音频格式成功率数据)

更多请点击: https://codechina.net 第一章:D-ID数字人语音克隆失效现象全景速览 近期大量用户反馈 D-ID 平台的语音克隆功能出现非预期失效,表现为合成语音失真、语调断裂、身份一致性丢失,甚至完全静音输出。该现象并非孤立偶发…

2026/7/24 9:12:01 阅读更多 →
DP83847以太网PHY芯片:从架构原理到硬件设计与调试实战

DP83847以太网PHY芯片:从架构原理到硬件设计与调试实战

1. 项目概述:深入理解DP83847 DsPHYTER II以太网收发器 在嵌入式系统、工业控制或者任何需要网络连接的设备开发中,物理层(PHY)芯片的选择往往是决定网络稳定性和性能的基石。它不像处理器或内存那样引人注目,却默默承…

2026/7/24 9:12:01 阅读更多 →
嵌入式AES硬件加速器实战:原理、模式与DMA优化全解析

嵌入式AES硬件加速器实战:原理、模式与DMA优化全解析

1. 项目概述 在嵌入式系统,尤其是物联网和边缘计算设备中,数据安全已经从“加分项”变成了“必选项”。无论是智能门锁的通信、工业传感器的数据上报,还是支付终端的交易信息,都需要在资源受限的微控制器上实现高效、可靠的加密。…

2026/7/24 9:12:01 阅读更多 →
AI销售助手与数据中台如何提升电商转化率

AI销售助手与数据中台如何提升电商转化率

1. 数字员工与熊猫智汇的销售赋能组合 去年帮一家跨境电商客户部署这套系统时,他们的销售转化率从12%飙升到29%。数字员工不是简单的聊天机器人,而是能深度理解客户意图的AI销售助手,当它与熊猫智汇的客户数据中台结合时,会产生奇…

2026/7/24 9:12:01 阅读更多 →
军事智能决策系统:多智能体强化学习与动态优化实战

军事智能决策系统:多智能体强化学习与动态优化实战

1. 项目背景与核心定位鸽姆智库(GG3M)作为一家专注于战略分析与决策支持的研究机构,其军事算法体系在业内以"动态博弈推演"和"多维度威胁评估"著称。这套系统的独特之处在于融合了多智能体强化学习(MARL&…

2026/7/24 9:11:01 阅读更多 →

日新闻

用Highcharts 创建可拖拽三维散点立方体3D图表

用Highcharts 创建可拖拽三维散点立方体3D图表

该案例基于Highcharts scatter3d 三维散点图实现空间立方体散点可视化,核心特色:三维 X/Y/Z 三轴空间,所有散点分布在 0~10 立方体空间内;散点使用径向渐变实现立体 3D 圆球质感;支持鼠标 / 触屏拖拽画布,…

2026/7/24 0:00:29 阅读更多 →
AppCertDlls:进程创建路径上的 DLL 入口

AppCertDlls:进程创建路径上的 DLL 入口

AppCertDlls:进程创建路径上的 DLL 入口 AppCertDlls 位于 HKLM\System\CurrentControlSet\Control\Session Manager\AppCertDlls。本文的程序功能是只读列出这个键在 64 位和 32 位注册表视图中的全部值,并显示每条值的来源、名称、类型和可安全显示的数…

2026/7/24 0:00:29 阅读更多 →
我的编程之路:第一篇博客

我的编程之路:第一篇博客

大家好,我是一名编程初学者,同时这也是我编程学习之路上的第一篇博客。在这里,我想要向大家介绍我的一些想法和规划。a.自我介绍我是一个刚刚接触编程的新手,目前在学习c语言,我对编程世界充满了强烈的好奇。当然&…

2026/7/24 0:00:29 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中,我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源,还是配置文件、证书等,都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下,但这…

2026/7/24 3:59:20 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP(轻量级目录访问协议)作为企业级身份认证的黄金标准,已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时,发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/24 1:23:39 阅读更多 →
【AI面试官实战指南】:用ChatGPT模拟10类高频技术岗面试,3天提升应答精准度92%

【AI面试官实战指南】:用ChatGPT模拟10类高频技术岗面试,3天提升应答精准度92%

更多请点击: https://intelliparadigm.com 第一章:AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”,而是以可解释、可审计、可迭代的方式,赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/23 17:49:47 阅读更多 →

月新闻