Build a production-grade AI PowerPoint generator from scratch
Build an AI slide generator that writes real, editable .pptx files, step by step: a layout language, text fitting, themes and components, Gemini and LangChain, then retries, fallbacks, streaming and tests.
- Lessons
- 44
- Total time
- ~526 min
- XP on offer
- 1430
- Level
- Beginner-friendly JavaScript to production
- Price
- Free
Syllabus
Work top to bottom, or jump straight to the gap you came here to fill.
- 01
Start here
See the tool you'll build, find out why AI can't lay out slides on its own, and tour the finished project.
- What you'll build: an AI PowerPoint generatorTour the AI PowerPoint generator you'll build from scratch with Gemini and LangChain: how it works, why it's designed this way, and how the course gets you there.Quiz7 minQuiz7 min
- Why LLMs can't place things on a slideAsk Gemini to position every box on a slide with exact coordinates, check the result with code, and see why AI slide generators need a layout engine.Playground12 minPlayground12 min
- Tour the finished project and set up your machineBrowse every file of the finished AI slide generator before you write any of it, learn how the files import each other, and set up Node.js to run it locally.Quiz10 minQuiz10 min
- 02
PowerPoint files with pptxgenjs
Inches and points, your first generated .pptx, and the render plan every slide goes through.
- Slides, inches and pointsHow PowerPoint measures a slide: inches for positions, points for fonts. Write the unit helpers every later file uses, and check whether a box fits on the slide.Playground8 minPlayground8 min
- Create your first .pptx file with pptxgenjsGenerate a real PowerPoint file from JavaScript with pptxgenjs: a presentation, a slide and a text box, returned as base64 you can download and open.Playground10 minPlayground10 min
- The render plan: data in, slides outSeparate what a slide contains from how the file is written: draw a plain-data render plan of rectangles and text with pptxgenjs, converting points to inches.Playground12 minPlayground12 min
- 03
A layout language AI can write
Design SlideML, write its parser, and have Gemini write your first slide in it.
- Describe the slide, don't position itDesign SlideML, an XML layout language language models can write reliably: slides, rows, columns, boxes and text, with padding and gap instead of coordinates.Quiz9 minQuiz9 min
- Write an XML parser for SlideMLTurn SlideML text into a tree your code can walk: tokens, a stack of open elements, and clear errors for mismatched or unclosed tags.Playground14 minPlayground14 min
- Ask Gemini to write a slide in SlideMLTeach Gemini the SlideML language with a system instruction, pull the XML out of its reply, and parse it into a tree: your first AI-generated slide structure.Playground12 minPlayground12 min
- 04
The layout engine
Padding, gap and splitting space, a recursive row and column layout, and SlideML to a real .pptx.
- Padding, gap and splitting spaceThe two functions at the heart of a flexbox-style layout engine: take padding off a box, and share space between fixed-size and growing children with gaps.Playground12 minPlayground12 min
- Rows and columns: laying out a treeWrite the recursive arrange() at the core of the layout engine: walk the SlideML tree, split each container's space between its children, and emit a render plan.Playground14 minPlayground14 min
- From SlideML to a real PowerPoint fileConnect the parser, layout engine and pptxgenjs into one compile step: SlideML text in, a render plan and a downloadable .pptx out.Playground9 minPlayground9 min
- 05
Fitting text
Measure text with real font metrics, wrap it, shrink it to fit any box, and size boxes to their content.
- Measure text with real font metricsWork out how wide text will be in PowerPoint before the file is opened, by adding up real character widths from the font: the foundation of text fitting.Playground10 minPlayground10 min
- Wrap text into linesBreak text into lines that fit a width with greedy word wrapping, measure how tall the result is, and handle single words too long for any line.Playground11 minPlayground11 min
- Shrink text to fit any boxFit text into any box by stepping the font size down until the wrapped lines fit, without splitting words, and report text that can't fit at all.Playground11 minPlayground11 min
- Size boxes to fit their contentUpgrade the layout engine so column children are as tall as their text, space left over goes to growing children, and every text box shrinks to fit.Playground14 minPlayground14 min
- 06
Themes and components
Design tokens, React-style components with props and slots, a slide library, and compiling whole decks.
- Themes and design tokensGive slides named design values like $primary and $heading, resolve them from a theme, and fill in defaults, so one deck can switch between light and dark instantly.Playground11 minPlayground11 min
- Components: one tag, a whole layoutBuild React-style components for slides: a template with props, required-prop checks, and expansion of nested components into plain layout before it's laid out.Playground13 minPlayground13 min
- Slots, optional props and a component libraryLet components take children through slots, drop optional parts when a prop is missing, and meet the slide component library the model will write with.Playground13 minPlayground13 min
- Compile a whole deckCompile a full <deck> of component slides into render plans and a .pptx: each slide on its own, problems collected per slide, and broken slides replaced with placeholders.Playground13 minPlayground13 min
- 07
Generating decks with Gemini
Teach the model your components, plan an outline before writing, and let it repair its own mistakes.
- Teach the model your languageGenerate the system prompt from your component library: usage lines, props and descriptions, rules and one complete example, so the model's instructions never go out of date.Playground11 minPlayground11 min
- Plan an outline, then write the slidesGenerate a whole presentation in two Gemini calls: a structured JSON outline with a schema, then the deck in SlideML, compiled into slides and a .pptx.Playground14 minPlayground14 min
- Self-repair: let the model fix its own mistakesFeed compiler problems back to Gemini and let it fix the deck, keeping a fix only when it has fewer problems, with a hard limit on repair rounds.Playground12 minPlayground12 min
- 08
LangChain
Chat models and messages, structured output with zod, Google Search research, and the pipeline rebuilt on LangChain.
- What LangChain is, and when it helpsWhat LangChain actually does for an AI app, what it costs you, and why we rebuild the slide pipeline on it after writing it by hand first.Quiz9 minQuiz9 min
- Chat models and messagesCreate a Gemini chat model with LangChain, send system and human messages with invoke(), and read the reply's text, including replies made of several parts.Playground10 minPlayground10 min
- Structured output with zodDescribe the deck outline once with zod and use LangChain's withStructuredOutput to get a checked JavaScript object from Gemini instead of JSON text.Playground11 minPlayground11 min
- Research with Google Search groundingGive Gemini the googleSearch tool through LangChain so decks use current facts, then pull the source pages out of the grounding metadata without duplicates.Playground11 minPlayground11 min
- Rebuild the pipeline on LangChainAssemble research, the zod outline, deck writing and the repair loop into one LangChain pipeline that takes a model as a parameter, replacing the hand-written generate.js.Playground13 minPlayground13 min
- 09
Production: reliability
Classify errors, retry 429s with backoff and jitter, add timeouts and deadlines, and fall back when a model is down.
- Classify errors before you handle themSort Gemini API failures into kinds: a 429 rate limit worth waiting out, a used-up daily quota that never recovers, overloads, timeouts and bad requests, each with the right response.Playground12 minPlayground12 min
- Retries with exponential backoff and jitterRetry failed AI calls the production way: only retryable errors, exponential backoff with equal jitter, the server's retry delay when it gives one, and a testable wait.Playground13 minPlayground13 min
- Timeouts and deadlinesStop waiting on a model call that hangs, cancel the request with an AbortSignal, and keep retries inside a deadline so serverless functions fail cleanly instead of being killed.Playground12 minPlayground12 min
- Fallback models and circuit breakersKeep generating when a Gemini model is overloaded: a pool that falls back to a second model, sticks with it, and a circuit breaker that skips unhealthy models, wired into the pipeline.Playground15 minPlayground15 min
- 10
Production: cost, speed and consistency
Repair only broken slides, stream slides as they're written, match heading sizes, and cache decks.
- Spend fewer tokens: repair only broken slidesCut the token cost of self-repair: find each slide's position in the deck text, send only the broken slides to the model, and splice the fixes back in untouched.Playground14 minPlayground14 min
- Stream slides as they're writtenStream the model's reply with LangChain and emit each slide the moment its closing tag arrives, so users watch the deck appear instead of waiting 30 seconds.Playground12 minPlayground12 min
- Consistent decks: matching heading sizesMake AI-generated decks look designed: after laying out every slide, lock headings and titles to the smallest size any of them needed, and lay the deck out again.Playground11 minPlayground11 min
- Cache decks and re-theme without AINever pay twice for the same deck: an LRU store keyed by a stable hash of the request, and theme changes that re-run only the compiler on saved SlideML.Playground12 minPlayground12 min
- 11
Production: safety, testing and visibility
Validate input and cap model output, test with a fake model, track token usage, and enforce daily quotas.
- Input validation and hard limitsValidate every request before it costs anything, build a clean copy with defaults, and put hard limits on model output size, slide count and nesting depth.Playground12 minPlayground12 min
- Test AI code with a fake modelTest the whole generation pipeline offline with a fake LangChain model that replays scripted replies: happy paths, repairs, 429 retries and fallbacks, in milliseconds.Playground14 minPlayground14 min
- Track tokens, retries and timingMeasure every deck: model calls, input and output tokens from usage_metadata, retries, fallbacks and time per stage, returned with the result for logs and the UI.Playground12 minPlayground12 min
- Daily quotas per userProtect your AI bill with a daily deck limit per user: one counter per user per day, checked before generating, and refunded when generation fails through no fault of the user.Playground10 minPlayground10 min
- 12
Ship it
An API endpoint, streaming progress, a web page with live previews, and running it all on your machine.
- Build the API endpointTurn the pipeline into a web API: a request handler that validates, serves cached decks, enforces quotas and refunds failures, plus a small Node.js server that only speaks HTTP.Playground14 minPlayground14 min
- Stream progress to the browserSend pipeline progress to the browser as NDJSON: stage changes, live slide previews, retries and the finished deck, from one handler that also serves plain JSON.Playground13 minPlayground13 min
- A web page with live slide previewsBuild the browser side: read NDJSON progress, draw each slide from its render plan as scalable HTML, escape model text to prevent XSS, and download the finished .pptx.Playground14 minPlayground14 min
- Run it yourself: the capstoneGenerate a real deck end to end with everything you built, download the complete project, run it on your machine with Node.js, and check it against a production-readiness list.Playground20 minPlayground20 min
Questions
- What will I have built at the end?
- A complete AI PowerPoint generator: type a topic and get a real, editable .pptx. It includes a layout engine, themes and components, a Gemini and LangChain pipeline, retries and fallback models, streaming progress, tests, and a web app you can run on your own machine.
- Do I need to be an experienced developer?
- No. If you can write basic JavaScript functions, you can follow along. Each lesson teaches one or two ideas, gives you step-by-step TODOs, hints you can reveal one at a time, and a solution. You always see every file you've written so far.
- Why build a layout engine instead of asking the AI for slides directly?
- Language models can't measure text or keep coordinates consistent, so AI-positioned slides overlap and overflow. In this course the model describes the structure, and deterministic code does the geometry, which is how reliable AI slide generators work.
- Does it cover LangChain?
- Yes. You build the pipeline with plain API calls first so nothing is magic, then rebuild it with LangChain chat models, structured output with zod and Google Search grounding.
- What makes it production grade?
- Three modules on what demos skip: telling rate limits from used-up quotas, retries with backoff and jitter, timeouts and deadlines, fallback models and circuit breakers, cheaper repairs, streaming, caching, input limits, tests with fake models, usage tracking and daily quotas.
- Do I need a paid Gemini key?
- No. The free tier is enough. Most exercises don't call the model at all, and the ones that do make only a few calls.
- Do I need an account?
- Not to read. Every lesson is free to read with no account at all. Running the exercises needs a free account, because that's where your Gemini API key and your progress are stored.