Every AI agent tutorial ends the same way.
The agent completes a task. The output looks correct. The tutorial ends. The reader closes the tab feeling like they understand how to build AI agents.
Then they try to build one for a real enterprise application — and discover that the tutorial covered about fifteen percent of what production AI agent development actually requires.
This post is about the other eighty-five percent.
The prototype is the easy part
The core loop of an AI agent is not complex to implement in JavaScript:
async function runAgent(goal, tools) {
const messages = [{ role: 'user', content: goal }];
while (true) {
const response = await callModel(messages, tools);
if (response.type === 'complete') {
return response.output;
}
const toolResult = await executeTool(
response.toolName, response.toolInput
);
messages.push({ role: 'assistant', content: response });
messages.push({ role: 'tool', content: toolResult });
}
}
This works in development. With a clean dataset. With well-formed goals. With tools that behave as expected. Production is different.
What production adds to the agent core
Observability
Every iteration of the loop needs to be logged. Every tool call. Every model response. Every state transition. Not because you expect things to go wrong — because things will go wrong in ways you did not anticipate, and the only way to debug them is to have a complete record of what the agent did and why.
The logging format needs to satisfy audit requirements — structured, queryable, and retained for the period required by applicable compliance frameworks.
Error handling
The model will occasionally produce malformed tool calls. The tool APIs will occasionally return unexpected errors. The loop will occasionally not converge. Each of these needs explicit handling — not a generic catch block, but specific handling for each failure mode that logs what happened and prevents it from propagating into the enterprise systems the agent is connected to.
Timeout and circuit breaking
Unbounded loops are not acceptable in production enterprise applications. The agent needs a maximum iteration count. Each tool call needs a timeout. The orchestration layer needs circuit breakers that prevent cascading failures when a dependent service is slow or unavailable.
Rate limiting
Enterprise AI agents can hit model API rate limits in ways that development testing does not reveal. Rate limiting needs to be built into the orchestration layer before production deployment, not after the first rate limit error appears in the production logs.
What production adds to tool design
Development tools are optimistic. They assume clean inputs, fast responses, and well-formed outputs. Production tools are defensive. They assume messy inputs, variable response times, and occasional failures at every point in the call chain.
Production tools need input validation that catches the malformed inputs that language models occasionally produce. They need timeout handling. They need error handling that is specific to each failure mode. They need idempotency for tools that have side effects — so that retried tool calls do not produce unintended duplicate effects.
What production adds to the React interface
The development interface for an AI agent is often minimal — a text input for the goal, a display area for the output, a indicator while the agent runs.
The production interface for an enterprise AI agent is a governance surface. It needs to show the agent's goal. It needs to show the agent's reasoning — what tools it called, what results it received, what decisions it made. It needs to show the agent's outputs in a form that allows users to review, approve, reject, or correct them.
Building this interface with React requires thinking about component architecture explicitly:
function AgentInterface({ agentState, onApprove, onReject, onCorrect }) {
return (
The sequence that works
▪ Build observability first — before the agent can do anything interesting, it should be logging everything
▪ Build tools defensively — validation, error handling, timeouts, and logging before connecting tools to the agent
▪ Build the human review interface early — governance requirements are most visible here and hardest to retrofit
▪ Design state management explicitly — the implicit state management of simple React apps does not scale to agent complexity
Where to go deeper
JS Days 2026 — September 16–17, 2026, free and fully virtual — includes a session on building custom AI agents with JavaScript, React, and ReExt from Marc Gusmano, Sales Engineer at Sencha.
Free registration at jsdays.io.