Skip to main content

AI Systems · Education · 2026

Primer

Five concepts. Real understanding. A hands-on path through tokens, context windows, temperature, hallucination, and RAG.

Design + build · Live · Next.js · React · TypeScript · Tailwind CSS · Vercel

Primer preview

01 / Overview

Project notes

Problem

Most AI explainers either stay at metaphor level or jump straight to math. Non-technical readers never see what a model actually does with their text.

Build

Primer is a five-lesson path built around one case: a support bot that told a customer refunds take 90 days when the policy says 30. Each lesson asks the reader to predict first, explains the concept, opens a live playground, then checks understanding before marking the module complete.

Result

A reader finishes with a working mental model of why prompts cost what they cost, why a bot forgets, why outputs vary, where hallucination comes from, and how retrieval fixes it.

02 / Features

What it includes

  • Live Tokenizer

    Type any sentence and watch it split into word, subword, space, and punctuation chunks with a running count and estimated cost.

  • Context Whiteboard

    Fill a simulated context window for GPT-3.5, GPT-4, Claude 3, or Gemini Pro and watch old messages fall off the board.

  • Predict-First Prompts

    Every lesson opens with a guess before the explanation, so the answer lands against something the reader already committed to.

  • Running Case File

    One refund-policy incident threads through all five lessons, each one ruling out a different suspect.

  • Knowledge Checks and Progress

    Three-question checks gate each module, an optional baseline gives a before score, and a progress bar tracks the path.

03 / Stack

Technologies

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Vercel

Analytics cookies load only if you accept. Privacy policy