Agentic AI explained — an animated walkthrough

An animated, client-side slide deck that teaches how large language models and AI agents work — from raw text to sampled token, and from a single forward pass to a full agent loop. It is organized into six self-contained tracks (LLM inference, LLM training, RAG, Agents, Coding agents, World models) with 32 stations and 25 optional deep-dives, each using step-by-step animation to make one concept visually intuitive. Every station has a fully static Theory view; several also offer a live Practice view that runs the real computation against a local Ollama server or, for the Agents track, a companion bridge process. No build step, no framework — vanilla HTML/CSS/JS served by a trivial static host.

From the intro mode picker the deck splits into six self-contained tracks. You pick one and walk its stations:

Mode	What it teaches
LLM inference	The per-token forward pass — how a trained model turns a prompt into the next token.
LLM training	How the model came to be: the training loop, predictor → assistant, reasoning via RL, evaluation.
RAG	How the model is used — retrieval-augmented generation over your own documents.
Agents	The model given agency: tools, a loop, and memory — the pattern behind software like Claude Code.
Coding agents	That agent specialized to a codebase — read, edit, run, verify.
World models	A view of the frontier: models that learn how a world evolves, not just the next token.

32 stations and 25 optional deep-dives in total. The first four modes have live Practice panels; World models is Theory-only (there is no local world-model to talk to).

The inference pipeline

tokenize → embed → position → attention → feed-forward → norm & residual → logits → sample ↺

One example sentence — "The snowman began to ___" → predict melt — is threaded through every stage as a trackable visual object, from raw text to sampled token. (snowman splits into the sub-word tokens snow + man, so the split is part of the example itself.)

Each stage is a station with an animated, step-by-step reveal. Attention is the deep one — Q/K/V projections, scaled dot-product scoring, causal masking, softmax, the weighted sum of values, and multi-head. Many stations also hang deep-dives ("go deeper" detail views) off the mainline — RoPE, the KV cache, GQA/MLA, Mixture-of-Experts, weight tying, speculative decoding, quantization, context scaling, LoRA, jailbreaks, hallucination, distillation, sub-agents, MCP, hooks, diffusion, vision tokenization, and more.

Note on the numbers: dimensions are shrunk for legibility (d_model = 12, 5 tokens, 3 heads) and values are illustrative — but every operation is faithful in shape and form. Where it's cheap and clarifying (sinusoidal positional encoding, dot-product scores, softmax) the values are computed for real, and each data module's header says which it is.

Navigate

• Mode picker — the intro page is the default landing; choose a mode to enter its walkthrough. The spine, guided tour, number keys, and progress bar all scope to the current mode.
• Guided tour — press Next (or → / space) to walk the current mode's stations in order.
• Explore — click any node on the persistent spine to jump straight to it. Number keys jump between the stations of the current mode.
• Search — the header search box indexes every station and deep-dive, plus named sub-topics that appear in no title (type RLHF or Token ID).
• Resume — the intro offers to continue where you left off.
• Deep links — every station and deep-dive has its own URL fragment: #attention, #embed, #attention/4 for a specific sub-step, #attention-rope for a deep-dive.
• Header views, off the mainline: Help (the optional local setup, copyable), Playground (chat with your local Ollama models, images included), and Settings.

Two display modes

Orthogonal to whichever content mode you're in:

• Normal — the full app shell (top bar, spine, controls).
• Present (Slides) — a chrome-free, fullscreen view for projecting. Toggle with p or the header ▶ Present button; Esc exits.

Both are theme-aware and follow your system light/dark preference (overridable in Settings).

Practice (live, optional)

Every station's Theory view is fully static and touches no network. Many stations also offer a Practice view that runs the real computation against a user-run local Ollama server:

Track	Practice panels
LLM inference	Tokenize, Embed, Logits, Sample — and Attention, which needs no Ollama (see below)
LLM training	Reasoning, Evaluation
RAG	Generate (a real retrieve-then-generate pass)
Agents	Tools (a real tool-calling loop); agent-loop streams a real Claude Code agent via the bridge
Coding agents	The coding loop's Simulated runner — a local model editing a virtual in-memory project
Deep-dive	tokenize-vision — send a bundled image to a local vision model

Ollama is not part of the deck — Practice just talks to it if it's running, and degrades to a clear "not connected" panel otherwise. Two panels are the exceptions:

• Attention runs a real GPT-2-small in your browser via vendored onnxruntime-web. Its ~120 MB of weights are not part of this repository — fetch them once (below).
• Agent loop needs the optional bridge companion in bridge/, because a Claude Code agent is a CLI process rather than an HTTP server. Its safety model is in bridge/README.md.

