Press play and I'll build a working chat app with you, right on this page, chapter by chapter — the messages array, the system prompt, the request, streaming, what it costs, and how to ship it. By the end, the app is yours: one HTML file you can send to anyone.
Ch. 1 / The anatomy ▶ narrated
Strip away the hype and every chat app — including the billion-dollar ones — is an interface, a memory, and a rented brain. The first two are ordinary web-page material. The third arrives over the network.
A text box, a send button, and a list of bubbles. Plain HTML — the demo above is exactly this, and you can read its source.
// you build thisOne JavaScript array called messages. Every word said, by you or the AI, gets appended to it. That array IS the conversation.
// you own thisThe model. You never install it — you send your messages array over the network and rent a few seconds of its attention per request.
// you rent thisCh. 2 / The goldfish principle ▶ narrated
Every request starts from a blank slate. The "conversation" is an illusion your app creates by re-sending the entire history with every single turn.
keeps the messages array
sends the WHOLE array, from message one
reads it fresh, replies once, forgets everything
appends the reply and waits for the next turn
Ch. 3 / First skill: the messages array ▶ narrated
Chat on the left. On the right, the actual JavaScript array your words become — updated live after every turn. This is the exact data structure a real request carries.
The chat simulated
const messages = … (live)
Ch. 4–12 / Locked
You've heard the setup. The remaining 9 chapters are where Your First AI App actually gets built — the guardrails, the hands-on builds, the full narrated walkthrough and the end-of-workshop check.
One file. Yours forever. Works offline, in any browser, on any device.