Welcome

--:-- recording — let's go

Week 1

Introduction

agentic coding studio

agentic coding studio

agentic coding studio

humans making things for humans

a course about humans making things for other humans — using AI and other tools

deciding what’s worth building is the tricky part, and requires judgement — hence the studio

a note about 4020/8020

welcome to COMP4020

a studio course: build web-app prototypes with LLM coding agents, every week, in public

one rhythm all semester: Thursday lecture, your 90-minute studio crit, and the build in between

two threads: mostly agentic coding at the centre; just enough web to build something real

(the field’s two poles are vibe coding and agentic engineering — we’re the second one)

today’s beats

  • what the course is, and how it runs: outcomes, the semester, working in public
  • your week-1 mission — your crit 1 (C1) prototype live at a URL before your first crit next week
  • how a coding agent actually works
  • demo: build a small site and put it on the internet

what changed this week?

(every lecture opens here)

the tools will change under us mid-semester — that’s a design feature of the course, not a failure of planning

Kimi K3, Opus 5

hating AI properly

this course bans nothing, which is exactly why the critiques matter here

why an AI-everything course needs its critics

learning outcomes

By the end of the course you will be able to:

  1. design, build and test full-stack web applications using a rapid-prototyping process
  2. explain how LLM-based coding agents work, including model capabilities, tool use and context management
  3. design and evaluate different LLM agent workflows for software development
  4. apply principles from the scholarly literature to work-in-progress and finalised software prototypes

the shape of the semester

  1. Census date
  2. Last day to drop without failure
  1. Assignment 1
  2. Assignment 2
  3. Final Project
  1. C1: Forgotten web (week 2)
  2. C2: Unsolicited redesign (week 3)
  3. C3: Assignment 1 retro (week 4)
  4. C4: An instrument (week 5)
  5. C5: A game (week 6)
  6. C6: Assignment 2 retro (week 7)
  7. C7: Build the ANU system you wish existed (week 8)
  8. C8: It's alive! (week 9)
  9. C9: All at once (week 10)
  10. C10: Fly by instruments (week 11)
  1. Setup drop-in
  2. Redeemable crit
  1. Week 1: Introduction
  2. Week 2: Specs and self-portrait
  3. Week 3: Backpressure
  4. Week 4: Context engineering
  5. Week 5: Verification
  6. Week 6: Evidence of practice
  7. Week 7: Full stack
  8. Week 8: Decision records and persistence
  9. Week 9: Subagents and real-time
  10. Week 10: Logs, harnesses and multi-user apps
  11. Week 12: Ask me anything

assignments weekly crits one-off sessions lectures enrolment dates today

assumed knowledge

git and the command line — you’ve cloned, committed, pushed before

design, iteration, feedback, reflection (COMP3900/6930)

web development is not assumed — the supporting web thread starts next week

course commitments

3.5 hours of contact a week: this 2h lecture plus your 90-minute studio crit

the Your participation page lists all of it — setup, weekly rhythm, deadlines

this week: two clicks in Canvas Start here: a survey and the access quiz — no marks in either, but the quiz unlocks your key

in public, on purpose

every prototype ships to a public URL, and the repo becomes public at submission: source, history, CI logs, agent files

by November it’s your portfolio — evidence of how you work, not just what you made

no secrets, nothing private (inc. claude logs), and a fresh GitHub account for the course is fine

your week 1 mission

today: get a working agent and meet the workflow

this week: build and ship C1, your first small website

before your week-2 crit: C1 is public and live; your reflection is in the repo

at the crit: demo it, discuss it, and build with your pod — your group’s time and room are on the crits page

C1: forgotten web

create a simple site, and give it a look the modern web has forgotten

GeoCities, brutalism, teletext: the look is the brief; the content is yours

keep it small: a handful of readable pages, reachable from the home page

build it with plain HTML and CSS; no JavaScript this week

deliverables

  • the prototype: live at its Pages URL by your cutoff
  • the checks: (spec/) the starter’s invariants plus this week’s spec
  • PROCESS.md: a map of how the work came together, citing commits
  • reflections/crit-1.md: the two standing questions, one short entry
  • CLAUDE.md and your commit history

1. get the essentials working

by hand: GitHub, a terminal, Git, mise, Claude Code, Chrome, the ANU VPN

then set up the tools, log in to GitHub, and test:

mise use -g node@24 pnpm gh jq
gh auth login
claude --print "say hi"

2. install the course plugin

claude plugin marketplace add comp4020-agentic-coding-studio/core
claude plugin install comp4020@comp4020

/comp4020:doctor checks what is missing; /comp4020:onboard helps fix your key, invitation and crit group

/comp4020:start gets you into C1; /comp4020:preflight and /comp4020:ship gets it over the line

3. tell us who you are on GitHub

the course generates your repos, but you need to tell us which GitHub account is yours

in Canvas Start here, on the Your Claude Code API key assignment, submit your username as the text entry: octocat, on its own — not a sentence, not a URL

