Run it yourself: the capstone

Generate 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.

Lesson 44 of 4420 min+80 XPHands-on

Forty-three lessons ago this project was an empty folder. Now it researches a topic, plans a deck, writes it in a language you designed, lays it out with an engine you wrote, repairs its own mistakes, survives rate limits and outages, streams progress to a web page, and produces a real .

With AI (Gemini)

Topic

“cobots in small factories”

Research

Google Search, optional

Outline

structured JSON

SlideML

<CardsSlide>…

Without AI (your engine)

Parse

text → tree

Components + theme

short tags → layout

Layout + text fitting

exact boxes

.pptx file

pptxgenjs

Everything you'll build. The model only writes words and structure; deterministic code does all the geometry.

The final run

The exercise below calls everything: validateRequest, generateDeck (research off, to keep it quick) and planToPptx. Run it with your key, look through the slides, and download the file. Every piece of it is code you wrote.

Run it on your machine

Press Download .zip above the editor (or in the project files below) and unzip it.
Install dependencies: npm install.
Set your key: export GEMINI_API_KEY=… (on Windows PowerShell: $env:GEMINI_API_KEY="…").
Try the three ways to use it:

terminal

node cli.js "Why small factories are adopting cobots"   # writes deck.pptx
npm start                                               # web app on http://localhost:3000
node --test                                             # the tests: no key needed

Web app

HTTP, streaming progress, preview

server.jspublic/src/handler.js

Production

reliable, cheap, safe

errorsretryfallbackusagequotacachelimits

AI pipeline

Gemini through LangChain

pipelinellmoutlineresearchprompt

Engine

no AI: same input, same slides

xmlcomponentslibrarythemelayouttextfontscompilepptx

Four layers. Each one only uses the layers below it, which is what makes every part testable on its own.

Before you put it online

Real sign-in. Quotas are keyed by IP address here; use real user ids.
Shared storage. Move the quota and the deck store from Maps to a database or Redis, with atomic increments for quotas.
Keys stay on the server. GEMINI_API_KEY is read by the server only and never sent to the browser.
Time limits match your host. Keep DECK_DEADLINE_MS below your platform's function limit.
Tests in CI. Run node --test on every pull request.
Logs. Write one line per deck with the usage summary, so cost and failures are visible.

Going deeper — where to go next

The PPTX Lab runs the production version of this design. Ideas it adds that you can build on this project: AI-generated images with a capability check and text-only fallback, headers and footers, more components and layout options like grids and absolute positioning, deck-wide theme overrides per component, and patches to the PowerPoint XML for things pptxgenjs can't produce, like rounded image corners.

The complete project

37 files · 2 new or changed in this lesson

README.md

# Slide generator

Turn a topic into a real, editable PowerPoint deck with Gemini.

## Run it

You need Node.js 20 or newer and a Gemini API key from https://aistudio.google.com/apikey.

```bash
npm install
export GEMINI_API_KEY=your-key-here

node cli.js "Why small factories are adopting cobots"   # writes deck.pptx
npm start                                               # web app on http://localhost:3000
node --test                                             # tests, no key needed
```

## How it works

```
topic → research (optional) → outline → SlideML → compile → repair → .pptx
```

| Folder / file | What it does |
|---|---|
| `src/xml.js` | Parses SlideML, our XML layout language |
| `src/components.js`, `src/library.js` | Components like `<CardsSlide>` that expand into layout |
| `src/theme.js` | Colors, fonts and sizes as named tokens |
| `src/fonts.js`, `src/text.js` | Measures, wraps and shrinks text to fit |
| `src/layout.js` | Rows, columns, padding and gap → exact boxes |
| `src/harmonize.js`, `src/limits.js` | Consistent heading sizes; size and depth limits |
| `src/compile.js` | SlideML → render plan, with problems per slide |
| `src/pptx.js` | Render plan → .pptx with pptxgenjs |
| `src/prompt.js`, `src/outline.js`, `src/research.js` | What we tell the model, and the structured outline |
| `src/pipeline.js` | The whole generation flow |
| `src/errors.js`, `src/retry.js`, `src/fallback.js` | Error kinds, backoff, timeouts, fallback models |
| `src/deck-edit.js`, `src/stream.js` | Repair only broken slides; stream slides as they arrive |
| `src/usage.js`, `src/quota.js`, `src/cache.js` | Token and timing tracking, daily limits, saved decks |
| `src/handler.js`, `server.js` | The HTTP API, with streaming progress |
| `public/` | The web page with live preview |
| `test/` | A fake model and pipeline tests |

## Before you put it online

- Add real sign-in, and use the user's id for quotas instead of their IP address.
- Move the quota and the deck store to a shared database (a `Map` only works on one server).
- Keep `GEMINI_API_KEY` on the server. It must never be sent to the browser.
- Put the server behind HTTPS, and set a request timeout that matches your host's limit.

Key takeaways

You built a complete AI PowerPoint generator: engine, AI pipeline, production safeguards and a web app.
The model only writes words and structure; code does everything that must be exact.
Before going live: real sign-in, shared storage for quotas and decks, and keys kept on the server.

Sign in to run the exercise

Reading is free. Writing code here needs an account so we have somewhere to keep your Gemini key and the +80 XP you are about to earn.

Continue with Google