跪拜 Guibai
← All articles
Artificial Intelligence

A ReAct Loop with Four File-System Tools Makes a Minimal Coding Agent

By 东风破_ ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Coding agents like Cursor and Claude Code feel like magic, but their foundation is a simple ReAct loop connected to file-system tools. Seeing that loop built from scratch with Node.js demystifies the architecture and clarifies exactly what engineering work—sandboxing, patching, process management—separates a demo from a production tool.

Summary

A minimal coding agent, built on a standard ReAct loop, uses four Node.js tools—read_file, write_file, list_directory, and execute_command—to interact with a local filesystem. Given a high-level task to create a Vite + React + TypeScript TodoList app, the model decides when to scaffold the project, write component code, install dependencies, and start the dev server, with each tool's output fed back as context for the next decision.

The system prompt enforces strict rules, such as preventing redundant `cd` commands when a `workingDirectory` parameter is already set, to avoid common shell errors. The agent successfully generates a functional application with state management, localStorage persistence, and CSS animations, proving the output is real code written to disk, not just a text suggestion.

Production gaps remain: the agent lacks workspace sandboxing, command confirmation for destructive actions, structured patching, automated build verification, and long-running process management. These missing pieces separate a demo from a tool like Cursor or Claude Code, but the core decision-action-observation loop is identical.

Takeaways
A ReAct loop with four tools—read_file, write_file, list_directory, and execute_command—is enough to build a working React app from a natural-language prompt.
The model never touches the filesystem directly; a Node.js runtime executes the tools and feeds results back as ToolMessages.
A system prompt must explicitly forbid redundant `cd` commands when a `workingDirectory` parameter is already set, or the agent will navigate into non-existent nested directories.
The generated project includes real App.tsx code with state management, localStorage persistence, and CSS transitions, written to disk through the write_file tool.
Production coding agents need workspace restrictions, command confirmation, structured patching, build verification, and process management—none of which this demo implements.
Conclusions

Most developer-facing AI tools are just ReAct loops with different tool sets; the core architecture hasn't changed since the pattern was introduced.

The gap between a demo and a product is almost entirely in the safety and reliability engineering around the tools, not in the model's reasoning capability.

Explicitly teaching a model to avoid redundant `cd` commands in a system prompt is a brittle fix that reveals how easily tool-use agents produce silent shell errors in production.

Concepts & terms
ReAct Loop
A reasoning-and-acting pattern where a model Reasons about the next step, Acts by calling a tool, Observes the result, and Loops until the task is complete. It is the foundational architecture behind most modern AI coding agents.
ToolMessage
In LangChain, a message type that carries the result of a tool execution back into the conversation history, allowing the model to incorporate real-world outcomes into its next decision.
bindTools
A LangChain method that converts tool definitions—name, description, and Zod schema—into a format the language model can understand, enabling it to generate structured tool-call requests.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