In this lesson you build one small app the way a developer would:

So far the idea is a single line. If you say “build it” now, the agent will fill every gap with a guess. Talk it through first, and write down what you agree on.

Plan mode (shift+tab) is one way to do that, since the agent can’t change files there. In this lab, asking the agent to question you works just as well.

Try it

1. Press Type it, then Enter. The agent should ask you three questions in the terminal. If it doesn’t, ask again: Ask me 3 short questions.

2. Answer them, then ask for requirements.md. Say what’s in and what’s out, for example:

   Add a todo, tick it off, delete it, and keep the list in the browser’s localStorage. No login and no sync for now. Write requirements.md with two sections: Must have and Not now.

3. Read the diff. Is login under Not now? If it isn’t what you meant, choose No and say it again more plainly.

You’ve agreed on what to build. Before any code gets written, agree on how.

The agent will build from design.md, so a mistake here turns into a mistake in the code.

Try it

1. Press Type it, then Enter. The agent reads requirements.md and writes design.md. Read the diff and choose Yes.

2. Compare it with requirements.md. Is every Must have item there? Does the list get saved in localStorage? Has anything from Not now crept in?

3. Put everything that’s off into one message. A small model often names the script script.js, forgets localStorage or adds a feature nobody asked for:

   In design.md: call the script app.js, say in Data that the list is saved in localStorage, and drop Clear All, it is not in requirements.md.

4. Read the new diff. If the agent skipped part of your message, ask again for just that part.

Now for the code. The agent writes it from design.md instead of guessing, and then you run it, as any developer would with new code.

Try it

1. Press Type it, then Enter.
2. Read the first diff, index.html. If it matches the design, choose Yes, allow all edits. If the agent stops after one file, ask for the rest: Now write style.css and app.js from design.md.
3. Press Run. Add two todos, tick one off and delete one. Press Run again, and the list should still be there.
4. If something doesn’t work, tell the agent what you saw rather than what to change: After Run, my todos are gone.

Every file the agent reads and every reply it gives stays in its context. The context is small, and a few turns can fill it. Once it’s full, the replies get worse.

Two commands make room, and neither one changes your files:

Command	Keeps	Use it when
/compact keep …	a short summary that includes what you name	you’re still on the same task
/clear	nothing	you’re starting a new task

You’re still on the same task here, so compact.

Try it

1. Press Type it, then Enter. The agent reads app.js and index.html, then edits them. Read each diff.
2. Press Run. Add two todos and tick one off. Does the page say 1 left?
3. Type /context. The conversation now takes up most of the space.
4. Type /compact keep the design decisions, then /context again. It’s much smaller now.
5. Ask Where is the list saved? The agent should still know that it’s in localStorage, from app.js. If it doesn’t, the summary dropped that detail, so name it in the focus next time.

If Conversation compacted shows up without you asking, the agent made room on its own. That counts too.

app.js is missing one character, so the browser can’t even read the script. It fails to compile, and none of it runs.

The error tells you where to look, so don’t guess at the fix. Give the agent the error.

Try it

1. Press Run. The page shows up, but Add does nothing. The terminal shows the error in red, with the file, the line and what the browser expected.
2. Press Type it, then Enter. This sends the error word for word, along with the file.
3. Read the diff. It should change one line. If it rewrites more than that, choose No and ask for just that line.
4. Press Run again and add a todo.

This time there’s no error. The page runs, but one thing doesn’t work the way it should. That’s a bug, and there’s no line number to paste.

Find it yourself first by using the app. Then give the agent a clear report:

Part	Example
Did	added three todos, clicked …
Expected	…
Happened	…

Try it

1. Press Run and add three todos. Tick one off, delete one, then press Run again. Which step goes wrong?
2. Press Type it and fill in the three blanks: what you did, what happened and what you expected.
3. If the agent reads one file after another and then stops, narrow the search by naming the function the bug is in. That’s half of troubleshooting.
4. Read the diff. A good fix is small. Press Run and repeat the same steps.