Build with LLMs

Seven hands-on modules. You don't just read about LLM apps — you build four small ones, one idea at a time, then assemble your own.

Built alongside Building with LLMs (the KSEPT summer program) — a CS course taught by Larry Arnstein (CTO @ Clause; ex-Apple; former UW faculty). I took it live and rebuilt the lecture material into this site as the lectures happened: learning the subject and authoring the textbook at the same time, the kind of thing the AI era makes possible for one person. Each module pairs a short concept note with a starter you run yourself. By the end you can take an LLM from "a chat box" to "an app that searches your documents and acts on a database."

🌏 Note on language: the concept notes are written in Korean so the ideas land clearly, but every diagram, code sample, and project is in English. New to LLMs? Start at Module 1 and go in order — each page builds on the one before.
🛠️ Already built a web app with a frontend, a backend, and a login screen? Then you've done the hard parts. This is the LLM version of what you already know — same two-server shape, plus one new skill per module.

▶ Run it live — apps that boot from inside this page

Every project page has a Run it live button. A static page can't start a server — so it asks a small launcher to wake a Kubernetes pod on demand, then embeds the running app right here in the page. Idle apps shut back down automatically.

Run it live — press one button, a launcher scales a Kubernetes pod 0 to 1, and the real data-analyst agent answers a query in a terminal embedded in the page

Above: the data-analyst agent booting on demand and answering a real query — no install. How it works →

Built while learning it — the parts I sweated over

I turned my own coursework into a product — learning the subject and authoring the textbook at the same time: a teaching site I'd actually want to learn from, plus the infrastructure to let anyone run the examples. These are the decisions I thought hardest about.

🎓 Teaching as a craft

Korean, analogy-first prose for intuition; English diagrams for precision; an instantly-graded quiz at the end of every section. 96 diagrams across the site, each built to make one idea click — and colored by shape, not by hand, so the whole thing stays visually consistent.

📏 Measure, don't vibe

The RAG contest entry was tuned by a 45-config overnight grid search against a blind holdout — coverage, MRR, and token cost per config — then the champion picked by a rule: within noise, take the cheaper one. It was graded 9/10, top of the class. The walkthrough →

✨ Animations that encode meaning

Motion carries information, never decoration: a green ball tours a flow's common path and turns yellow on a special-case branch; a frozen node sits still while a trained one breathes. Nothing auto-plays a walkthrough — you set the pace.

⚙️ Run real apps on demand

A ~120-line launcher scales a Kubernetes deployment 0→1 when you click, embeds the app in the page, and scales it back to zero when idle — ephemeral and self-hosted, like a throwaway preview deploy. The write-up →

🧪 Learn by breaking

Every starter ships with intentional bugs. I reproduce the failure, explain the mechanism, fix it, and read the diff before accepting — one commit per fix, so the change log is a walkable learning journal.

The seven modules — learn & build

Add one skill per module; each ships a small app that proves you got it. Go in order — every page builds on the one before, and each project adds one capability on top of the last.

flowchart LR A["💬 chat-app
Module 2
talk"] --> B["🧩 extractor
Module 3
structure"] B --> C["📚 RAG app
Module 4
knowledge"] C --> D["🤖 data agent
Module 5
action"] D --> E["🚀 your own app
Module 6–7
ship it"]

Each section is tagged with its original slide number (a chip like Slide 17) so you can match a note to the lecture deck, and most pages end with a quick quiz.

Module 1 · Setup

Get your toolchain ready

Learn: VSCode · Git · Node.js · Python 3.11 · Claude Code CLI · an API key.

Build: a working dev environment with one shared .env every example reuses.

Module 2 · Foundations

How an LLM app is actually wired

Learn: two servers + a proxy, JSX, mount, and why the API is stateless.

Build: in two parts —

Module 3 · Tools & Structure

Make the model's output machine-usable

Learn: 4 levels — parseable text → JSON schema → tool use → MCP.

Build: a job-post extractor that returns validated, structured fields.

Module 4 · Context / RAG

Give the model knowledge it wasn't trained on

Learn: embeddings, chunking, vector search (ANN/HNSW), citations, memory.

Build: a RAG app over ~1,297 pages of US aviation law (14 CFR) with §-cited answers — the course's contest entry, graded 9/10, top of the class.

Module 5 · Agents

The engine behind every agent

Learn: the ~20-line agent loop, subagents, memory scopes, computer use, safety.

Build: a data-analyst agent over a read-only SQL database.

Module 6 · Production

Make it trustworthy and operable

Learn: the eval ladder, prompt-injection defense, observability & latency.

Build: guardrails, evals, and telemetry around the app you already made.

Module 7 · Workshop

Build your own — the build day

Learn: nothing new — it's all assembly now.

Build: extend one of your projects, or start something fresh. Small but shippable.