Agentic Website Studio: Ten AI Agents Building a Site You Can Watch
Case StudyMost "AI builds your website" demos hide the work: you type a prompt, a spinner spins, a page appears. The interesting part — how a decision gets made, what gets rejected, who checks the result — is exactly the part that stays invisible. This studio inverts that: ten specialist agents run a real production pipeline, and the interface is a live view of everything they do. You can pause, answer a question, choose a creative direction, and scrub back through the entire run afterwards.
A real run, recorded: brief in — reviewed website out, with every agent decision visible along the way.
the untouched output of the reference run, hosted as-is
A real run, start to finish
The reference run produced a one-page site for Nordwind, a fictional Ukrainian industrial design studio: dark palette, oversized typography, scroll-led narrative, three case studies, team, contact form. The agents proposed three creative directions with a scorecard — Safe, Distinctive, Experimental — and the operator picked the experimental one: From Field to Factory, a page built as one continuous camera descent from field observation to serial production.
The QA agent failed it
This is the part I am most pleased with. Every automated check passed on desktop, tablet and mobile — no horizontal overflow, all declared sections visible, semantic main, skip link, labelled navigation. A checklist would have shipped it. The QA agent drove a real browser, looked at what it saw, and failed the revision anyway:
- Highthe fixed header clips its own text at several scroll positions
- Highthe scroll HUD and media overlays collide with readable content
- Mediumseveral mobile controls fall under the 44px touch target minimum
- Lowone resource request returns 404
Findings come with evidence — screenshots plus a video recording of the browser session, streamed live and replayable afterwards. The agent’s job is not to confirm the build works. It is to disagree with it.
Continuity: making generated video hold together
Generated clips normally cut badly — each one is its own world. Here the five clips are bound by a keyframe contract: three "dive" clips at the stations, plus two connectors whose both boundaries are pinned to the neighbouring clips:
field-dive start ← field-still system-dive start ← system-still factory-dive start ← factory-still field-to-system start ← field-dive:last end → system-dive:first system-to-factory start ← system-dive:last end → factory-dive:first
Two fixes made this hold. A clip’s poster became its own first frame — measured with ffprobe signalstats, poster-to-frame brightness drift went from 6–12.5 to exactly 0.0 across all five clips. And the media budget is handed to the planning agent as a design constraint rather than a truncation warning: before that change an agent planned nine scenes for two available clips and left seven gaps; after it, the idea sized itself to the budget.
What I built
Event-sourced orchestration
The orchestrator is a state machine over an append-only SQLite event log. The LLM proposes plans and decisions but is never the store of record — and cannot declare a run finished on its own.
One reducer, three modes
Live WebSocket updates, recorded fixtures and replay scrubbing all flow through the same projectEvents reducer. Replay is not a second code path that can drift from the live one.
Ten agent roles with isolated sessions
Each role gets scoped context, permitted tools, typed input/output schemas, a budget and a cancellation signal.
Isolated preview origin
Agent-generated code never executes in the Studio origin — it is served from a separate port.
Media gateway with continuity contracts
Pluggable providers, prompt limits read from the provider machine-readable OpenAPI schema, and keyframe contracts binding generated clips together.
Live QA streaming
Playwright drives a real browser; frames stream over WebSocket while running, and the session is recorded to MP4 for replay.
Stack
TypeScript · Node.js 22 · pnpm monorepo · Fastify · SQLite event store · WebSocket · React · Vite · Playwright · Provider-neutral agent runtime · fal.ai · Cloudflare Tunnel
Still being worked on
Honest list, as of the end of the first week:
- QA replay needs an explicit "watch the QA pass" control on finished runs
- Clip seams still carry an exposure step of up to 8.8 YAVG — a short crossfade is the likely fix
- Agents over-disclose: they label generated imagery even when disclosure is off
- Clips are capped at ~5 seconds by the current video provider
- A realtime voice agent — dictate the brief and steer the run by voice — is designed and partially built
Want a run for your product?
Demo runs are open to watch; new runs are available on request. If you want an agent team like this building for you — or inside your company — let’s talk.
Get in touchSolo project, built 23–28 July 2026. Architecture, implementation, agent design and evaluation — all mine.