Class 06 · Movement 01
Using Coding
Agents
Session 06 · AI Engineering
Session 06 · The map

One click. ~200 milliseconds. The whole map.

Last class ended on agents having no ceiling. This class hands you the controls — starting with the map every tool you’ll meet today flies over.

yourclient.com
HTMLCSSJS

the only three languages a browser speaks — everything else compiles down to these

Frontend — the dining room
API
the menu
DNS · TLS · HTTP — the waiter walks. First burst on the wire: ~14 KB.
Backend

Anything shipped to a browser is public. The kitchen exists for what must stay private:

secretsshared stateheavy worktrust
Backend — the kitchen
Postgres

SELECT… the rows come back out

Database — the pantry
the waiter returns — JSON → pixels
0 ms~200 msrendered ✓
This is the map. Every class until week 4 relabels a piece of it — and the week-4 exam is written, on paper, tools closed: narrate this story from memory.
Session 06 · The mental model

Fold the map once — every app is three parts.

the dining room · the pixels

Frontend

What the user sees and touches — and where the response finally becomes pixels.

HTML · CSS · JS · React / Next.js
the menu · the waiter

APIs & MCP

How the parts talk — requests out, JSON back. The only bridge between public and private.

HTTP · API keys · MCP servers · Webhooks
the kitchen · the pantry

Backend

Secrets, shared state, heavy work, trust — the engine the browser never sees.

Supabase / Postgres · Auth · Row-Level Security
This map is the whole movement: Class 07 labels the files behind each part · Class 08 — you draw it for your own build.
Session 06 · Where you command agents

Antigravity — the cockpit.

Google Antigravity: the Editor view and the Agent Manager side by side
Google Antigravity — Editor + Agent Manager · launch post, Nov 2025 · product now at 2.0 (I/O, May 2026)
Two faces

Editor — a familiar IDE. Manager — mission control that spawns and oversees several agents in parallel. Agents hand back Artifacts — plans, screenshots, browser recordings — so you verify what they did instead of trusting logs.

What “agent” means

“LLMs using tools in a loop” (Anthropic). The cockpit supplies the tools, permission gates and checkpoints — the model supplies judgment. In the embedded terminal: Claude Code.

The dials

Plan mode & permission prompts — you approve before it acts · /context — see the attention budget · /clear — wipe the working memory. Steering, not typing.

Google Developers Blog, Nov 2025 · TechCrunch — Antigravity 2.0, Google I/O, May 19 2026 · Anthropic, “Building Effective Agents”
Session 06 · The backend in a box

Supabase — where truth lives.

A real Postgres database — tables, SQL, migrations — with no server to manage. The category has a name: BaaS, backend-as-a-service — the kitchen and the pantry, rented.

Auth

The most expensive class of beginner bug. Don’t hand-roll it — logins, passwords and OAuth are a managed service now.

Row-Level Security

Rules deciding who can see which rows. When your team builds for five CTSBDC-referred partner businesses, RLS is why each business sees its data — and nobody else’s.

PostgreSQL
55.6%

of professional developers use Postgres (Stack Overflow survey, 2025)

“Just use Postgres” is the rare default that is both the beginner answer and the expert answer.

$500M raised at a $10.5B valuation — June 2026. Doubled in ~8 months, riding AI-assisted coding. The database the agent economy standardized on.as of Aug 2026
Stack Overflow Developer Survey 2025 · CNBC, Jun 4 2026 · compendium: “Software Architecture Fundamentals”
Session 06 · The true history

Thirty years of hosting — renting the hard parts.

Each rung converts an ops chore into a line item.
Bare metal ’90s
you rack the server
line item: hardware
VPS ’00s
you rent a slice
line item: the machine
IaaS — EC2 2006
capacity by the hour
line item: capacity
PaaS — Heroku 2007
git push deploys
line item: the ops team
Serverless — Lambda 2014
code runs on demand
line item: the server itself
Netlify 2015+
drag a folder — it’s live
line item: all of it
You are here. Week 3: drag out/ onto Netlify — and your site is on a global CDN. This ladder is why.
Ground floor: LAMP, coined Dec 1998 — a complete web business on $0 of software licenses. Every modern stack is LAMP’s grandchild.
Compendium: “Software Architecture Fundamentals” — the hosting ladder · LAMP: Michael Kunze, c’t, Dec 1998
Session 06 · Proof, again

This deck is its own diagram.

connect-ai/
├─ CLAUDE.md            ← the agent reads this first
├─ data/curriculum.js   ← one source of truth
├─ app/ · components/   ← the slides you're watching
└─ npm run build → out/ ← the whole site, as files
            ↓
     Netlify CDN — no server anywhere
the actual repo behind this screen
this week’s deploy vocabulary — build · environment · env var · deploy · rollback — all observable on this site’s Netlify project

A Next.js static export on a CDN — Jamstack, coined ~2015 by Netlify’s founders. On the click map, there is no kitchen here at all: this site is all dining room, cooked in advance. The simplest architecture that meets the need — chosen on purpose. (The three-part map still holds — this site’s kitchen simply ran once, at build time. Your partner-business builds will need a live one.)

Monolith First — Fowler, 2015

“Almost all the successful microservice stories have started with a monolith that got too big.” A Next.js app + Postgres + a few rented services is not a compromise — it’s the correct architecture.

Next class → every file in that tree has one job. Class 07: the files behind the map.
Where today’s tools live on the map:Antigravity + Claude Code — the cockpit you build all three parts fromSupabase — the kitchen & the pantry, rentedNetlify — serves the dining room, pre-cooked
Compendium: “Software Architecture Fundamentals” · “How the Modern JavaScript Stack Came to Be”
Connect.AI logoConnect.AI
Class 06 · Using Coding Agents01 / 07
1 / 7
Checking access…