Skip to content
AI & Machine Learning Rich #agents#tool-use#react

Agent Loop: Perceive, Plan, Act

Observe state, choose tool, execute, observe result. Repeat until done.

A free, animated agent loop: perceive, plan, act you can read here or embed on any website, from Scrollchart.

Agent Loop: Perceive, Plan, Act

Agent Loop: Perceive, Plan, Act, ObserveLLM cycles until stop condition: final answer or max-turns budget exhaustedContext window filling each turnloop until done

A four-step cycle: perceive (read context, prior tool results), plan (LLM emits a tool call or final answer), act (tool runs), observe (result appended to context). Loops until an end condition. Token-budget bar shows context filling; failure modes (tool error, infinite loop, wrong tool) annotated.

Good for

  • Agent framework tutorials for LangChain, LlamaIndex, AutoGPT, and Anthropic Claude SDK
  • ReAct and MCP architecture articles explaining the perceive-plan-act-observe execution model
  • Production AI engineering guides on token budget management and failure mode handling in agentic pipelines

Source & accuracy

This agent loop: perceive, plan, act is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Perception, planning, and action cycles

An agent loop is the core cycle that powers autonomous systems. The agent observes the current state (perception), reasons about what action to take given its goals (planning), executes that action, then observes the new state. This cycle repeats until the goal is achieved or the agent concludes the task is impossible. The loop is fundamental to robotics, game AI, and language model agents with tool use. In language model agents, perception is reading the current state and task; planning is reasoning about which tool to call; action is invoking the tool; and the new observation is the tool's output. The loop continues until the final answer is reached.

Scaling agents through tool use

Early agents were limited by what they could reason about directly. Modern agents access external tools: search engines, calculators, code interpreters, databases. This vastly expands capability. An agent reasoning about a math problem calls a calculator. One asked a question about current events searches the web. One asked to write code calls a code execution environment. Each tool expands the agent's abilities beyond its training knowledge. Tool use introduces a planning problem: which tool to call, in what order, with what arguments. Language models excel at this reasoning because they learned to produce text in specific formats. The loop become a scaffold on top of language model reasoning, extending pure prediction into goal-directed behavior.

Embed this diagram

Add this animated agent loop: perceive, plan, act to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated agent loop: perceive, plan, act for any website.
Who uses it
AI/ML blogs, Developer blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="agent-loop" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Agent Loop: Perceive, Plan, Act" for my website?
Scrollchart provides "Agent Loop: Perceive, Plan, Act" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a agent loop: perceive, plan, act in a developer or tech blog?
Copy the one-line snippet from the Scrollchart diagram page and paste it into your post HTML. It works in any static site generator, CMS, or hand-coded HTML page. The embed is a thin loader, not an iframe, so the content is fully in your DOM.