Getting started

Scaffold

npx --package=@beem-slide/cli beem init my-deck

The scaffolder writes the workspace, initialises a git repository and makes a first commit, so the deck is under version control before you have written a line of it. Pass --no-install to skip dependency installation, or --force to scaffold into a directory that already has files in it.

my-deck/
├── slides/
│   ├── .folders.json         # deck grouping for the home screen
│   └── getting-started/
│       ├── assets/           # images, video and fonts for this deck
│       └── index.tsx         # the deck itself
├── themes/                   # shared design systems, once you want them
├── AGENTS.md                 # the rules your agent reads
├── CLAUDE.md                 # a link to AGENTS.md
├── beem-slide.config.ts      # framework config
├── tsconfig.json
├── vercel.json               # deploy config, if you want it
└── netlify.toml

Then start the dev server:

npm run dev

It listens on http://localhost:5299, or the next free port if that one is taken. Hot module reload, the inspector and the assets panel are all on by default — there is nothing to enable.

Hand it to an agent

Open the workspace in anything that edits files: Claude Code, Codex, Cursor, Windsurf, Zed. Two things get an agent productive here.

AGENTS.md ships in the scaffold and carries the hard rules — where a deck lives, what its entry file must export, what not to touch. CLAUDE.md links to it so Claude Code picks the same rules up. Any agent that reads one of those conventions starts out knowing the file contract.

The authoring guides — how to use the canvas, the type scale, the vertical budget, how to plan a deck, how to extract a theme — are served live rather than shipped. Register the tools with your client and sign in:

npx --package=@beem-slide/cli beem mcp install
npx --package=@beem-slide/cli beem login

The agent then calls authoring_guide for whichever topic it needs (slide-authoring, create-slide, generate-deck, create-theme, apply-comments), and gets the current version rather than whatever was vendored into your repo months ago. See Connect for the client list and Guides for what each topic covers.

A first prompt looks like this:

Draft a Q2 launch deck — three chapters, dark, subtle motion.

Iterate in the browser

Two ways to change a page, and they are meant to be mixed.

Edit it yourself. Toggle Inspect and click an element. Text, font, weight, colour, and an image's source and crop are all editable in the property panel. Changes buffer until you press Save, so a batch of edits lands as one write instead of one HMR round-trip each.

Describe it instead. Click a block, type a note — "use the accent colour on this title", "drop this to 88px" — and press Add note. Notes persist into the source as @slide-comment markers. Run /apply-comments and the agent rewrites exactly what you flagged, then clears the markers.

Build and deploy

The scaffold's package.json carries dev and check. The rest of the commands come off the beem-slide binary directly:

npx beem-slide check      # type-check every deck without building
npx beem-slide build      # static site into dist/
npx beem-slide preview    # serve dist/ locally

build emits a plain static site with no server component, so any static host will take it — Vercel, Cloudflare Pages, Netlify, Zeabur, an S3 bucket. The vercel.json and netlify.toml in the scaffold are there so the first two need no configuration at all.

What's next