← Back to Projects

AI Agent Visualizer

Interactive educational tool explaining how AI agents work

AI Agent Visualizer Thumbnail

About

An interactive single-page application that teaches how AI agents work through an animated diagram. The experience grows in complexity across 6 stages, each building on the previous, suitable for audiences with varying levels of AI knowledge.

Learning Stages

  • Stage 1: Basic LLM Request - Understanding fundamental prompt and response
  • Stage 2: Tool Calling - LLMs using external APIs and tools
  • Stage 3: ReAct Loop - Iterative reasoning and action cycles
  • Stage 4: Memory & Context - Maintaining state across interactions
  • Stage 5: Multi-Agent Orchestration - Multiple specialized agents working together
  • Stage 6: Failure & Recovery - Error handling and human-in-the-loop

Audience Levels

  • Newcomer: No AI background - plain-language explanations and tooltips
  • Curious Learner: Familiar with ChatGPT - deeper insights into agent internals
  • Practitioner: Developers and researchers - technical details on demand

Design Features

  • • Single self-contained HTML file - no build tools or dependencies
  • • Interactive SVG diagram with smooth animations
  • • Progressive complexity - stages build on each other
  • • Color-coded node types (LLM, tools, memory, decisions, humans)
  • • Tooltips and "Go Deeper" sections for each audience level