Shipping the Agent: Full-Stack Development of Your Own Claude Code

Build and ship a browser-based coding-agent application with FastAPI, WebSockets, SQLite, background work, and operational evidence.

A headless coding agent becomes a full-stack application when a browser can start a session, send a message through a service boundary, watch the agent stream work, refresh without losing history, and recover when a process or connection fails. This course builds that application end to end. The frontend uses semantic HTML, CSS, and browser-native JavaScript; the backend uses FastAPI, REST, WebSockets, an application-service layer, and SQLite backed by an append-only journal.

The running product is autocode, a local-first web application around the governed agent harness from the preceding course. Each chapter adds a visible capability to projects/autocode/, follows the request or event across the stack, and proves the result with a test or failure drill.

Design rule: a feature is complete only when the learner can trace it from user interaction through transport and durable state, then observe the result in the browser after a refresh or reconnect.

What you finish with

You finish with a runnable full-stack application, not a collection of adapters. From a browser, a user can create and browse sessions, submit work, receive streamed agent and tool events, refresh into persisted history, inspect artifacts and search results, and reconnect without duplicating events. The same application service also supports the CLI, which keeps business behavior out of transport handlers.

The course deliberately uses browser standards before a frontend framework. This exposes the mechanics that React, Vue, and desktop wrappers organize: DOM state, event handling, fetch, WebSocket lifecycle, optimistic feedback, accessibility, and failure recovery. Once those boundaries are understood, replacing the frontend or database is an adapter change rather than a rewrite.

Phase	Chapters	Working outcome
End-to-end slice	01–03	Shared application service, REST API, browser UI, and streamed agent run
Durable data	04–06	SQLite sessions, journal recovery, file artifacts, and searchable code/history
Services and concurrency	07–09	Authentication, sync, multi-client replay, and checkpointed background jobs
Ship and operate	10–12	Installable web service, container image, observability, recovery drills, and capstone release

Learning path

The project grows as one deployable system. Read the chapters in order so each user-facing feature can reuse the interfaces established before it.

Chapter	Build	Evidence
00. Overview	Complete stack, request flow, event flow, and definition of done	Architecture map and end-to-end acceptance contract
01. Application core and CLI	Agent-runner port, application service, and thin command adapter	One message persists the same event sequence through either adapter
02. Browser application and REST	Responsive HTML/CSS/JavaScript interface plus typed session routes	Browser loads, creates a session, and restores it from SQLite
03. Streaming over WebSockets	Incremental text, tool cards, cancellation, and reconnect state	WebSocket integration test from submitted message to persisted completion
04. Durable sessions	SQLite projection, write-ahead journal, and migrations	Restart/replay with zero acknowledged event loss
05. File and artifact flows	Upload/download boundary and content-addressed storage	Deduplication, size/type validation, and tombstone recovery
06. Search experience	Indexing, hybrid retrieval, freshness state, and result UI	Query-quality checks and stale-result behavior
07. Authentication and sync API	Device identity, protected routes, idempotent deltas, and merge policy	Authorization failures and two-writer convergence
08. Multi-client realtime	Session fan-out, cursor replay, and bounded backpressure	Two observers converge after disconnect and replay
09. Background jobs	Checkpointed job lifecycle for indexing, export, and retention	Retry, checkpoint, dead-letter, and UI-state recovery
10. Packaging and deployment	Wheel, static web assets, container image, configuration, and updates	Clean install and local container smoke path
11. Operations	Readiness, metrics, structured logs, backups, and redacted support bundles	Dependency-degradation, restore, and leakage drills
12. Capstone	Production-shaped vertical slice and release report	Browser-to-database end-to-end test, dogfood scorecard, and rollback plan

Prerequisites and execution

You should be comfortable with Python functions and classes, basic async/await, JSON, Git, and the agent-harness vocabulary of sessions, tools, and events. No prior frontend, database, or web-service experience is assumed. The course introduces the browser DOM, CSS layout, HTTP, REST, WebSockets, SQL, schema migrations, authentication, and deployment when the application first needs each concept.

The default path runs entirely on a laptop:

1. From the repository root, run uv sync --package autocode --extra service --dev.
2. Start the application with uv run --package autocode --extra service autocode serve.
3. Open http://127.0.0.1:8000/ and complete the browser exercises.
4. Run .venv/bin/pytest projects/autocode/tests -q after each milestone.
5. Run notebook code with .venv/bin/wt run; Quarto renders the stored outputs without contacting a model provider.

The deterministic demo runner is the canonical evidence path. Switching AUTOCODE_AGENT_MODE to harness connects the same application service to the preceding coding-agent package and requires the provider configuration expected by that project. PostgreSQL, S3-compatible storage, reverse proxies, and hosted deployment are later adapters. They are not required to see the complete request, persistence, and streaming path work locally.