handle in → organisation invitation out → you accept → your C1 repo is generated

(compulsory)

4. meet your C1 repo

accept the course GitHub-organisation invitation promptly

you don’t create the repo: the course generates it once you’ve submitted your handle

run /comp4020:start for C1: it clones the repo and pulls the brief in (keep every course repo in one folder: a dozen by November)

build privately; before the cutoff, make the repo public to turn on GH Pages

going off piste

the documented path — mise, Claude Code, the starter templates — is the supported one, not the mandatory one

another agent, another model, another runtime manager: nothing is forbidden and nothing about the marking changes — but you own the debugging

all the way to the conscientious objector: you can do this course without AI — same specs, same deadlines, same rubric

stuck on setup?

every step we’ve just covered is on the Onboarding page on the course site

if you’re stuck, post on Ed (tech support) or come to the drop-in: this Friday, 3–4pm, Seminar Room 3.03, Level 3, Birch Building — bring your laptop, we’ll help you get sorted before crit 1

communication channels

this website: how the course runs, and the source of truth — if another source says otherwise, go with the website

Ed for everything else: public threads answered within one working day, private threads within two

Canvas for marks, recordings, your api key, and the door into Ed

no email, no Teams, no Discord (you’ll get a polite redirect)

Claude Code cheatsheet

cd into the repo first, then claude — it works in the directory you launch it from

Esc interrupts a response; /clear starts the conversation fresh

/help lists the built-ins; /comp4020:help lists the course skills

plain English beats memorised commands, e.g. “how much budget do I have left?”

ask the course

point your agent at the course site: handbook is the first course skill we use live; it retrieves the course’s published facts rather than trusting the model to guess them

  • “What exactly must C1 contain?” — brief and definition of done
  • “When is my C1 cutoff?” — the group-specific answer

demo: from brief to live site

Use the handbook skill to find out exactly what C1 asks for, then build me a small site that answers it — and give me a page that shows at a glance what I need to do before my first crit next week.

one prompt, then we walk away from it — the agent builds while we talk about how it works

The agent loop

a small machine

every coding agent is a language model, a set of tools, and a loop (how Claude Code works)

the model only reads and writes text; some of that text is a tool call, which the harness runs for it

read (search, open files), edit (apply a change, after your permission rules), run (dev server, build, tests)

it loops until a reply contains no tool call

one pass of the agent loop

One pass of the agent loop The context window holds the system prompt and tool definitions, then your prompt. The model replies with a tool_use block asking to Read index.html. The harness on your laptop checks your permission rules and reads the file; the tool_result with the file's contents is appended to the context window. The model then asks to run pnpm check with the Bash tool, and that result is appended too. The loop ends when the model replies with text and no tool call. the context window system prompt + tool definitions you: "build me a site for C1" the harness Claude Code, on your laptop tool_use Read {file_path: "index.html"} permission rules? read the file tool_result "<!doctype html>…" tool_use Bash {command: "pnpm check"} tool_result "✗ 1 test failed …" run the command text only: "Done!" (loop ends) every turn re-sends the whole window

a tool call and its result

{
  "type": "tool_use",
  "id": "toolu_01…",
  "name": "Bash",
  "input": { "command": "pnpm check" }
}
{
  "type": "tool_result",
  "tool_use_id": "toolu_01…",
  "content": "✗ spec/invariants.test.ts > every page links home …"
}

the model’s reply names a tool and its input; the harness runs it and sends the output back, matched by id (Claude tool use)

“done!” is a claim, not a fact

model vs harness

the model (e.g. Claude Sonnet): weights on someone else’s GPU; text in, text out, no memory between calls

the harness: the program on your laptop that builds each request (system prompt, tool definitions, CLAUDE.md, the conversation), runs the tool calls, and enforces your permission rules

Claude Code and pi are two harnesses: same kind of model, different tools and system prompts (pi’s is small enough to read in one sitting)

feedback sources

run returns evidence about the change: an exit code, a test failure, a stack trace

“make pnpm test pass” gives every turn a pass or fail; “improve the code” gives it nothing to check against

watch for it: which turns were checked against real output?

the lecture-demos repo

every lecture runs in lecture-demos — clone it once, keep it all semester

gh repo clone comp4020-agentic-coding-studio/lecture-demos
cd lecture-demos && pnpm install && pnpm dev

now you try

Restyle the home page to look like ______ (a 90s fan page, a terminal, a newspaper — your call). Keep pnpm check green.

this week only: nothing is set up yet, so watching along counts — from week 2 the pauses assume a working laptop

demo: ship it

Ship it: get the checks green, then push and turn on GitHub Pages.

turn what it built into something on the internet: the C1 path in miniature

the agent runs the checks instead of merely claiming it’s done — and whether they pass is not up to either of us

commit, push, live

