在过去，AI 大多只Neng聊天；而今天我们要让它从“说话”跨越到“动手”。想象一下当你在终端里敲下“一键生成完整的 React TodoList”，屏幕上立刻出现项目目录、源码文件，甚至Yi经启动好的本地服务器——这不再是科幻，而是Ke以落地的技术。

所谓 ReAct，其实是一种“先想后干，再kan结果再想”的闭环。模型每轮接收所有历史信息，经过一次推理决定是否需要调用外部工具；Ru果需要，就把调用请求交给对应函数；函数执行完毕后把产出当作观察信息喂回模型，进入下一轮思考。

这套循环kan似简单，却是让语言模型真正拥有「行动力」的关键。Ru果没有它，AI 只Neng输出一次答案，然后就结束了——根本无法完成需要多步协作的任务。

思考 模型阅读当前 messages 列表，判断下一步该Zuo什么。Ru果要动手，它会在回复里放置 tool_calls。

行动 主程序检测到 tool_calls 后遍历每一个调用，用事先注册好的工具函数完成实际工作——写文件、执行 Shell 命令等。

观察 工具把结果封装成 ToolMessage 压入 messages，相当于把「眼睛kan到」的内容喂回「大脑」，模型据此调整策略。

只要模型认为任务Yi完成（即不再产生 tool_calls) 或者达到预设的Zui大迭代次数，这个循环就会自然停下来。

市面上层出不穷的框架固然便利，但它们往往把底层细节包装得太死板，让人失去对「灵魂」的感知。亲自实现一次不仅Neng帮助我们：

彻底弄清每一步到底发生了什么：从绑定工具到解析返回，每个环节dou一目了然。

自由 ：想加数据库操作？想让 AI Neng打开浏览器？只要写一个符合约定的函数即可，无需等待框架geng新。

避免黑盒陷阱：当出现意外错误时你Ke以直接定位到是哪一步出了问题，而不是盲目翻kan框架日志。

// 1️⃣ 引入必备模块
import { OpenAI } from "@langchain/openai";
import { tool, ToolMessage } from "@langchain/core/tools";
// 2️⃣ 定义几个基础工具
const writeFile = tool(
  async  => {
    const fs = await import;
    const dir = require.dirname;
    await fs.mkdir;
    await fs.writeFile;
    return `✅ Yi写入 ${path}`;
  },
  {
    name: "write_file",
    description: "向指定路径写入文本内容，会自动创建缺失目录。",
    schema: {
      type: "object",
      properties: {
        path: { type: "string", description: "文件完整路径" },
        content: { type: "string", description: "待写入文本" }
      },
      required: 
    }
  }
);
const execCmd = tool(
  async  => {
    const { exec } = await import;
    return new Promise => {
      exec => {
        if  return res;
        res;
      });
    });
  },
  {
    name: "execute_command",
    description:
      "在当前工作目录下运行任意 Shell 命令，请务必确保安全。",
    schema: {
      type: "object",
      properties: { command: { type: "string", description: "Shell 指令" } },
      required: 
    }
  }
);
// 3️⃣ 把工具绑定到模型
const model = new OpenAI;
const modelWithTools = model.bindTools;
// 4️⃣ 实现 ReAct 主循环
async function runAgent {
  const messages = ;
  const maxIter = 12;
  for  {
    // 思考
    const resp = await modelWithTools.invoke;
    messages.push;
    // 没有 tool_calls → 完成
    if  return resp.content;
    // 行动 & 观察
    for  {
      const toolFn =
        call.name === "write_file"
          ? writeFile.invoke
          : call.name === "execute_command"
          ? execCmd.invoke
          : null;
      if  continue;
      const result = await toolFn;
      messages.push);
    }
  }
}

四、实战演练：让 AI 从零生成完整 React TodoList 应用

# 指令示例：

Create a Vite‑React project named `my-todo`, implement CRUD for tasks, add category filter and local storage, apply a gradient background with smooth animations, and finally run `pnpm dev`.

把上面的文字塞进 runAgent, 程序会经历类似下面几轮：

第一轮思考：Ai 判断需要先创建项目，于是调用 execute_command

第二轮观察：Ai 收到创建成功的信息后再决定安装依赖

第三轮行动：Ai 调用写文件工具，把 `src/App.jsx` 的骨架代码写进去……如此反复，直至所有功Neng点全部落地。

# 完成标志：Ai Zui后返回一句 “All done! Server started at http://localhost:5173”。此时消息数组Yi经包含数十条记录，但只要 Token 没超限，就Ke以顺利结束。

No‑limit 执行权限危害大：Ai Neng直接跑任何 Shell 命令，一旦被恶意指令利用可Neng导致系统被破坏。建议在生产环境中加入白名单或沙箱限制。

Toke​n 爆炸：`messages` 越累积越长，Zui终可Neng超过模型上限。常见Zuo法是对历史记录进行摘要或删减，只保留Zui近几轮关键信息。

Error Handling 必不可少：Ai 在收到错误日志后应当有重新尝试或换方案的Neng力，否则hen容易卡在同一个报错循环里。Ke以在 Observation 阶段加入简易的「反思」提示，让模型自行调度重试策略。

Semi‑automatic mode：If you’re uneasy about full autonomy, expose a tiny UI that lets you approve each tool call before execution.

Pipelines 自动化：Pipelines 中加入 AI Agent，让它根据业务需求动态生成 CI/CD 脚本，实现“一键部署”。

LLM‑driven 数据库迁移：Ai 分析旧库结构，自动生成迁移脚本并提交审查。

SRE 辅助监控：Ai 根据报警信息主动调起诊断脚本，并把结果反馈给运维人员，实现“预警+自愈”。

MLOps 场景：Ai Neng够读取实验配置，自动启动训练任务并监控日志，从而降低科研团队的人力开销。

# Ru果你拥有这样一位全Neng AI 助手，你Zui期待它帮你完成哪件重复性工作？

欢迎在评论区留下你的想法，让我们一起构想geng高效、geng有趣的编码未来！🚀