# Week 1: Introduction > Welcome to the Agentic Coding Studio # Welcome --- # 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 --- ## 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**](https://comp.anu.edu.au/courses/comp4020-agentic-coding-studio/topics/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: ```sh mise use -g node@24 pnpm gh jq gh auth login claude --print "say hi" ``` --- ## 2. install the course plugin ```sh 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](https://code.claude.com/docs/en/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 --- ## a tool call and its result ```json { "type": "tool_use", "id": "toolu_01…", "name": "Bash", "input": { "command": "pnpm check" } } ``` ```json { "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](https://platform.claude.com/docs/en/agents-and-tools/tool-use/overview)) --- **"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](https://github.com/comp4020-agentic-coding-studio/lecture-demos) — clone it once, keep it all semester ```sh 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 (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 ```sh gh run list --limit 3 gh run view --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](https://github.com/comp4020-agentic-coding-studio/lecture-demos/actions) > 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 --- (qr: ) --- ## 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 Source: \ Licence: [CC-BY-NC-SA-4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)\ Cite as: Swift, B. (2026). _COMP4020/COMP8020 Agentic Coding Studio_ [Course materials]. ANU School of Computing. https://doi.org/10.5281/zenodo.21395760