Skip to content
bits
Sign inStart free

Build the front end with agents

Klippy works from your terminal. This course gives it a web app, and you don't type most of it: you direct Claude Code. Each lesson is a prompt you can copy, what to expect back, a checklist for reading the diff, and the steer prompts for the usual misses. By the end, Klippy has GitHub sign-in, a notes page and a live chat with Approve and Deny, on the web, checked by bits. How this course was made, honestly: the code at each tag was written by an agent working from the lesson's prompt, not recorded from a fresh run of it. The checks and our review run are real, and dated. Your agent's output will differ; the lessons teach you to judge it.

  • Intermediate
  • 11 lessons
  • 4 h 15 min
  • text + code
Start the course →

Lesson 1 · Your coding agent · 15 min

Syllabus

M1: Set up the agent

  1. 1. Your coding agent — not startedCode exerciseDesk: best at a computer, with a terminal15 min · +50 neurons
  2. 2. Skills: teach it your stack — not startedCode exerciseDesk: best at a computer, with a terminal15 min · +50 neurons
  3. 3. Tools for your agent: MCP — not startedCode exerciseDesk: best at a computer, with a terminal15 min · +50 neurons

M2: Plan before code

  1. 4. Write the brief — not startedPrompt exerciseCode exerciseDesk: best at a computer, with a terminal25 min · +90 neurons

M3: Build the app

  1. 5. The Remix shell on Workers — not startedCode exerciseDesk: best at a computer, with a terminal30 min · +90 neurons
  2. 6. Sign in with GitHub — not startedCode exerciseDesk: best at a computer, with a terminal30 min · +90 neurons
  3. 7. Your notes, as pages — not startedCode exerciseDesk: best at a computer, with a terminal20 min · +70 neurons

M4: Build the chat

  1. 8. Borrow from AI Elements — not startedCode exerciseDesk: best at a computer, with a terminal25 min · +80 neurons
  2. 9. The chat island — not startedCode exerciseDesk: best at a computer, with a terminal30 min · +90 neurons

M5: Review and ship

  1. 10. Review and steer — not startedCode exerciseDesk: best at a computer, with a terminal25 min · +90 neurons
  2. 11. Checkpoint: Klippy on the web — not startedCode exerciseDesk: best at a computer, with a terminal25 min · +120 neurons

On finishing

Front End Director badgePlus 870 neurons and a certificate

Neurons are the points you earn for each lesson you finish.

Your progress stays in this browser. Sign in to keep it on every device.

What you'll learn

  1. Give a coding agent what it reads first, the skills for your stack and the docs it needs.
  2. Write a brief, then prompts with a goal, where to look, constraints, a done-when and a report.
  3. Review an agent's diff with a checklist, and steer it with prompts that quote the miss.
  4. Ship a Remix 3 app on Workers that signs you in with GitHub and streams Klippy's replies.

How you'll learn

11
lessons, every one a chat with Claude
1
prompt exercise
11
code exercises

Source

This course is 12 markdown files on GitHub. Spot a typo? Fix it in one pull request.

content/courses/build-the-front-end-with-agents/ ↗

Written by The bits team · updated

Code verified