AI Agents Belong Behind React Server Components
Agents need API keys, database access, and internal tools. None of that belongs in a browser, which makes the RSC boundary a convenient place to draw the line.
Michael Chen/2 min read
React Server Components get discussed mostly as a data-fetching story. The more interesting use, in our experience, is as a place to run AI agents.
Keep the agent off the client
An agent is only useful if it can touch things: your database, your provider API keys, whatever internal tools you give it. Ship any of that to the browser and you have handed your credentials to anyone who opens devtools. With RSC the split is clean. The client sends intent ("find me a flight"), the server runs the agent loop, calls the airline API, hits the database, and the client receives a rendered flight card. The browser never sees a key, a connection string, or an intermediate tool call.
Tool calls are just server functions
Model tool calling maps directly onto Server Actions. The model emits a structured call, your server executes a real function, and the schema you hand the model is the contract between them.
'use server'
export async function bookFlight(flightId) {
const flight = await db.flights.findUnique({ where: { id: flightId } });
if (!flight) throw new Error('Unknown flight');
return db.bookings.create({ data: { flightId } });
}
Validate the arguments. The model will eventually hallucinate an ID, and "the AI decided to call this" is not an authorization check.
Fewer round trips
An agent that needs three tool calls to answer a question makes three round trips somewhere. If the agent runs next to your data, those trips are intra-datacenter, single-digit milliseconds each. If it runs on the client, each one crosses the public internet twice. Colocating the loop with the backend is the cheapest latency win available, and streaming the final UI from the server covers the remaining wait honestly instead of hiding it behind a spinner.
The caveat: RSC alone gives you one payload at the end. For token-by-token output or visible intermediate steps you still need a streaming channel on top, which is exactly the gap the current wave of RSC-aware AI SDKs is filling. Worth watching, not yet boring, which is our polite way of saying expect breaking changes.
Related reading
Top 5 React Libraries for Building AI InterfacesThe five libraries that end up in almost every AI interface we ship, and the caveats we wish someone had told us about each one.Resources2 min readOptimizing LLM Integrations in ReactModel inference is slow and metered per token. Most of the fix lives in the UI layer: optimistic rendering, debounced requests, and counting tokens before you send them.Optimization2 min readCase Study: Scaling AI Workflows with ReactNotes from building a drag and drop agent pipeline editor with React Flow and Zustand, including the render problems that showed up past a few hundred nodes.Case Study2 min read