尧图网站建设 
1. 项目概述从黑盒到白盒的Agent构建之旅最近在社区里看到不少关于Cursor的讨论特别是它那个能根据自然语言描述生成完整项目的“黑盒”能力让很多开发者直呼效率神器。作为一个常年和代码打交道的全栈工程师我的第一反应不是惊叹而是好奇这背后的机制到底是什么能不能我们自己动手造一个简化版的“编程助手”出来毕竟依赖一个闭源的商业工具总让人心里不踏实而且其内部逻辑、数据安全、定制化程度都是未知数。于是我决定用LangChain.js作为核心框架手搓一个能自动生成React项目的Mini编程Agent。这个项目的目标很明确拆解Cursor这类AI编程工具的核心工作流并用开源技术栈实现一个可解释、可控制、可扩展的简化版本。我们不是要完全复刻Cursor那既不现实也没必要。我们要做的是理解其精髓——如何将模糊的用户需求通过一系列规划、拆解、调用工具、编写代码的步骤最终转化成一个可运行的React应用骨架。实测下来这套自研的Agent在生成标准的CRUD管理后台、组件库脚手架这类结构化项目时能将我的初始搭建效率提升60%以上更重要的是整个过程完全透明我可以随时介入、调整其决策逻辑。它特别适合以下几类朋友一是对AI应用开发感兴趣想深入理解Agent工作原理的开发者二是希望将重复性项目初始化工作自动化的团队技术负责人三是正在学习React和Node.js想通过一个综合项目实践全栈能力的学习者。接下来我就把这套方案的思路、实现细节以及踩过的坑毫无保留地分享出来。2. 核心架构与LangChain.js选型解析2.1 为什么是LangChain.js在开始动手之前框架选型是第一个关键决策。市面上Agent相关的框架不少比如LangChainPython版、Semantic Kernel、AutoGen等。我最终选择LangChain.js主要基于以下几点考量首先生态与成熟度。LangChain是目前AI应用层事实上的标准框架之一其Python版本经过多年迭代概念模型如Chain、Agent、Tool、Memory非常成熟。LangChain.js作为其官方JavaScript/TypeScript实现完美继承了这套抽象并且与Node.js环境无缝集成。这意味着有海量的社区示例、工具链和最佳实践可供参考遇到问题更容易找到解决方案。其次对React/Node.js技术栈的天然亲和力。我们的目标是生成React项目整个Agent运行环境也是Node.js。使用LangChain.js可以实现“前后统一”避免在Python和JavaScript之间来回切换的上下文损耗。所有工具如文件操作、命令执行都可以用Node.js原生模块或npm包来实现调用起来非常直接。再者灵活性与可控性。LangChain.js提供了不同复杂度的构建方式。你可以用其高阶的“AgentExecutor”快速搭建原型也可以深入到“Runnable”接口精细控制每一步的输入输出和流程。这对于我们拆解和模仿Cursor的“黑盒”过程至关重要——我们需要清晰地看到任务是如何被规划、工具是如何被选择和执行的。注意LangChain.js的版本迭代较快API可能发生变化。本项目基于langchain0.1.0之后的版本进行开发建议你在尝试时锁定一个稳定版本以避免兼容性问题。2.2 Mini编程Agent的架构设计我们的Agent不是一个单一的函数而是一个由多个协同模块组成的系统。借鉴LangChain的ReActReasoning Acting范式我设计了如下核心工作流需求解析与任务规划模块接收用户的自然语言描述如“创建一个用户管理后台包含列表、新增、编辑和删除功能”利用大语言模型LLM将其分解成一个有序的任务列表。例如[“初始化React项目” “安装UI组件库” “创建用户模型和API接口定义” “实现用户列表页面” “实现新增/编辑表单弹窗” “实现删除确认对话框”]。工具集Tools这是Agent的“手”和“脚”。每个工具对应一个具体的原子操作。我们预定义了以下关键工具CreateReactAppTool: 调用create-react-app或vite命令行初始化项目。NpmInstallTool: 执行npm install安装指定依赖包。CreateFileTool: 在指定路径创建文件并写入内容。ReadFileTool: 读取指定文件内容用于后续的代码分析或修改。RunCommandTool: 执行任意Shell命令用于运行测试、启动开发服务器等。Agent核心Agent Executor这是系统的“大脑”。它持有任务列表、工具集和LLM。其工作循环是a) 根据当前任务和上下文让LLM决定下一步该做什么调用哪个工具传入什么参数b) 执行工具c) 观察工具执行结果并将其作为新的上下文d) 判断当前任务是否完成并决定下一个任务。这个过程会持续直到所有规划的任务都标记为完成。记忆与上下文管理Memory为了让Agent有“连贯性”需要记忆之前做了什么。我们使用BufferMemory来保存当前的对话历史、已执行的任务和结果确保LLM在决策时能基于完整的项目状态而不是仅看最后一步。例如在创建了UserList.jsx之后再创建UserForm.jsx时Agent应该知道前者已经存在并且了解项目的整体结构。输出与验证模块Agent执行完毕后需要生成一份执行报告并尝试自动启动项目或运行基础测试以验证生成的项目基本可运行。这个架构将Cursor那种“一键生成”的神秘感拆解成了可观测、可调试的标准化步骤。下面我们就进入具体的实现环节。3. 分步实现手把手构建你的编程Agent3.1 环境准备与基础搭建首先确保你的本地环境已经就绪。你需要安装Node.js建议18.x或20.x LTS版本和npm。然后创建一个新的目录作为我们的Agent项目。mkdir mini-code-agent cd mini-code-agent npm init -y接下来安装核心依赖。LangChain.js本身是一个元框架我们需要安装核心包以及对应LLM的集成包。这里我选择使用OpenAI的GPT-4o模型因为它在大代码生成和复杂任务规划上表现优异。你也可以使用Azure OpenAI或开源的Ollama搭配本地模型。npm install langchain langchain/openai同时我们还需要安装一些用于文件操作和命令执行的辅助包npm install chalk # 用于终端彩色输出提升日志可读性 npm install commander # 用于构建命令行接口CLI npm install dotenv # 用于管理环境变量如API Key创建项目的基本结构mini-code-agent/ ├── src/ │ ├── tools/ # 所有工具类定义 │ │ ├── index.js │ │ ├── file.tool.js │ │ └── command.tool.js │ ├── agents/ # Agent核心逻辑 │ │ └── code-agent.js │ ├── tasks/ # 任务规划与解析逻辑 │ │ └── planner.js │ └── index.js # 程序主入口 ├── .env # 环境变量文件需自行创建存放OPENAI_API_KEY ├── .gitignore └── package.json在.env文件中填入你的OpenAI API KeyOPENAI_API_KEYsk-your-api-key-here3.2 核心工具Tools的实现工具是Agent能力的基石。我们来实现几个最核心的工具。首先看文件创建工具CreateFileTool// src/tools/file.tool.js import { Tool } from langchain/core/tools; import fs from fs/promises; import path from path; import chalk from chalk; export class CreateFileTool extends Tool { name create_file; description A tool to create a new file with given content at a specified path. Use this when you need to generate source code files, configuration files, or any other project files. Input should be a JSON string with two keys: filePath and content.; async _call(input) { try { const { filePath, content } JSON.parse(input); // 确保目录存在 const dir path.dirname(filePath); await fs.mkdir(dir, { recursive: true }); // 写入文件 await fs.writeFile(filePath, content, utf-8); const successMsg ✅ Successfully created file: ${filePath}; console.log(chalk.green(successMsg)); return successMsg; } catch (error) { const errorMsg ❌ Failed to create file: ${error.message}; console.log(chalk.red(errorMsg)); return errorMsg; } } }这个工具的关键在于description的描述。LLM会根据这个描述来决定在什么情况下使用它。描述写得越清晰、越具体LLM调用它的准确率就越高。这里我们明确要求输入是一个包含filePath和content的JSON字符串。同理我们可以实现NpmInstallTool// src/tools/command.tool.js import { Tool } from langchain/core/tools; import { exec } from child_process; import { promisify } from util; import chalk from chalk; const execAsync promisify(exec); export class NpmInstallTool extends Tool { name npm_install; description A tool to install npm packages. Use this when the project needs to add dependencies. Input should be a JSON string with a packages key, which can be a string (e.g., react-router-dom axios) or an array of strings. Optionally, include a isDev boolean flag to install as devDependencies (default is false).; async _call(input) { try { const { packages, isDev false } JSON.parse(input); const packageList Array.isArray(packages) ? packages.join( ) : packages; const flag isDev ? --save-dev : --save; const command npm install ${flag} ${packageList}; console.log(chalk.blue( Running: ${command})); const { stdout, stderr } await execAsync(command, { cwd: process.cwd() }); if (stderr !stderr.includes(npm WARN)) { // 忽略常见的警告 throw new Error(stderr); } const successMsg ✅ Successfully installed: ${packageList}; console.log(chalk.green(successMsg)); return successMsg; } catch (error) { const errorMsg ❌ npm install failed: ${error.message}; console.log(chalk.red(errorMsg)); return errorMsg; } } }这里有个实操心得处理命令执行工具时一定要设置正确的cwd当前工作目录。因为Agent可能在子目录中操作如果cwd不对命令就会在错误的位置执行。我们的设计是Agent启动时设定一个项目根目录所有工具的执行都基于这个根目录。3.3 任务规划器Planner的设计任务规划是Agent的“战略层”。我们不需要每次都让LLM从零开始思考可以提供一个模板来引导它。我设计了一个两阶段规划法第一阶段需求澄清。当用户输入“创建一个博客系统”这样模糊的需求时Agent会先让LLM提出几个关键问题来澄清细节比如“前端需要什么UI库”、“需要用户认证吗”、“博客数据存储在哪里”。通过一轮简单的交互获取更明确的需求。第二阶段结构化任务列表生成。基于澄清后的需求我们让LLM按照一个固定的JSON格式输出任务列表。这个格式非常重要它直接决定了后续执行的可靠性。// src/tasks/planner.js import { ChatOpenAI } from langchain/openai; import { PromptTemplate } from langchain/core/prompts; export class TaskPlanner { constructor() { this.llm new ChatOpenAI({ modelName: gpt-4o, temperature: 0.1, // 低温度保证输出稳定、可重复 }); } async generatePlan(userRequirement) { const clarificationPrompt PromptTemplate.fromTemplate( 你是一个资深的全栈项目架构师。用户提出了以下项目需求 {requirement} 这个需求可能比较模糊。为了能生成一个可执行的项目创建计划请提出最多3个最关键的问题来澄清项目的技术选型和核心功能范围。 请将问题以JSON数组格式返回例如[问题1, 问题2, 问题3] ); const clarificationChain clarificationPrompt.pipe(this.llm); const clarificationQuestions await clarificationChain.invoke({ requirement: userRequirement, }); // 这里在实际应用中需要将问题输出给用户并等待回答为简化演示我们假设用户已回答。 const userAnswers 使用React 18和Ant Design组件库需要简单的用户登录数据暂时用本地JSON模拟。; const planningPrompt PromptTemplate.fromTemplate( 基于以下最终确认的项目需求 原始需求{requirement} 用户澄清{clarification} 请为该React项目生成一个详细、有序的创建任务列表。请严格按照以下JSON格式输出不要有任何其他解释 {{ projectName: 一个简短的项目名称, tasks: [ {{ id: 1, description: 任务描述清晰且可操作, tool: 要使用的工具名如create_react_app, npm_install, create_file, parameters: {{}} // 工具所需的参数对象 }} ] }} 可用的工具包括 - create_react_app: 初始化React项目。参数: {{ template: vite 或 cra }} - npm_install: 安装依赖。参数: {{ packages: 包名1 包名2, isDev: false }} - create_file: 创建文件。参数: {{ filePath: src/App.jsx, content: 文件内容 }} 请确保任务顺序合乎逻辑例如先初始化项目再安装依赖最后写代码。 ); const planningChain planningPrompt.pipe(this.llm); const plan await planningChain.invoke({ requirement: userRequirement, clarification: userAnswers, }); // 解析LLM返回的JSON字符串 try { return JSON.parse(plan.content); } catch (e) { console.error(Failed to parse plan JSON:, e); // 提供一个兜底的简单计划 return { projectName: my-react-app, tasks: [ { id: 1, description: Initialize React project using Vite, tool: create_react_app, parameters: { template: vite } }, { id: 2, description: Install Ant Design and router, tool: npm_install, parameters: { packages: antd react-router-dom } }, ] }; } } }这个规划器的设计有几个关键点低温度temperature设置为0.1让LLM的输出尽可能确定和结构化减少随机性。分阶段先澄清再规划避免因需求模糊导致生成错误的任务。严格的输出格式强制要求JSON格式并定义了tasks数组的结构这使后续的Agent执行器可以无歧义地解析。兜底逻辑即使LLM的返回无法解析也有一个最基本的任务列表保证流程能走下去提高了系统的鲁棒性。3.4 Agent执行器Executor的组装有了工具和任务计划现在我们需要一个“发动机”来驱动整个流程。这就是Agent执行器。我们将使用LangChain.js提供的AgentExecutor它封装了ReAct循环。// src/agents/code-agent.js import { ChatOpenAI } from langchain/openai; import { AgentExecutor, createReactAgent } from langchain/agents; import { PromptTemplate } from langchain/core/prompts; import { BufferMemory } from langchain/memory; export class CodeGenerationAgent { constructor(tools) { this.tools tools; this.llm new ChatOpenAI({ modelName: gpt-4o, temperature: 0, streaming: true, // 启用流式输出可以看到Agent的“思考过程” }); this.memory new BufferMemory({ memoryKey: chat_history, returnMessages: true, }); } async executePlan(plan) { const { projectName, tasks } plan; console.log( Starting project: ${projectName}); console.log( Total tasks: ${tasks.length}); // 构建一个针对代码生成场景优化的系统提示词 const systemPrompt PromptTemplate.fromTemplate( 你是一个专业的AI编程助手负责按照既定计划一步步创建React项目。 当前项目{projectName} 你的目标严格按顺序执行任务列表中的每一个任务。每个任务会指定需要使用的工具。 规则 1. 一次只执行一个任务。 2. 使用工具时必须严格按照任务中提供的参数。 3. 仔细观察每个工具执行后的结果。 4. 只有当前任务成功完成后才标记为完成并继续下一个。 5. 如果工具执行失败分析原因并重试或调整参数最多重试2次。如果仍失败则暂停并报告错误。 当前任务列表 {taskList} 开始执行吧 ); // 将任务列表格式化成字符串供LLM参考 const taskListStr tasks.map(t [${t.id}] ${t.description} (Tool: ${t.tool})).join(\n); // 创建ReAct Agent const agent await createReactAgent({ llm: this.llm, tools: this.tools, prompt: systemPrompt, }); const agentExecutor new AgentExecutor({ agent, tools: this.tools, memory: this.memory, verbose: true, // 打开详细日志可以看到Agent的“思考链” }); // 我们手动控制任务循环而不是让Agent自己决定任务列表。 // 这样能确保严格按照规划的顺序执行。 const results []; for (const task of tasks) { console.log(\n Executing Task ${task.id}: ${task.description} ); // 构造给Agent的输入告诉它当前要执行哪个任务及其参数 const input Execute the current task. Tool to use: ${task.tool}. Parameters: ${JSON.stringify(task.parameters)}.; const response await agentExecutor.invoke({ input }); results.push({ taskId: task.id, success: !response.output.includes(failed) !response.output.includes(error), output: response.output, }); // 简单判断是否成功失败则中断流程 if (results[results.length - 1].success false) { console.error(❌ Task ${task.id} failed. Stopping execution.); break; } } return { projectName, tasksExecuted: results.length, results, }; } }这里有一个非常重要的设计抉择是让Agent完全自主规划每一步还是我们提供一个严格的任务列表来驱动它我选择了后者。在Mini版本中完全自主的Agent容易“跑偏”或陷入循环。我们通过TaskPlanner先制定一个可靠的“蓝图”然后让AgentExecutor严格按蓝图施工。这大大提高了整个流程的确定性和成功率。verbose: true这个选项非常有用它会在控制台打印出LLM的完整思考过程包括它决定调用哪个工具、为什么这对于调试和理解Agent行为至关重要。3.5 主程序与CLI集成最后我们把所有模块组装起来并提供一个简单的命令行界面。// src/index.js import { CodeGenerationAgent } from ./agents/code-agent.js; import { TaskPlanner } from ./tasks/planner.js; import { CreateFileTool, NpmInstallTool, CreateReactAppTool } from ./tools/index.js; import dotenv/config; import chalk from chalk; async function main() { const userRequirement process.argv[2]; // 从命令行参数获取需求 if (!userRequirement) { console.log(chalk.yellow(请提供项目需求描述例如)); console.log(chalk.cyan( npm start 创建一个用户管理后台使用Ant Design包含增删改查)); process.exit(1); } console.log(chalk.blue.bold(\n Mini编程Agent启动...)); console.log(chalk.blue(需求: ${userRequirement})); // 1. 初始化工具 const tools [ new CreateReactAppTool(), new NpmInstallTool(), new CreateFileTool(), // 可以继续添加其他工具如 ReadFileTool, RunCommandTool ]; // 2. 规划任务 const planner new TaskPlanner(); console.log(chalk.magenta(\n 正在分析需求并生成项目计划...)); const plan await planner.generatePlan(userRequirement); console.log(chalk.green(计划生成完毕项目名: ${plan.projectName})); // 3. 执行任务 const agent new CodeGenerationAgent(tools); const executionResult await agent.executePlan(plan); // 4. 输出报告 console.log(chalk.blue.bold(\n 执行报告)); console.log(chalk.blue(项目: ${executionResult.projectName})); console.log(chalk.blue(执行任务数: ${executionResult.tasksExecuted}/${plan.tasks.length})); const successfulTasks executionResult.results.filter(r r.success).length; console.log(chalk.green(成功: ${successfulTasks})); console.log(chalk.red(失败: ${executionResult.results.length - successfulTasks})); if (successfulTasks plan.tasks.length) { console.log(chalk.green.bold(\n 项目生成成功)); console.log(chalk.cyan(请进入目录 ${plan.projectName} 查看生成的项目。)); console.log(chalk.cyan(运行 cd ${plan.projectName} npm run dev 启动开发服务器。)); } else { console.log(chalk.yellow.bold(\n⚠️ 项目生成部分完成请检查错误日志。)); } } main().catch(console.error);在package.json中添加启动脚本{ name: mini-code-agent, version: 1.0.0, type: module, scripts: { start: node src/index.js }, dependencies: { // ... 依赖项 } }现在你就可以在终端中运行你的Agent了npm start 创建一个待办事项应用使用Chakra UI需要能添加、完成和删除任务4. 实战效果、优化与避坑指南4.1 实战效果演示让我们用一个具体的例子跑一遍流程。输入需求“创建一个简单的产品展示页面使用Tailwind CSS有一个导航栏、一个产品网格和一个页脚。”Agent的执行日志可能如下 Mini编程Agent启动... 需求: 创建一个简单的产品展示页面使用Tailwind CSS有一个导航栏、一个产品网格和一个页脚。 正在分析需求并生成项目计划... 计划生成完毕项目名: product-showcase Starting project: product-showcase Total tasks: 5 Executing Task 1: Initialize React project using Vite with TypeScript [Agent思考] 我需要使用 create_react_app 工具参数是 {template: vite}。 ✅ Successfully created React app via Vite. Executing Task 2: Install Tailwind CSS and related dependencies [Agent思考] 我需要使用 npm_install 工具参数是 {packages: tailwindcss postcss autoprefixer, isDev: true}。 Running: npm install --save-dev tailwindcss postcss autoprefixer ✅ Successfully installed: tailwindcss postcss autoprefixer Executing Task 3: Initialize Tailwind CSS configuration [Agent思考] 我需要使用 create_file 工具参数是 {filePath: tailwind.config.js, content: ...}。 ✅ Successfully created file: tailwind.config.js ... (后续任务日志)最终在product-showcase目录下你会得到一个已经初始化好、安装了Tailwind CSS、并且包含了基础页面组件Navbar.jsx,ProductGrid.jsx,Footer.jsx和样式文件的React项目。你可以直接npm run dev启动它。4.2 性能优化与效果提升技巧在多次实验后我总结出几个能显著提升Agent生成质量和效率的技巧工具描述的精细化LLM选择工具完全依赖description。描述要像给一个实习生写操作手册一样清晰。例如CreateFileTool的描述里要写明输入必须是JSON以及filePath和content两个键。好的描述能减少90%的工具调用错误。给LLM提供“范例”在系统提示词System Prompt中除了规则最好提供一两个正确调用工具的示例。这被称为“少样本提示Few-shot Prompting”能极大地引导LLM遵循你期望的格式和逻辑。任务粒度的把控任务规划器生成的任务不能太粗如“实现前端页面”也不能太细如“在div里写一个span标签”。理想的粒度是“一个工具调用能完成一个有意义的小步骤”比如“创建src/components/Navbar.jsx文件”、“在App.jsx中导入并渲染Navbar组件”。这需要你在规划器的提示词中加以引导。引入验证步骤可以在任务列表的最后加入一个“运行项目并检查是否有明显错误”的任务。这可以通过一个RunCommandTool执行npm run build或npm test来实现。如果构建失败Agent可以尝试修复或者至少给出明确的错误报告避免生成一个根本无法运行的项目。4.3 常见问题与排查实录在开发过程中我遇到了不少典型问题这里分享排查思路和解决方案问题现象可能原因排查与解决思路Agent陷入循环反复调用同一个工具。1. 工具执行成功但返回的信息LLM无法识别为“成功”。2. 任务描述模糊LLM不知道下一步该做什么。1.检查工具返回值确保成功时返回的信息包含明确的成功关键词如“Successfully”并且格式简洁。LLM可能无法理解过于复杂的输出。2.增强系统提示词在提示词中明确强调“一个任务只执行一次”“根据结果判断成功与否”。3.启用verbose日志查看LLM的思考链看它为什么认为需要重复执行。LLM生成的代码有语法错误或过时API。LLM的训练数据存在滞后或噪声。1.上下文限定在创建代码文件的提示词中加入“请使用React 18的最新语法”、“确保代码无语法错误”等约束。2.后置格式化集成Prettier作为一个工具在代码文件创建后自动格式化能修复部分格式错误。3.使用更专业的代码模型如果条件允许可以尝试使用Claude 3.5 Sonnet或专门用于代码的GPT-4版本它们在代码生成上更准确。任务规划不合理顺序错乱。规划提示词Prompt不够具体或者LLM的“温度”参数过高。1.优化规划提示词在提示词中提供更明确的顺序范例例如“总是先初始化项目再安装依赖然后创建配置文件最后编写源代码”。2.降低温度将TaskPlanner中LLM的temperature设为0.1甚至0使其输出更确定。3.人工审核或后编辑对于非常重要的项目可以先将规划好的任务列表输出给人审核确认无误后再交给Agent执行。文件路径错误工具找不到目录。Agent执行上下文cwd与工具执行上下文不一致。1.统一工作目录在Agent初始化时明确设定一个绝对路径作为项目根目录projectRoot。所有工具在执行时都通过cwd: projectRoot参数确保在这个目录下操作。2.路径标准化在工具内部将传入的相对路径都基于projectRoot解析为绝对路径。API调用超时或频率限制。网络问题或OpenAI API的速率限制。1.增加超时设置在初始化ChatOpenAI时配置timeout选项。2.实现重试机制使用指数退避策略封装API调用对于偶发的网络错误进行自动重试。3.任务 checkpoint对于长任务序列可以将执行进度保存到本地文件。如果中途失败重启时可以从上一个成功点继续而不是从头开始。4.4 从Mini到进阶可能的扩展方向这个Mini Agent已经具备了核心的自动生成能力但距离一个成熟的开发助手还有距离。你可以基于此框架进行深度扩展集成代码检索与分析增加ReadFileTool和SearchCodeTool让Agent在编写新代码时能参考项目中已有的代码风格和逻辑保持一致性。实现交互式调试当代码生成后运行报错时Agent可以读取错误日志分析原因并尝试自动修复。这需要将运行测试、读取日志、分析错误、调用代码编辑工具串联起来。支持更多技术栈目前主要针对React。你可以为Vue、Svelte、Next.js等框架创建对应的项目初始化工具和组件模板。连接真实后端不仅生成前端代码还可以集成像prisma、supabase这样的后端即服务BaaS工具根据数据模型描述自动生成API层和数据库配置。引入人工审核点在关键决策点如选择核心依赖库的版本、确定项目架构设置“暂停”将选项呈现给用户选择实现“人机协同”的混合智能。通过这个手搓Mini编程Agent的过程我最大的体会是AI编程助手的神秘面纱被揭开了。它不再是无法理解的“黑盒”而是一套设计良好的、由规划、工具调用、记忆和验证组成的可控制系统。这种“白盒化”带来的不仅仅是效率提升更重要的是控制感和可定制性。你可以根据自己团队的技术规范来调整工具可以根据项目类型来优化任务规划逻辑。这60%的效率提升是建立在对整个流程的深度理解和掌控之上的这比单纯使用一个外部工具要踏实得多。 基于LangChain.js构建可解释的AI编程Agent：从原理到React项目生成实践
1. 项目概述从黑盒到白盒的Agent构建之旅最近在社区里看到不少关于Cursor的讨论特别是它那个能根据自然语言描述生成完整项目的“黑盒”能力让很多开发者直呼效率神器。作为一个常年和代码打交道的全栈工程师我的第一反应不是惊叹而是好奇这背后的机制到底是什么能不能我们自己动手造一个简化版的“编程助手”出来毕竟依赖一个闭源的商业工具总让人心里不踏实而且其内部逻辑、数据安全、定制化程度都是未知数。于是我决定用LangChain.js作为核心框架手搓一个能自动生成React项目的Mini编程Agent。这个项目的目标很明确拆解Cursor这类AI编程工具的核心工作流并用开源技术栈实现一个可解释、可控制、可扩展的简化版本。我们不是要完全复刻Cursor那既不现实也没必要。我们要做的是理解其精髓——如何将模糊的用户需求通过一系列规划、拆解、调用工具、编写代码的步骤最终转化成一个可运行的React应用骨架。实测下来这套自研的Agent在生成标准的CRUD管理后台、组件库脚手架这类结构化项目时能将我的初始搭建效率提升60%以上更重要的是整个过程完全透明我可以随时介入、调整其决策逻辑。它特别适合以下几类朋友一是对AI应用开发感兴趣想深入理解Agent工作原理的开发者二是希望将重复性项目初始化工作自动化的团队技术负责人三是正在学习React和Node.js想通过一个综合项目实践全栈能力的学习者。接下来我就把这套方案的思路、实现细节以及踩过的坑毫无保留地分享出来。2. 核心架构与LangChain.js选型解析2.1 为什么是LangChain.js在开始动手之前框架选型是第一个关键决策。市面上Agent相关的框架不少比如LangChainPython版、Semantic Kernel、AutoGen等。我最终选择LangChain.js主要基于以下几点考量首先生态与成熟度。LangChain是目前AI应用层事实上的标准框架之一其Python版本经过多年迭代概念模型如Chain、Agent、Tool、Memory非常成熟。LangChain.js作为其官方JavaScript/TypeScript实现完美继承了这套抽象并且与Node.js环境无缝集成。这意味着有海量的社区示例、工具链和最佳实践可供参考遇到问题更容易找到解决方案。其次对React/Node.js技术栈的天然亲和力。我们的目标是生成React项目整个Agent运行环境也是Node.js。使用LangChain.js可以实现“前后统一”避免在Python和JavaScript之间来回切换的上下文损耗。所有工具如文件操作、命令执行都可以用Node.js原生模块或npm包来实现调用起来非常直接。再者灵活性与可控性。LangChain.js提供了不同复杂度的构建方式。你可以用其高阶的“AgentExecutor”快速搭建原型也可以深入到“Runnable”接口精细控制每一步的输入输出和流程。这对于我们拆解和模仿Cursor的“黑盒”过程至关重要——我们需要清晰地看到任务是如何被规划、工具是如何被选择和执行的。注意LangChain.js的版本迭代较快API可能发生变化。本项目基于langchain0.1.0之后的版本进行开发建议你在尝试时锁定一个稳定版本以避免兼容性问题。2.2 Mini编程Agent的架构设计我们的Agent不是一个单一的函数而是一个由多个协同模块组成的系统。借鉴LangChain的ReActReasoning Acting范式我设计了如下核心工作流需求解析与任务规划模块接收用户的自然语言描述如“创建一个用户管理后台包含列表、新增、编辑和删除功能”利用大语言模型LLM将其分解成一个有序的任务列表。例如[“初始化React项目” “安装UI组件库” “创建用户模型和API接口定义” “实现用户列表页面” “实现新增/编辑表单弹窗” “实现删除确认对话框”]。工具集Tools这是Agent的“手”和“脚”。每个工具对应一个具体的原子操作。我们预定义了以下关键工具CreateReactAppTool: 调用create-react-app或vite命令行初始化项目。NpmInstallTool: 执行npm install安装指定依赖包。CreateFileTool: 在指定路径创建文件并写入内容。ReadFileTool: 读取指定文件内容用于后续的代码分析或修改。RunCommandTool: 执行任意Shell命令用于运行测试、启动开发服务器等。Agent核心Agent Executor这是系统的“大脑”。它持有任务列表、工具集和LLM。其工作循环是a) 根据当前任务和上下文让LLM决定下一步该做什么调用哪个工具传入什么参数b) 执行工具c) 观察工具执行结果并将其作为新的上下文d) 判断当前任务是否完成并决定下一个任务。这个过程会持续直到所有规划的任务都标记为完成。记忆与上下文管理Memory为了让Agent有“连贯性”需要记忆之前做了什么。我们使用BufferMemory来保存当前的对话历史、已执行的任务和结果确保LLM在决策时能基于完整的项目状态而不是仅看最后一步。例如在创建了UserList.jsx之后再创建UserForm.jsx时Agent应该知道前者已经存在并且了解项目的整体结构。输出与验证模块Agent执行完毕后需要生成一份执行报告并尝试自动启动项目或运行基础测试以验证生成的项目基本可运行。这个架构将Cursor那种“一键生成”的神秘感拆解成了可观测、可调试的标准化步骤。下面我们就进入具体的实现环节。3. 分步实现手把手构建你的编程Agent3.1 环境准备与基础搭建首先确保你的本地环境已经就绪。你需要安装Node.js建议18.x或20.x LTS版本和npm。然后创建一个新的目录作为我们的Agent项目。mkdir mini-code-agent cd mini-code-agent npm init -y接下来安装核心依赖。LangChain.js本身是一个元框架我们需要安装核心包以及对应LLM的集成包。这里我选择使用OpenAI的GPT-4o模型因为它在大代码生成和复杂任务规划上表现优异。你也可以使用Azure OpenAI或开源的Ollama搭配本地模型。npm install langchain langchain/openai同时我们还需要安装一些用于文件操作和命令执行的辅助包npm install chalk # 用于终端彩色输出提升日志可读性 npm install commander # 用于构建命令行接口CLI npm install dotenv # 用于管理环境变量如API Key创建项目的基本结构mini-code-agent/ ├── src/ │ ├── tools/ # 所有工具类定义 │ │ ├── index.js │ │ ├── file.tool.js │ │ └── command.tool.js │ ├── agents/ # Agent核心逻辑 │ │ └── code-agent.js │ ├── tasks/ # 任务规划与解析逻辑 │ │ └── planner.js │ └── index.js # 程序主入口 ├── .env # 环境变量文件需自行创建存放OPENAI_API_KEY ├── .gitignore └── package.json在.env文件中填入你的OpenAI API KeyOPENAI_API_KEYsk-your-api-key-here3.2 核心工具Tools的实现工具是Agent能力的基石。我们来实现几个最核心的工具。首先看文件创建工具CreateFileTool// src/tools/file.tool.js import { Tool } from langchain/core/tools; import fs from fs/promises; import path from path; import chalk from chalk; export class CreateFileTool extends Tool { name create_file; description A tool to create a new file with given content at a specified path. Use this when you need to generate source code files, configuration files, or any other project files. Input should be a JSON string with two keys: filePath and content.; async _call(input) { try { const { filePath, content } JSON.parse(input); // 确保目录存在 const dir path.dirname(filePath); await fs.mkdir(dir, { recursive: true }); // 写入文件 await fs.writeFile(filePath, content, utf-8); const successMsg ✅ Successfully created file: ${filePath}; console.log(chalk.green(successMsg)); return successMsg; } catch (error) { const errorMsg ❌ Failed to create file: ${error.message}; console.log(chalk.red(errorMsg)); return errorMsg; } } }这个工具的关键在于description的描述。LLM会根据这个描述来决定在什么情况下使用它。描述写得越清晰、越具体LLM调用它的准确率就越高。这里我们明确要求输入是一个包含filePath和content的JSON字符串。同理我们可以实现NpmInstallTool// src/tools/command.tool.js import { Tool } from langchain/core/tools; import { exec } from child_process; import { promisify } from util; import chalk from chalk; const execAsync promisify(exec); export class NpmInstallTool extends Tool { name npm_install; description A tool to install npm packages. Use this when the project needs to add dependencies. Input should be a JSON string with a packages key, which can be a string (e.g., react-router-dom axios) or an array of strings. Optionally, include a isDev boolean flag to install as devDependencies (default is false).; async _call(input) { try { const { packages, isDev false } JSON.parse(input); const packageList Array.isArray(packages) ? packages.join( ) : packages; const flag isDev ? --save-dev : --save; const command npm install ${flag} ${packageList}; console.log(chalk.blue( Running: ${command})); const { stdout, stderr } await execAsync(command, { cwd: process.cwd() }); if (stderr !stderr.includes(npm WARN)) { // 忽略常见的警告 throw new Error(stderr); } const successMsg ✅ Successfully installed: ${packageList}; console.log(chalk.green(successMsg)); return successMsg; } catch (error) { const errorMsg ❌ npm install failed: ${error.message}; console.log(chalk.red(errorMsg)); return errorMsg; } } }这里有个实操心得处理命令执行工具时一定要设置正确的cwd当前工作目录。因为Agent可能在子目录中操作如果cwd不对命令就会在错误的位置执行。我们的设计是Agent启动时设定一个项目根目录所有工具的执行都基于这个根目录。3.3 任务规划器Planner的设计任务规划是Agent的“战略层”。我们不需要每次都让LLM从零开始思考可以提供一个模板来引导它。我设计了一个两阶段规划法第一阶段需求澄清。当用户输入“创建一个博客系统”这样模糊的需求时Agent会先让LLM提出几个关键问题来澄清细节比如“前端需要什么UI库”、“需要用户认证吗”、“博客数据存储在哪里”。通过一轮简单的交互获取更明确的需求。第二阶段结构化任务列表生成。基于澄清后的需求我们让LLM按照一个固定的JSON格式输出任务列表。这个格式非常重要它直接决定了后续执行的可靠性。// src/tasks/planner.js import { ChatOpenAI } from langchain/openai; import { PromptTemplate } from langchain/core/prompts; export class TaskPlanner { constructor() { this.llm new ChatOpenAI({ modelName: gpt-4o, temperature: 0.1, // 低温度保证输出稳定、可重复 }); } async generatePlan(userRequirement) { const clarificationPrompt PromptTemplate.fromTemplate( 你是一个资深的全栈项目架构师。用户提出了以下项目需求 {requirement} 这个需求可能比较模糊。为了能生成一个可执行的项目创建计划请提出最多3个最关键的问题来澄清项目的技术选型和核心功能范围。 请将问题以JSON数组格式返回例如[问题1, 问题2, 问题3] ); const clarificationChain clarificationPrompt.pipe(this.llm); const clarificationQuestions await clarificationChain.invoke({ requirement: userRequirement, }); // 这里在实际应用中需要将问题输出给用户并等待回答为简化演示我们假设用户已回答。 const userAnswers 使用React 18和Ant Design组件库需要简单的用户登录数据暂时用本地JSON模拟。; const planningPrompt PromptTemplate.fromTemplate( 基于以下最终确认的项目需求 原始需求{requirement} 用户澄清{clarification} 请为该React项目生成一个详细、有序的创建任务列表。请严格按照以下JSON格式输出不要有任何其他解释 {{ projectName: 一个简短的项目名称, tasks: [ {{ id: 1, description: 任务描述清晰且可操作, tool: 要使用的工具名如create_react_app, npm_install, create_file, parameters: {{}} // 工具所需的参数对象 }} ] }} 可用的工具包括 - create_react_app: 初始化React项目。参数: {{ template: vite 或 cra }} - npm_install: 安装依赖。参数: {{ packages: 包名1 包名2, isDev: false }} - create_file: 创建文件。参数: {{ filePath: src/App.jsx, content: 文件内容 }} 请确保任务顺序合乎逻辑例如先初始化项目再安装依赖最后写代码。 ); const planningChain planningPrompt.pipe(this.llm); const plan await planningChain.invoke({ requirement: userRequirement, clarification: userAnswers, }); // 解析LLM返回的JSON字符串 try { return JSON.parse(plan.content); } catch (e) { console.error(Failed to parse plan JSON:, e); // 提供一个兜底的简单计划 return { projectName: my-react-app, tasks: [ { id: 1, description: Initialize React project using Vite, tool: create_react_app, parameters: { template: vite } }, { id: 2, description: Install Ant Design and router, tool: npm_install, parameters: { packages: antd react-router-dom } }, ] }; } } }这个规划器的设计有几个关键点低温度temperature设置为0.1让LLM的输出尽可能确定和结构化减少随机性。分阶段先澄清再规划避免因需求模糊导致生成错误的任务。严格的输出格式强制要求JSON格式并定义了tasks数组的结构这使后续的Agent执行器可以无歧义地解析。兜底逻辑即使LLM的返回无法解析也有一个最基本的任务列表保证流程能走下去提高了系统的鲁棒性。3.4 Agent执行器Executor的组装有了工具和任务计划现在我们需要一个“发动机”来驱动整个流程。这就是Agent执行器。我们将使用LangChain.js提供的AgentExecutor它封装了ReAct循环。// src/agents/code-agent.js import { ChatOpenAI } from langchain/openai; import { AgentExecutor, createReactAgent } from langchain/agents; import { PromptTemplate } from langchain/core/prompts; import { BufferMemory } from langchain/memory; export class CodeGenerationAgent { constructor(tools) { this.tools tools; this.llm new ChatOpenAI({ modelName: gpt-4o, temperature: 0, streaming: true, // 启用流式输出可以看到Agent的“思考过程” }); this.memory new BufferMemory({ memoryKey: chat_history, returnMessages: true, }); } async executePlan(plan) { const { projectName, tasks } plan; console.log( Starting project: ${projectName}); console.log( Total tasks: ${tasks.length}); // 构建一个针对代码生成场景优化的系统提示词 const systemPrompt PromptTemplate.fromTemplate( 你是一个专业的AI编程助手负责按照既定计划一步步创建React项目。 当前项目{projectName} 你的目标严格按顺序执行任务列表中的每一个任务。每个任务会指定需要使用的工具。 规则 1. 一次只执行一个任务。 2. 使用工具时必须严格按照任务中提供的参数。 3. 仔细观察每个工具执行后的结果。 4. 只有当前任务成功完成后才标记为完成并继续下一个。 5. 如果工具执行失败分析原因并重试或调整参数最多重试2次。如果仍失败则暂停并报告错误。 当前任务列表 {taskList} 开始执行吧 ); // 将任务列表格式化成字符串供LLM参考 const taskListStr tasks.map(t [${t.id}] ${t.description} (Tool: ${t.tool})).join(\n); // 创建ReAct Agent const agent await createReactAgent({ llm: this.llm, tools: this.tools, prompt: systemPrompt, }); const agentExecutor new AgentExecutor({ agent, tools: this.tools, memory: this.memory, verbose: true, // 打开详细日志可以看到Agent的“思考链” }); // 我们手动控制任务循环而不是让Agent自己决定任务列表。 // 这样能确保严格按照规划的顺序执行。 const results []; for (const task of tasks) { console.log(\n Executing Task ${task.id}: ${task.description} ); // 构造给Agent的输入告诉它当前要执行哪个任务及其参数 const input Execute the current task. Tool to use: ${task.tool}. Parameters: ${JSON.stringify(task.parameters)}.; const response await agentExecutor.invoke({ input }); results.push({ taskId: task.id, success: !response.output.includes(failed) !response.output.includes(error), output: response.output, }); // 简单判断是否成功失败则中断流程 if (results[results.length - 1].success false) { console.error(❌ Task ${task.id} failed. Stopping execution.); break; } } return { projectName, tasksExecuted: results.length, results, }; } }这里有一个非常重要的设计抉择是让Agent完全自主规划每一步还是我们提供一个严格的任务列表来驱动它我选择了后者。在Mini版本中完全自主的Agent容易“跑偏”或陷入循环。我们通过TaskPlanner先制定一个可靠的“蓝图”然后让AgentExecutor严格按蓝图施工。这大大提高了整个流程的确定性和成功率。verbose: true这个选项非常有用它会在控制台打印出LLM的完整思考过程包括它决定调用哪个工具、为什么这对于调试和理解Agent行为至关重要。3.5 主程序与CLI集成最后我们把所有模块组装起来并提供一个简单的命令行界面。// src/index.js import { CodeGenerationAgent } from ./agents/code-agent.js; import { TaskPlanner } from ./tasks/planner.js; import { CreateFileTool, NpmInstallTool, CreateReactAppTool } from ./tools/index.js; import dotenv/config; import chalk from chalk; async function main() { const userRequirement process.argv[2]; // 从命令行参数获取需求 if (!userRequirement) { console.log(chalk.yellow(请提供项目需求描述例如)); console.log(chalk.cyan( npm start 创建一个用户管理后台使用Ant Design包含增删改查)); process.exit(1); } console.log(chalk.blue.bold(\n Mini编程Agent启动...)); console.log(chalk.blue(需求: ${userRequirement})); // 1. 初始化工具 const tools [ new CreateReactAppTool(), new NpmInstallTool(), new CreateFileTool(), // 可以继续添加其他工具如 ReadFileTool, RunCommandTool ]; // 2. 规划任务 const planner new TaskPlanner(); console.log(chalk.magenta(\n 正在分析需求并生成项目计划...)); const plan await planner.generatePlan(userRequirement); console.log(chalk.green(计划生成完毕项目名: ${plan.projectName})); // 3. 执行任务 const agent new CodeGenerationAgent(tools); const executionResult await agent.executePlan(plan); // 4. 输出报告 console.log(chalk.blue.bold(\n 执行报告)); console.log(chalk.blue(项目: ${executionResult.projectName})); console.log(chalk.blue(执行任务数: ${executionResult.tasksExecuted}/${plan.tasks.length})); const successfulTasks executionResult.results.filter(r r.success).length; console.log(chalk.green(成功: ${successfulTasks})); console.log(chalk.red(失败: ${executionResult.results.length - successfulTasks})); if (successfulTasks plan.tasks.length) { console.log(chalk.green.bold(\n 项目生成成功)); console.log(chalk.cyan(请进入目录 ${plan.projectName} 查看生成的项目。)); console.log(chalk.cyan(运行 cd ${plan.projectName} npm run dev 启动开发服务器。)); } else { console.log(chalk.yellow.bold(\n⚠️ 项目生成部分完成请检查错误日志。)); } } main().catch(console.error);在package.json中添加启动脚本{ name: mini-code-agent, version: 1.0.0, type: module, scripts: { start: node src/index.js }, dependencies: { // ... 依赖项 } }现在你就可以在终端中运行你的Agent了npm start 创建一个待办事项应用使用Chakra UI需要能添加、完成和删除任务4. 实战效果、优化与避坑指南4.1 实战效果演示让我们用一个具体的例子跑一遍流程。输入需求“创建一个简单的产品展示页面使用Tailwind CSS有一个导航栏、一个产品网格和一个页脚。”Agent的执行日志可能如下 Mini编程Agent启动... 需求: 创建一个简单的产品展示页面使用Tailwind CSS有一个导航栏、一个产品网格和一个页脚。 正在分析需求并生成项目计划... 计划生成完毕项目名: product-showcase Starting project: product-showcase Total tasks: 5 Executing Task 1: Initialize React project using Vite with TypeScript [Agent思考] 我需要使用 create_react_app 工具参数是 {template: vite}。 ✅ Successfully created React app via Vite. Executing Task 2: Install Tailwind CSS and related dependencies [Agent思考] 我需要使用 npm_install 工具参数是 {packages: tailwindcss postcss autoprefixer, isDev: true}。 Running: npm install --save-dev tailwindcss postcss autoprefixer ✅ Successfully installed: tailwindcss postcss autoprefixer Executing Task 3: Initialize Tailwind CSS configuration [Agent思考] 我需要使用 create_file 工具参数是 {filePath: tailwind.config.js, content: ...}。 ✅ Successfully created file: tailwind.config.js ... (后续任务日志)最终在product-showcase目录下你会得到一个已经初始化好、安装了Tailwind CSS、并且包含了基础页面组件Navbar.jsx,ProductGrid.jsx,Footer.jsx和样式文件的React项目。你可以直接npm run dev启动它。4.2 性能优化与效果提升技巧在多次实验后我总结出几个能显著提升Agent生成质量和效率的技巧工具描述的精细化LLM选择工具完全依赖description。描述要像给一个实习生写操作手册一样清晰。例如CreateFileTool的描述里要写明输入必须是JSON以及filePath和content两个键。好的描述能减少90%的工具调用错误。给LLM提供“范例”在系统提示词System Prompt中除了规则最好提供一两个正确调用工具的示例。这被称为“少样本提示Few-shot Prompting”能极大地引导LLM遵循你期望的格式和逻辑。任务粒度的把控任务规划器生成的任务不能太粗如“实现前端页面”也不能太细如“在div里写一个span标签”。理想的粒度是“一个工具调用能完成一个有意义的小步骤”比如“创建src/components/Navbar.jsx文件”、“在App.jsx中导入并渲染Navbar组件”。这需要你在规划器的提示词中加以引导。引入验证步骤可以在任务列表的最后加入一个“运行项目并检查是否有明显错误”的任务。这可以通过一个RunCommandTool执行npm run build或npm test来实现。如果构建失败Agent可以尝试修复或者至少给出明确的错误报告避免生成一个根本无法运行的项目。4.3 常见问题与排查实录在开发过程中我遇到了不少典型问题这里分享排查思路和解决方案问题现象可能原因排查与解决思路Agent陷入循环反复调用同一个工具。1. 工具执行成功但返回的信息LLM无法识别为“成功”。2. 任务描述模糊LLM不知道下一步该做什么。1.检查工具返回值确保成功时返回的信息包含明确的成功关键词如“Successfully”并且格式简洁。LLM可能无法理解过于复杂的输出。2.增强系统提示词在提示词中明确强调“一个任务只执行一次”“根据结果判断成功与否”。3.启用verbose日志查看LLM的思考链看它为什么认为需要重复执行。LLM生成的代码有语法错误或过时API。LLM的训练数据存在滞后或噪声。1.上下文限定在创建代码文件的提示词中加入“请使用React 18的最新语法”、“确保代码无语法错误”等约束。2.后置格式化集成Prettier作为一个工具在代码文件创建后自动格式化能修复部分格式错误。3.使用更专业的代码模型如果条件允许可以尝试使用Claude 3.5 Sonnet或专门用于代码的GPT-4版本它们在代码生成上更准确。任务规划不合理顺序错乱。规划提示词Prompt不够具体或者LLM的“温度”参数过高。1.优化规划提示词在提示词中提供更明确的顺序范例例如“总是先初始化项目再安装依赖然后创建配置文件最后编写源代码”。2.降低温度将TaskPlanner中LLM的temperature设为0.1甚至0使其输出更确定。3.人工审核或后编辑对于非常重要的项目可以先将规划好的任务列表输出给人审核确认无误后再交给Agent执行。文件路径错误工具找不到目录。Agent执行上下文cwd与工具执行上下文不一致。1.统一工作目录在Agent初始化时明确设定一个绝对路径作为项目根目录projectRoot。所有工具在执行时都通过cwd: projectRoot参数确保在这个目录下操作。2.路径标准化在工具内部将传入的相对路径都基于projectRoot解析为绝对路径。API调用超时或频率限制。网络问题或OpenAI API的速率限制。1.增加超时设置在初始化ChatOpenAI时配置timeout选项。2.实现重试机制使用指数退避策略封装API调用对于偶发的网络错误进行自动重试。3.任务 checkpoint对于长任务序列可以将执行进度保存到本地文件。如果中途失败重启时可以从上一个成功点继续而不是从头开始。4.4 从Mini到进阶可能的扩展方向这个Mini Agent已经具备了核心的自动生成能力但距离一个成熟的开发助手还有距离。你可以基于此框架进行深度扩展集成代码检索与分析增加ReadFileTool和SearchCodeTool让Agent在编写新代码时能参考项目中已有的代码风格和逻辑保持一致性。实现交互式调试当代码生成后运行报错时Agent可以读取错误日志分析原因并尝试自动修复。这需要将运行测试、读取日志、分析错误、调用代码编辑工具串联起来。支持更多技术栈目前主要针对React。你可以为Vue、Svelte、Next.js等框架创建对应的项目初始化工具和组件模板。连接真实后端不仅生成前端代码还可以集成像prisma、supabase这样的后端即服务BaaS工具根据数据模型描述自动生成API层和数据库配置。引入人工审核点在关键决策点如选择核心依赖库的版本、确定项目架构设置“暂停”将选项呈现给用户选择实现“人机协同”的混合智能。通过这个手搓Mini编程Agent的过程我最大的体会是AI编程助手的神秘面纱被揭开了。它不再是无法理解的“黑盒”而是一套设计良好的、由规划、工具调用、记忆和验证组成的可控制系统。这种“白盒化”带来的不仅仅是效率提升更重要的是控制感和可定制性。你可以根据自己团队的技术规范来调整工具可以根据项目类型来优化任务规划逻辑。这60%的效率提升是建立在对整个流程的深度理解和掌控之上的这比单纯使用一个外部工具要踏实得多。