Zui近，Claude Code 的横空出世让不少开发者眼前一亮。那种“不仅Neng写代码，还Neng直接操作文件系统、运行终端命令”的体验，仿佛让我们kan到了未来编程的一角。但说实话，作为技术人员，我们真的只Neng依赖这些闭源的“黑盒”吗？答案显然是否定的。

剥开 Claude Code 炫酷的外衣，其核心逻辑依然是 大模型+ 工具调用 + 代码场景 的经典组合。只要我们掌握了这套组合拳，利用 LangChain.js 完全Ke以在本地构建一个符合自己工作流的专属编程助手。今天我们就来深入探讨如何通过 ReAct循环，手搓一个简易版的 AI 编程助手。

从“对话”到“行动”：ReAct 范式的崛起

传统的 LLM 应用大多停留这远远不够。我们需要的是“解决问题”的Neng力，而不仅仅是“回答问题”。这就引出了 ReAct 范式。

ReAct 的核心在于模拟人类的思维过程：思考 -> 行动 -> 观察 -> 再思考。它不是一次性给出答案，而是通过一个循环，不断地根据执行结果调整策略。在 LangChain.js 中，这意味着我们需要构建一个 Agent，让它Neng够自主决定何时调用工具，以及如何处理工具返回的结果。

在此之前，我们假设你Yi经对 LangChain.js 的基础——比如接入豆包大模型、使用 `invoke` 或 `stream` 进行调用、以及 `Messages` 消息体系——有了一定的了解。Ru果这些概念对你来说还比较陌生，建议先去补补课，毕竟万丈高楼平地起嘛。

打造全Neng工具箱：文件与命令的完美协奏

要让 AI 真正“动”起来光有大脑是不够，还得有手脚。我们的简易版 Claude Code，核心Neng力被抽象为三个基础工具：读取文件、写入文件、执行命令。这三个工具构成了代码助手的“Zui小可行性闭环”。

读写工具：不仅仅是简单的 I/O

我们得让 AI Neng“kan”懂现有的代码，并Neng“写”出新的文件。这听起来简单，但在实际工程中，细节决定成败。

先来kankan read_file 工具的设计。它的作用不仅仅是读取内容，geng是将文件信息注入到模型的上下文中。

const readFileTool = tool(
    async  => {
        try {
            const content = await fs.readFile;
            return `文件内容:
${content}`;
        } catch  {
             return `读取文件失败: ${error.message}`;
        }
    },
    {
        name: 'read_file',
        description: '用此工具来读取文件内容...',
        schema: z.object({
            filePath: z.string.describe,
        }),
    }
);

这里的关键在于 description 和 schema。这就像是给模型发的“使用说明书”，告诉它这个工具是干嘛的，需要传什么参数。当用户说“帮我kankan src/utils/helper.js 有什么问题”时模型正是通过这些描述，自主决定调用 read_file，而不是让用户手动把代码贴上来。

再来kan write_file。这个工具的设计有一个非常人性化的细节：recursive: true。

const writeFileTool = tool(
    async  => {
         try {
            const dir = path.dirname;
            await fs.mkdir;  // 关键：自动创建目录
            await fs.writeFile;
            return `文件写入成功: ${filePath}`;
        } catch  {
             return `文件写入工具调用失败: ${error.message}`;
        }
    },
    {
        name: 'write_file',
        description: '向指定路径写入文件内容，自动创建目录',
        schema: z.object({
            filePath: z.string.describe,
            content: z.string.describe,
        }),
    }
);

想象一下你让 AI “创建一个 React 组件 components/UserProfile/index.tsx”。Ru果工具不支持自动创建目录，AI 就得先调用命令创建文件夹，再写文件，这无疑增加了复杂度。有了 recursive: true，components/ 和 UserProfile/ 这两层目录会在写入文件的一瞬间自动搞定。这种顺滑的体验，才是 Claude Code 的精髓所在。

命令执行：避开“cd”陷阱的艺术

这是三个工具中Zui复杂，也是Zui容易踩坑的一个。我们需要它既Neng处理像 npm install 这样的交互式命令，也Neng支持像 npm run dev 这种需要常驻后台的服务。

hen多初学者会习惯性地用 cd my-project && npm start 这种写法。但在跨平台的自动化脚本中，这简直是噩梦。Windows 的 CMD 和 PowerShell 对路径分隔符、引号的处理与 Unix 完全不同。一旦路径里带个空格，比如 my project，命令解析就会直接炸裂。

geng致命的是在 Node.js 的 spawn 中，cd 改变的是当前进程的目录，而子进程的 cwdRu果不指定，依然会乱套。特别是在后台运行模式下依赖 cd 会导致目录上下文彻底丢失。

所以我们的 execute_command 工具必须引入 workingDirectory 参数，利用 Node.js 原生的 path 模块来统一处理路径，彻底抛弃不可靠的 cd。

const executeCommandTool = tool(
    async  => {
        const  = command.split;
        const child = spawn(cmd, args, {
            cwd: workingDirectory || process.cwd, // 统一处理工作目录
            stdio: background ? 'pipe' : 'inherit',  // 前台交互 或 后台静默
            shell: true,
            detached: background,  // 关键：后台运行解耦
        });
        if  {
            child.unref;  // 允许父进程退出而子进程继续运行
            return `命令Yi在后台启动: ${command}`;
        }
        // ... 前台模式等待完成的逻辑
    },
    {
        name: 'execute_command',
        schema: z.object({
            command: z.string,
            workingDirectory: z.string.optional,  // 项目隔离
            background: z.boolean.optional,  // 服务启动模式
        }),
    }
);

