Introduction

This course starts from a simple premise: an LLM response isn't a request and a response; it's a turn, something that streams, can fail in new ways, and needs UI built for both. Every chapter builds on the same reducer and the same turnId, so what you learn early keeps paying off later.

What you’ll build

You'll start with the mental model: the seven states a single turn moves through, failure modes as first-class UI states, why untrusted model text needs safe rendering, and how to bring an AI coding assistant into your workflow with verification guardrails. From there, you’ll wire up the actual browser-to-server boundary, stream real OpenAI events into a reducer, accumulate deltas without jank, wire up cancellation and stale-stream protection, and see how Anthropic's event shape changes the same parser.

You'll turn that mechanism into product behavior: a state machine mapped to visible controls, Stop and Regenerate rules, a suggestion composer that never overwrites what someone's typing, retry and error-recovery UX, and accessibility handling for a screen that's constantly changing. From there, you'll constrain output to a JSON schema, validate and safely render it, and design fallbacks for when it fails. The last stretch extends the same turn model to tool calls, multi-turn persistence, and resumable state, then closes with the instrumentation, evaluation, and cost habits that make a feature shippable.

Who is this for?

You should be comfortable with modern JavaScript, a component framework like React, CSS, and calling HTTP APIs. No ML theory, no math, and no prior experience with LLM APIs are assumed.

What this course doesn't cover

To stay focused, a few adjacent topics are deliberately out of scope: model training and fine-tuning, retrieval and vector databases, and multi-step agent frameworks. Where relevant, later lessons will point to these as a next step, not teach them here.

A final word

By the end, you won't just know how to call a model; you'll know where every piece of that call needs a guard, and why. Let's start with the one distinction that everything else in this course builds on: the difference between an API that returns data and a model that generates it.