From git push to a live Pages site On your laptop, git push sends your commits to GitHub. GitHub starts a fresh Actions runner that checks out the repo and runs the check job: pnpm check, pnpm check:evidence, linkinator over dist, and trufflehog. Only if every step passes does the deploy job run: pnpm build, upload the dist folder, and deploy-pages. GitHub's webservers then serve those static files at org.github.io/repo. your laptop git commit git push nothing is live yet an Actions runner fresh VM, checks out your repo job: check pnpm check pnpm check:evidence linkinator ./dist trufflehog job: deploy (needs: check) pnpm build upload ./dist deploy-pages live <org>.github.io/ <repo>/ static files only: no server code runs

(it’s all in .github/workflows/checks.yml)

which box does what?

green checks and red

green: the machinery ran and every check passed — not that the site is good

red: read the failing step’s log, or have the agent read it

gh run list --limit 3
gh run view <run-id> --log-failed

the course skills don’t replace this loop; they make good feedback cheap to ask for

Ben uses… the GitHub CLI

(another standing segment: one piece of my own harness)

gh — GitHub in the terminal: runs, logs, PRs, flipping repos public

in the demo just now, the agent polled the deploy with gh instead of me pasting logs in

now you try

browser only, nothing to set up — the demo’s push is in CI right now

Open the Actions tab and watch it live. Green or red? Commit to one, out loud, with your neighbour.

key already wired up? ask handbook a question you actually care about

Predict, then watch

your prediction

push is done, CI is running; before it comes back: green or red?

green → the live URL, opened in the room

red → read the failing check back to the agent, fix, push again

would you ship this? thirty seconds of verdict — informal, for now

demo: read the failure

The CI run failed. Read the log and fix it.

we never ran that check locally — CI ran it, and it failed on something we’d missed

watch what it does with a dead link: create the missing page, or delete the link? one of those is a fix

comp4020-agentic-coding-studio.github.io/lecture-demos/

bring C1 to your crit

C1 freezes at your cutoff, two hours before your week-2 session

the session opens on your crit agent’s prototype — fifteen minutes, whole group, your tutor driving

then, in a pod of four: show your live site, open with your breakthrough, give and take critique, and riff on the agent’s prototype

come able to account for how you directed and corrected the agent

your group has an agent

six crit groups, six named agents — Shítāo, Bādà, Báishí, Dàchī, Yúnlín, Liùrú — and your group goes by its agent’s name

we run it through the course beside you: same provocation, same cutoff, shipped publicly, same two reflection questions

the session opens by critiquing it as a whole group, and every pod forks it for the riff — never reset, never marked

two questions, every week

  • what was the breakthrough that moved the work forward?
  • what did this work change about who I want to be as a software developer?

in your repo’s reflections/ — your breakthrough opens your pod crit

PROCESS.md sits beside it and describes (with commit citations) the key moments

studio mindset

agents make the easy-to-test stuff easy — what remains is hard, and subjective, and human

come with something to show — a broken prototype beats no prototype

critique the artefact, not the author; take it the same way

this course is an experiment

research participation is voluntary

the study uses data you already generate — commits, telemetry, work, marks

Lorenn Ruster holds the responses; I can’t see yours until after final grades

yes, no, or ignoring it changes nothing about your marks or your standing

you can change your mind later; the sheet and the form are in Canvas

new: the week 12 redeemable crit

an extra crit in week 12 that buys back a lost week — open to everyone, no form and no reason to give; answer any week’s provocation, fresh work is fine

marked like any other crit: shipped at the cutoff (1, 0.5 or 0), plus your contribution (1, 0.5 or 0)

it replaces your lowest crit mark if that mark was 1 or below, one crit only — however many weeks you lost, it covers one

on the assessment page now — put to the room in week 1 and agreed as it stands

assignment 1 is open

build an interactive explainer of something you think more people should know or understand — one strong idea, one dataset or mechanic, and nothing else

interactive: the explanation is something a visitor does, not just reads

static and client-side, on the same canvas as C1 and C2 — due noon, Monday 17 August

class reps wanted

every course gets a couple of class representatives — the cohort’s voice back to the teaching team; you’d gather feedback from the class and raise it with us and with ANUSA, a small time commitment, with training and support provided

interested? we’ll take nominations and vote in the room, during the lecture

deadline radar

open now: Canvas Start here — survey, quiz, key and GitHub handle, onboarding, then doctor

Friday 3–4pm: setup drop-in (Birch 3.03)

before you build C1: crit group registered, org invitation accepted, repo cloned

your week-2 cutoff: C1 live at its URL via ship; reflection submitted

noon, Monday 17 August: assignment 1 — brief up now, repo lands next week

tl;dr

every coding agent is the same small machine: a model, some tools, and a loop — and “done!” is a claim, not a fact

the model is fixed this afternoon; the harness is yours, and that’s what this course is about

shipping is cheap and starts today — push, read the checks, open the live URL

this week: get set up, then get C1 live before your first crit

ask your agent

recast the week’s topics as prompts — ask until you can explain the answer back:

  • static sites: what “static” means, and what it can still do
  • HTML & CSS fundamentals: structure and layout from the ground up

the web thread proper starts next week — until then, your agent is the web tutor

See you in the studio