Your First AI App: The Lab Comes Alive · Lesson 6 ⏱ ~45 min

The infinite lab: a door that never runs out.

One door appears in the lab wall. Walk through it and there's a room on the other side that did not exist two seconds ago — designed by a model, saved to disk by your server, drawn by the same code you wrote a course ago. Then: money, keys, and graduation.

The trick you already know

Start with the reveal, because you've been carrying the last puzzle piece since Course 02. Your game has drawn its world from a data file all along — and the drawing code has never once cared where the data came from. In lesson 3 of the last course, your hand wrote it. In lesson 4, Claude Code scanned your folders and wrote it. The renderer couldn't tell the difference, because data is data.

So: what if the data came from a live model?

That's the whole finale. This is why "data vs code" was billed as the most transferable idea in these courses — the moment your content is data, anything that can write data can build your world. Including a mind.

A real engineering decision: which model?

Your first genuine model-selection moment. The NPC chats on claude-haiku-4-5 — instant and nearly free, exactly right for banter. But inventing a whole room is creative work where you'd trade a little speed for a lot of imagination. Anthropic makes a bigger model for that:

claude-haiku-4-5 — instant · ~a fifth of a cent per message · perfect for dialogue
claude-sonnet-5 — a few seconds · ~a penny or two per call · noticeably more inventive

The rule of thumb, worth stealing for life: cheap-and-fast for high-frequency small things, big-and-thoughtful for rare big things. Chat is constant, so it rides the small model; a new room is an event, so it gets the big one. Real engineering teams have this exact meeting, with worse snacks.

The door and the dreamer

The prompt — the finale

The finale. Add a door to the right wall of my lab. Walking into it triggers a new server endpoint: POST /generate-room. That endpoint asks Claude to invent a new room — using the model claude-sonnet-5 for this endpoint only; keep the NPC's chat on claude-haiku-4-5.

The generated room must be JSON with the same shape as my lab-data entries, so my existing drawing code can render it: a roomName, and 3 to 5 entries each with a name, a one-line summary, and a screenColor. The theme: rooms of an endless research facility, each one different — strange little labs, archives, greenhouses, server crypts — inventive but cozy, same pixel style. Tell the model the exact JSON shape and that it must reply with pure JSON; extract the text of its reply (not any other part of the response), and if it doesn't parse, retry once — if that fails too, send back a friendly error the game can show as "the door seems stuck."

Two more things. The server must SAVE every generated room as a file in a rooms/ folder, so my discovered worlds survive restarts — when the game loads, rooms I've already found are still there behind their doors. And every new room gets its own door onward, so the lab never ends.

Then take the walk. Through the door — a beat while the big model thinks (a "thinking" beat is honest UI here; you know exactly what's happening on the other end of that wire) — and then a room nobody designed. Read its screens: three to five little inventions, decorating your facility. Find the next door. Keep going. It keeps being new.

Now the quieter beat, the one that matters more. Go to the terminal, stop the server, restart it, walk back. The rooms are still there. Your discoveries persisted, because your server wrote each one to disk as a file — look in the rooms/ folder and you can read your worlds in a text editor.

Checkpoint — worlds on disk
> ls rooms/

  room-001.json    "The Tide Archive"
  room-002.json    "Greenhouse 7 (Overgrown)"
  room-003.json    "The Server Crypt"

Door "stuck" every time? → Ask Claude Code to log the model's raw reply on the server and look at it together. Nine times out of ten the JSON arrived wearing a chatty wrapper, and tightening the "pure JSON only" line in the prompt fixes it. That's prompt engineering — you're doing it.

Trace the full loop once, because it deserves tracing: your action → your frontend → your server → a model → your disk → your renderer. User, app, backend, AI, storage, screen. Data flowing around that loop is — with no exaggeration — the architecture of nearly every product on the internet. Yours just happens to have a plant in it.

Money, keys, and the shipping question

Three honest conversations before the diploma.

The bill, for real. Predict yours first: whole course, every chat, every room. Now go look — console.anthropic.com, the usage page. Typical damage: thirty to sixty cents. The fear was worse than the meter — it usually is, and now you'll never have to wonder, because you know where the usage page lives.

🔑Key hygiene, one last time: your key lives in .env; git can't see it (you verified); the revoke button exists if it ever leaks. And now that you own a server, the grown-up rule in full: the key lives on the server side. Always. Everywhere. Forever. Any tutorial, product, or "quick hack" that wants an API key in frontend code is asking you to publish your credit card. You now know better than the bad tutorials, which is a genuine milestone.

Why you can't just ship this one to Vercel like the others. Courses 01 and 02 ended with free static hosting — a folder of files, served as-is. This project has a running program in it now, and static hosting can't run programs; shipping the key inside the game files would… you know exactly what that would do, see the box above. The real answer is backend hosting — the same architecture you built deploys fine to services made for it (this site's own AI-powered audit tool runs the identical pattern in a hosted worker). It's a wonderful next skill, and it's beyond today's finish line. So, three legitimate endings: keep it local — an AI companion for an audience of one is a luxury good, enjoy it; ship the game with the NPC asleep — a copy without the key, visitors see the lab and the assistant naps, honestly charming; or when you're ready, ask Claude Code "how would I deploy this server cheaply?" — and know that you'll understand every word of its answer.

What you actually learned (the trilogy, complete)

Course 01: the loop — describe, build, look, fix, ship. Course 02: structure — state, data vs code, automation, memory. Course 03: systems — frontend ↔ backend ↔ model, secrets, context, structured output, cost. Loop, structure, systems. That's not a beginner's toolkit — that's the actual stack of the job. The rest is reps and taste.

And if you're a business owner who took this road to understand what you're buying: you now know what a system prompt is, why the key never ships, and what "we'll train the AI on your data" mostly means. That's exactly the literacy the free audit puts to work.

Where to take it (steal any of these)

  • A voice. Browsers can speak — ask Claude Code about the speech synthesis API and have the NPC actually talk.
  • Streaming replies. The word-by-word typing effect from chat apps — that thread we left in lesson 3. Ask about streaming; the server changes more than the game does.
  • The NPC as narrator. Wire it to /refresh-lab from Course 02 — a new desk appears, and the resident comments on your new project.
  • A second resident. Same server, two personas — give them opposite tastes and ask them the same question.
  • Point the brain at anything. The brain-in-a-box pattern isn't a game part: the same server can summarize your notes, draft replies, quiz you from your own files. You own the socket now.
💾Last save point of the trilogy: "Commit — the infinite lab." Then one more move, and notice it's a Course-02 skill paying off exactly where it was always going to matter: update your CLAUDE.md — "Update CLAUDE.md: this project now has a Node backend in server.js on port 3000, the API key lives in .env and must never be committed, the NPC's persona and lab-data knowledge live server-side, and generated rooms are saved in rooms/." Future-you's sessions start smart.

You can now…

  • Have an AI generate content in a schema your app already renders
  • Choose a model per task, on cost and quality — like the meetings do
  • Persist AI output to disk through your own backend
  • Read your own API usage and predict costs before spending them
  • Make a grown-up call about deploying an app that holds secrets

Three courses. Zero dollars of tuition, about fifty cents of tokens. Go build something that thinks.

Running a business and would rather all this get built for you? That's literally my job — start with the free audit.