Build an Agentic Content Studio: the explanation
A working content studio, Slidesmith Studio, taken apart in illustrated modules. A user describes a topic, picks a LinkedIn carousel or 16:9 slides and a template, and three AI agents (research, content strategist, designer) write a structured deck spec in the user's brand. Code renders it, measures every slide in a headless browser, sends slides that overflow back to the designer, and exports PDF, PNG, ZIP or a single HTML file. The user never sees HTML: they click any text to edit it, switch template or format instantly, or ask the AI to redo one slide. Everything runs on an open-weight model, qwen3.8:27b, on the user's own Mac through Ollama, or on a hosted copy of the same model in the cloud.
Who it is for: anyone who knows a little Python and wants to understand, rebuild or extend a real agentic application with a web front end, from beginners to working engineers. Each module says what to read first.
How each module is laid out
| Section | Answers |
|---|---|
| Where this fits | the same system map in every module, with this module's parts highlighted |
| What it does | the idea in one picture, then each production practice at a glance: what, why, how, when, where |
| Use cases and examples | the same practice in this studio and in other industries |
| How it works | the mechanism step by step, one figure per step, with real values |
| Code tour | the real files, short excerpts, every line explained, concept boxes for new ideas, and a "what happens when" trace |
| Design decisions | what was chosen, the alternatives and why, with measured numbers, and when to choose differently |
| What can go wrong | failures and attacks, how the code handles each, and the test that proves it |
| Try it yourself | exact commands and what you should see |
| Check yourself, Key terms | a short quiz and a glossary |
Figures use one colour language: blue is our system, amber is a model or anything uncertain, green is correct or safe, red is failure or attack, grey is background.
Modules
| # | Module | Main code |
|---|---|---|
| 0 | Project overview: a guided tour of the running app | screenshots of the real app, no code |
| 1 | The problem with making carousels by hand | research/, prototype/ |
| 2 | The solution: one prompt, three agents, one spec | ai/pipeline.py, render/renderer.ts |
| 3 | Choosing the model and the infrastructure | research/spike_llm.py, ai/llm.py, core/config.py |
| 4 | High-level design | main.py, nginx.conf.template, docker-compose.yml |
| 5 | Low-level design: data, deck spec, API and events | models/, alembic/, schemas/deck.py, the SSE protocol |
| 6 | Sign-in, sessions and brand onboarding | core/security.py, api/routes/auth.py, services/brand.py, pages/Onboarding.tsx |
| 7 | The deck spec and the templates | schemas/deck.py, render/renderer.ts, render/brand.ts, slides.css |
| 8 | The agent pipeline with LangGraph | ai/pipeline.py, ai/context.py |
| 9 | The research agent and web search | ai/agents/research.py, ai/search.py |
| 10 | The strategist, the designer and JSON repair | ai/prompts.py, ai/agents/strategist.py, ai/agents/designer.py, ai/jsonfix.py |
| 11 | Render, measure and repair in Chromium | render/chromium.py, render/measure.ts, pages/RenderPage.tsx |
| 12 | Editing, redo and the editor | pages/Editor.tsx, render/editing.ts, render/deckReducer.ts |
| 13 | Background jobs and live progress | ai/jobs.py, api/routes/jobs.py, lib/useJob.ts |
| 14 | Ideas, dashboard and insights | ai/ideas.py, services/insights.py, pages/Ideas.tsx, pages/Insights.tsx |
| 15 | Exports: PDF, PNG, ZIP and HTML | render/export.py, api/routes/render.py |
| 16 | Security: sessions, uploads, SSRF and XSS | main.py (CSRF), core/ratelimit.py, services/files.py, render/chromium.py, security.test.ts |
| 17 | Evaluating the agents | evals/ |
| 18 | The studio front end | frontend/src |
| 19 | Containers and the local stack | backend/Dockerfile, frontend/Dockerfile, docker-compose.yml |
| 20 | Deploying to Google Cloud with CI/CD | deploy/, .github/workflows/ |