ProjectBuild an Agentic Content Studio: the explanation · Module 18: The studio front end · part 20 of 22
Part 20 · Module 18: The studio front end

Module 18: The studio front end

21 min read·
About 40 minutes · Needs: Module 4 (high-level design and the same-origin proxy), Module 6 (sign-in and the session cookie), Module 7 (the renderer and the deck spec) · Code: frontend/src/App.tsx, frontend/src/api.ts, frontend/src/lib/auth.tsx, frontend/src/lib/useAsync.ts, frontend/src/lib/toast.tsx, frontend/src/components/Layout.tsx, frontend/src/components/SlideThumb.tsx, frontend/src/pages/Create.tsx, frontend/vite.config.ts

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
The studio app and the bare /render page (blue) run in the browser; nginx serves them and forwards /api, so the browser talks to one origin.

The studio is what the user actually sees: a React app with a sidebar, twelve pages and a bare /render page for the server's Chromium. This module covers the shell that every page shares: routing, the sign-in gate, the API client, shared state, data loading, thumbnails and tests. The big pages have their own modules: the editor (Module 12), the live job view (Module 13) and the ideas, dashboard and insights pages (Module 14).

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.

Buy this project · ₹799See what is inside

Or open everything with a plan