ProjectBuild an Agentic Content Studio: the explanation · Module 4: High-level design · part 6 of 22
Part 6 · Module 4: High-level design

Module 4: High-level design

20 min read·
About 45 minutes · Needs: Module 2 (the solution), Module 3 (the model and infrastructure) · Code: backend/app/main.py, frontend/nginx.conf.template, docker-compose.yml, backend/app/api/ai_bridge.py

Where this fits

WHERE THIS FITS Slidesmith Studio this module BROWSER React FRONT DOOR AND API nginx, FastAPI BACKGROUND AGENTS LangGraph MODELS Ollama RENDERING Playwright DATA Postgres 17 OPERATIONS evals, Docker, Cloud Run Studio app React pages /render page same renderer nginx proxy, headers Auth sessions, CSRF Brand kit onboarding, uploads Projects deck spec, edits Job runner progress over SSE Research search, facts Strategist outline Designer slide JSON Check fit, else repair LangGraph pipeline state graph, JSON repair Ideas post ideas from pillars qwen3.8:27b Ollama, local GPU Web search Ollama API Chromium render, measure Exports PDF, PNG, ZIP, HTML PostgreSQL users, decks, jobs Uploads disk or GCS Evaluation suites, gate Insights usage, timings Containers Docker Compose Deploy Cloud Run, CI/CD
Every part is highlighted: this module is the map of the whole system. The model and web search are amber because they live outside our code.

This module is the map. It names every running part of Slidesmith Studio, shows how a request travels between them, and explains the few structural choices that the rest of the course builds on: one origin for the browser, one API process, slow work as background jobs, and a server-side browser that visits the app's own render page. When a later module says "the API" or "the web container", this is the picture it means.

The rest of this project is yours to keep

This project is bought on its own, once, and stays readable afterwards, including the parts added to it later.

Or open everything with a plan