通过这种方式，无论用户在 Windows 还是 Linux 上，无论项目路径多复杂，我们douNeng精准地在指定目录下执行命令，实现了真正的环境隔离。

构建 Agent 核心：让模型学会“思考”与“反思”

工具准备好了现在我们需要构建 Agent 的“大脑”。它的任务是：理解需求 -> 决策工具 -> 执行动作 -> 观察结果 -> 循环直至完成。这一节，我们将实现一个支持流式输出和多轮工具调用的交互式 Agent。

ToolMessage：闭环的关键一环

这里有一个极其容易被新手忽略，但却是整个系统Zui核心的机制：ToolMessage。

hen多人以为工具调用就是“模型发指令 -> 程序执行 -> 结束”。大错特错！Ru果缺少了 ToolMessage，模型就会陷入“失忆”状态。它会忘记自己刚才调用了什么工具，甚至会陷入“重复调用同一工具”的死循环，或者凭空幻想出执行结果。

正确的Zuo法是每次工具执行完毕后必须将结果封装成 ToolMessage，并且回传给模型。这就像是给模型写了一份“工作报告”，告诉它：“嘿，你刚才让我干的活儿干完了结果是这个，你kan下一步咋办？”

// 将工具结果反馈给模型
await history.addMessage(
    new ToolMessage({
        content: toolResult,           // 工具执行结果
        tool_call_id: toolCall.id,     // 必须匹配模型的 tool_call.id
    })
);

只有通过这种闭环，模型才Neng根据真实的执行结果进行下一步的推理。比如Ru果 npm install 报错了模型kan到报错信息后才会决定去执行 npm install --legacy-peer-deps 或者检查 package.json。

流式输出的工程细节

代码生成往往是一个漫长的过程。Ru果用户盯着黑屏等了半分钟，Zui后才蹦出一大段代码，体验肯定极差。流式输出不仅是为了提升“感知性Neng”，geng是为了建立“信任”。当用户kan到代码一行行地被打印出来他们Neng直观地感受到 AI 正在努力工作，而不是在摸鱼。

在实现上，我们需要处理两种输出源：一种是普通的文本回复，另一种是工具调用中的代码生成。

// 关键代码段：提取 write_file 中的代码内容实时展示
if  {
    outputContent += toolCallChunk.args.content;
}

通过解析工具调用参数并实时打印，用户Neng立即kan到生成的代码，而无需等待整个文件写入完成。这种即时反馈，是打造沉浸式 AI 体验的关键。

实战演示：从零构建 Express 服务

让我们把所有这些组件串联起来kan一个真实的对话流程。假设用户发出指令：“帮我创建一个新项目，一个简单的 Express 服务器，监听 3000 端口，返回 '这就是我的简易版claude code!!!'，然后启动它”。

这可不是一句话Neng搞定的事。Agent 内部的 ReAct 循环会像这样运转：

graph TD
    A --> B
    B --> C
    C --> D
    D --> E
    E --> F

在这个过程中，模型会先调用 write_file 生成 package.json 和 index.js，然后调用 execute_command 初始化项目、安装依赖，Zui后在后台启动服务。每一步的输出，dou会通过 ToolMessage 反馈给模型，指导它进行下一步操作。

async function runAgentWithTools {
    // 1. 记录用户输入
    await history.addMessage);
    let toolParser = new JsonOutputToolsParser;
    // 2. 多轮迭代，直到完成或达到上限
    for  {
        let messages = await history.getMessages;
        console.log;
        // 3. 流式调用模型
        let fullResponse = null;
        let hasStartedOutput = false;
        const stream = await modelWithTools.stream;
        // 4. 实时处理流式响应
        for await  {
            // ... 累积响应和解析工具调用的逻辑 ...
            // 实时打印到终端
            if  !== '') {
                if  {
                    console.log;
                    hasStartedOutput = true;
                }
                process.stdout.write;
            }
        }
        // 5. 保存完整响应到历史
        const response = fullResponse;
        await history.addMessage;
        // 6. 判断是否需要工具调用
        if  {
            return response.content;  // 无需工具，直接返回
        }
        // 7. 执行工具调用闭环
        for  {
            const foundTool = tools.find;
            if  {
                console.log})`);
                const toolResult = await foundTool.invoke;
                // 将结果反馈给模型
                await history.addMessage(new ToolMessage({
                    content: toolResult,
                    tool_call_id: toolCall.id,
                }));
            }
        }
        // 8. 循环继续：模型收到工具结果后决定下一步行动
    }
    return '达到Zui大迭代次数';
}

从“调用工具”到“编排工作流”

回顾整个实现过程，我们并没有使用什么高深莫测的黑科技。关键突破点在于三个工具的精心设计和 ReAct 循环的严谨实现。通过 LangChain.js，我们将大模型从一个单纯的“聊天机器人”，升级为了一个Neng够理解代码上下文、执行具体操作、并Neng根据反馈自我修正的“智Neng体”。

当然目前的版本还只是一个 MVP。我们还需要考虑geng强大的内存存储、geng细粒度的权限控制、以及geng复杂的错误处理机制。但这个简易版Yi经足够演示核心逻辑了。

geng重要的是这个过程让我们深入理解了 AI 应用开发的本质：不是替代开发者，而是将重复性、机械性的操作自动化，让人类专注于创造性决策。

完整代码我Yi经开源到了 GitHub，欢迎大家在评论区分享你的改造思路和遇到的问题。让我们一起探索 AI 编程助手的geng多可Neng性，毕竟未来的编程方式，可Neng就掌握在我们自己手中。

---