AI Agent Orchestration

Watch an AI agent route a prompt through a planner, tools and a final answer — every step a node.

How it works

Each node is one agent step: the prompt enters a router that picks a tool, tool results flow back into the model, and the run terminates at an answer node. Streaming status into node data lets users watch the agent reason in real time.

Source code

tsx

const nodes = agentTrace.map((span) => ({
  id: span.id,
  type: span.kind === "router" ? "decision" : "default",
  position: layout(span),
  data: { label: span.name, status: span.status },
}));

<ReactFlow nodes={nodes} edges={edges} fitView />

Further reading: https://reactflow.dev/learn