← Lab

ReAct loop — reason + act, live

An agent loops Reason → Act → Observe until it can answer. Step through it and watch the active node and edge animate — a real React Flow graph, not a screenshot.

what you’re looking at

An AI agent rarely answers in one shot. It thinks, decides to use a tool, looks at what came back, and repeats — like a person googling, reading, then googling again — until it knows enough to answer.

why it matters

This loop is what turns a chatbot into an agent that gets real work done. Nearly every AI product you hear about is some version of this cycle. Seeing it step by step demystifies the whole thing.

try this yourself
  1. 1Press step repeatedly — follow the glowing node around the loop.
  2. 2Notice it visits Act → Observe twice (once per fact it needs) before answering.
  3. 3Drag the canvas / zoom — it’s a live graph, and reset replays from the top.
React Flow · @xyflow/react (MIT)
beat
0 / 9
tool calls
0
loops so far
0
answered
no
the agent graph (drag · zoom · step)
what just happened (say it out loud)

Run an operation to see it step by step.

사상: ReAct = Reasoning + Acting. The model interleaves a Thought (plan), an Action (tool call), and an Observation (result), looping until it can answer. It's the backbone of almost every agent.
▶ deep-dive videos — “ReAct agent reasoning acting loop LLM explained”