Interactive learning · AI systems

AI Demystified

How AI actually works, in the browser

Turn AI concepts into small experiments with visible assumptions and inspectable sources.

  • Source private
  • Live

My role: Curriculum, interaction design, simulation code, evidence manifests, and delivery.

  • Next.js
  • TypeScript
  • Client-side
  • 22 lessons

At a glance

Problem
AI explainers split into marketing gloss and research papers, with nothing in between that a curious engineer can actually poke at.
My contribution
I designed and built 22 interactive lessons with pure teaching simulations and source-backed evidence manifests.
Outcome
Live lessons and a capstone playground with numerical and interaction checks; the simulations illustrate mechanisms rather than benchmark providers.
AI Demystified homepage: an interactive tokenizer breaking a sentence into numbered tokens, with the 22-lesson curriculum in the sidebar
Product interface. Features on a live deployment can differ from the latest source revision.

Engineering decisions

  1. 01decision

    Let the learner change the system

    The agent lesson compares a fixed workflow and a bounded agent loop. Learners can change step and token budgets, introduce a staged timeout, and inspect recovery or the reason execution stops.

  2. 02decision

    Separate a teaching model from a deployed model

    The simulations run locally. Their traces illustrate mechanisms; they do not establish that a provider made the illustrated call or would produce the same answer.

    TradeoffA local simulation is honest about being a model of a model, and it cannot show a live provider's actual latency, pricing, or answers.

  3. 03decision

    Keep evidence beside the claim

    Typed manifests record sources, scope notes, and review dates. Pure simulation modules make numerical and interaction behavior testable without relying on prose alone.

What you can verify

Source and release links checked .

Scope and limits

A simplified simulation is a teaching device. Token counts, timings, and model behavior should be interpreted within the lesson's stated assumptions, not as a provider benchmark. The source repository is private; the live lessons expose their references and scope notes.

A short walkthrough

  1. 01

    Open the agent lesson and run its fixed workflow and agent loop with the same scenario.

  2. 02

    Introduce a simulated failure or reduce a budget, then pause and step through the state changes.

  3. 03

    Explain the stopping condition and compare the teaching model with the lesson's sources.

Curious how this is built? Look under the desk.

pocket terminal · ~/desk

A small terminal for this site. It prints only what is on the site; type help for commands.

The prompt needs JavaScript. Every destination is also in the navigation above.

ls work

7 products · * featured

Your turn: try open skillcheck, coffee, or help.

Loading terminal commands…

Type a command and press Enter. Try help, ls, open followed by a project name, why followed by a project name, inspect, trail, cat about, notes, contact, resume, coffee, whoami, or clear. Tab completes; the up and down arrows recall earlier commands. Escape closes the terminal.