Run it

No build step, no dependencies, no framework — vanilla HTML/CSS/JS with native ES modules. Because of those modules, serve the deck over a trivial static host; opening index.html from file:// won't work in most browsers (module CORS).

Clone it, then from the repository root:

./start.sh                             # Linux/macOS — start.bat on Windows

 docs  http://localhost:8501/          # may change if port is already in use
 deck  http://localhost:8123/          # may change if port is already in use

Ctrl-C to stop both.

That one command serves both the deck and the written documentation, prints the URL of each, and stops both on Ctrl-C. Nothing else to install: MkDocs powers the docs, and if it isn't there the launcher installs doc/requirements.txt on the first run — into a virtualenv at doc/env if your Python refuses to install into itself.

If a default port is taken the next one is tried, up to ten, and the URL printed is always the port actually bound — so whatever you already have running keeps its port instead of being killed or shadowed to free one.

Or by hand, to serve just one of them with anything that serves static files:

cd agentic-ai-explained && python3 -m http.server 8123   # the deck → http://localhost:8123/
cd doc && mkdocs serve                                   # the docs → http://127.0.0.1:8000/

Optional one-time setup

None of these is required to run the deck — each unlocks one live Practice surface, and every panel says so itself when its companion is missing.

# Practice panels backed by a local model
ollama serve
ollama pull all-minilm      # embeddings — Embed panel
ollama pull qwen3.5:4b      # completion — Logits, Sample, RAG, Tools, coding loop
ollama pull moondream       # vision — the tokenize-vision deep-dive

# The Attention Practice panel: ~120 MB of GPT-2 weights, not committed to this repo
agentic-ai-explained/vendor/transformers/models/fetch-model.sh    # or fetch-model.ps1 on Windows

# The Agents track's live agent-loop panel (needs a Claude API key or subscription)
cd bridge && npm install && node bridge.mjs

The Attention weights are downloaded, checksum-verified, and only then installed; re-running the script is a no-op. Why they aren't committed, where they're hosted, and how to regenerate them offline: vendor/transformers/README.

The written documentation

doc/ is a MkDocs site covering the same subject in writing — How language models work — with a page per concept, illustrated with cropped diagrams. It is written to stand on its own: documentation of the subject, not of this deck, so it can be read or handed out by someone who never opens the deck at all.

./start.sh                             # → http://localhost:8501/  (also serves the deck)

./start.sh (or start.bat) is the same launcher as above, and MkDocs plus the theme is what it installs for you on the first run — pip install -r doc/requirements.txt by hand does the same thing. To serve only the documentation, cd doc && mkdocs serve.

The pages are plain Markdown and the figures are committed PNGs, so doc/docs/ also reads fine straight from the repository or on a Git host. doc/docs/index.md is the front door.

Layout

All app files live under agentic-ai-explained/:

Path	What
index.html	App shell (top bar, spine, stage, controls)
styles/base.css	Theme-aware (light/dark) styles + the visual primitives' CSS
src/main.js	State, hash routing, mode/tour navigation, keyboard
src/intro.js	Intro page + mode picker (maps stations to the six modes)
src/stations.js	Ordered station registry — spine order, tour order, mode membership
src/stations/*.js	One module per station, one per mode's worth of them
src/deepdives.js, src/deepdives/*.js	Optional "go deeper" detail views hung off a station
src/practice/*.js	Live Practice panels (talk to Ollama, the bridge, or in-browser ONNX)
src/primitives.js	Token chip, heat-strip, matrix grid, flow lines, morph, 3D scatter
src/data/*.js	The worked example and each station's data — every header states whether its numbers are real or illustrative
src/ollama.js, src/bridge.js	Endpoints for the optional local services
src/search.js, src/present.js, src/progress.js, src/theme.js	Topic search, Present mode, progress bar, light/dark
src/help.js, src/playground.js, src/settings.js	Off-mainline header views
vendor/	Vendored GPT-2 BPE data and onnxruntime-web (no package manager)
bridge/	Optional user-run companion that streams a real Claude Code agent
doc/	The written documentation — a MkDocs site, one page per concept
start.sh, start.bat, start.py	Launcher: serves the docs (8501) and the deck (8123), stepping past a busy port

Start at src/stations.js for the station order and src/deepdives.js for what hangs off which station. The *.test.mjs files next to their modules are plain node scripts — no framework, run one directly.

Licence

MIT. The deck vendors two third-party components (onnxruntime-web and the GPT-2 BPE tokenizer data), both permissively licensed and attributed in LICENSE.md.