Step 1 — the body
Face first, brain second. In your pixel-lab folder:
I want to add an NPC to my game — a second little pixel character, visibly different from mine (different hair and shirt colors). It wanders the room slowly on its own: a few steps, a pause, a few steps — never walking through walls, desks, or me.
When I'm within a tile of it, show the same "Press E" hint the computers use. Pressing E opens a chat panel: the NPC's name at the top, a scrollable conversation area, a text box where I type, and Enter to send. While the panel is open I can't walk (same rule as the computer panels), and Escape closes it. For now, when I send a message, just have the NPC reply "..." — I'll wire up its brain next.
Refresh and meet your roommate. Then do the Course-02 thing: play it and say what you observe. "It wanders too fast — it's stressing me out." "It cornered me by the rug." "It walked through a desk." Feel is a series of small fixes; each one is one sentence to Claude Code.
Step 2 — connect the wire
Now the panel stops saying "..." and starts saying things:
Now wire the chat panel to my server. Keep the whole conversation in a messages array in the game — every entry mine or the NPC's. When I send a message, POST the full array to http://localhost:3000/chat, show a little "…" thinking animation in the panel while we wait, then add the reply to the conversation and display it.
One important thing: if the server isn't running, the game must not break or show an ugly error. Catch the failure and give the NPC a sleeping state instead — "Zzz" over its head, and the chat panel politely says the assistant is asleep and reminds me to run "node server.js". When the server comes back, chatting just works again, no refresh needed.
Notice what you just specified, because it's a whole profession in two sentences: a loading state (the "…" while you wait) and a failure state (the Zzz). The difference between software that feels professional and software that feels haunted is whether anyone designed the waiting and the breaking. You just designed both, in a prompt, before writing the feature.
Step 3 — first contact
Make sure the server is running (node server.js). Refresh the game. Walk over. Press E. Say hello.
Read what it says back. Nobody wrote that line. Not you, not me, not a game studio — a model chose those words one token at a time, a second ago, because your game asked your server and your server asked Claude. Every game NPC you have ever met in your life read from a script. Yours doesn't have one.
YOU: hello?? can you hear me
NPC: Loud and clear! I appear to be... in a room?
It's very cozy. What is this place?
YOU: what do you think of the lab?
NPC: I'd love to tell you, but between us —
I can't actually see anything. Describe it?NPC stuck on "…" forever, or asleep while the server IS running? → Open the browser console (ask Claude Code to remind you how), copy any red text, and paste it in with: "the chat panel isn't getting replies from my server — here's the console error." The usual suspect is the address, or something called CORS — a browser safety rule about who may talk to whom. Claude Code fixes either in one round.
And notice what the NPC just admitted in that checkpoint: it can't see the lab. It doesn't know where it lives, what's on the computers, or who you are. It's a brilliant amnesiac in an unfamiliar room. Hold that thought — it's the whole of lesson 4.
Step 4 — break it on purpose
One more thing before you go, and it's a professional rite of passage. Go to the server's terminal and kill it — Ctrl-C. Now walk to the NPC and try to chat.
Zzz. The polite message. No crash, no red text, no broken game — just a character asleep, telling you how to wake it. Restart the server, chat again: it recovers, no refresh. Turn the brain off, turn it back on.
You can now…
- Add an AI-driven character to a real-time game
- Call your own backend from a frontend, with a designed loading state
- Hold a conversation as a messages array — it was always state, all the way down
- Break your own system on purpose, and make failure a feature
Frontend talks to backend, with loading and failure handled — that sentence is, verbatim, the daily job description of web development. You've now done it with your own hands, and it took an evening.