tandryukha/aidemo

**aidemo.top** · watch a real 51s output ▶ · authoring guide · render in CI
Tell your coding agent *"record a 45s demo of the checkout flow"* — get back a
polished **MP4 with voiceover, synced captions, and auto-zoom**. Any MCP-capable
agent (Claude Code, Codex CLI, Gemini CLI) writes one storyboard.json; the
headless engine drives a real Chrome, records a **deterministic replay**, voices
it, captions it, and trims the dead time. Because the replay is deterministic,
**the demo re-renders itself in CI** when the product changes — no re-recording,
no API key, about **$0 a render**. An **open-source (MIT) alternative to Screen
Studio, Clueso, or Demosmith** for when you'd rather your coding agent make the
demo.
**Install:** Claude Code /plugin marketplace add tandryukha/aidemo · any agent npx skills add tandryukha/aidemo (skill only; add the MCP server with repo-init) · CI uses: tandryukha/aidemo@stable · CLI npx -y @tandryukha/aidemo · Homebrew brew install tandryukha/aidemo/aidemo
Published on the GitHub Marketplace, npm, a Homebrew tap, and the MCP Registry.
Real output — a ~51 s self-narrated tour of Wikipedia (portal search →
Ada Lovelace → focus-zoom → click through to the Analytical Engine → glide
scroll), authored by Claude from one storyboard.json and recorded as a
deterministic replay. The preview GIF is silent;
**watch the full version with narration ▶**.
Three ways to use it
1. **From your coding agent** — the fastest path. In **Claude Code**:
/plugin marketplace add tandryukha/aidemo then
/plugin install record-demo@aidemo (bundles the skill **and** the MCP
server). In **Codex / Gemini / any MCP agent**:
npx -y github:tandryukha/aidemo#stable repo-init. Then just say
*"record a 45s demo of <flow>"* and the agent authors + renders it.
2. **Locally, free & offline** —
AIDEMO_TTS_PROVIDER=local aidemo render --headless. An in-process
voice model + script-timed captions mean **no API key, ~$0, fully offline**.
See docs/LOCAL_MODELS.md.
3. **In CI, self-maintaining** — drop uses: tandryukha/aidemo@stable into a
workflow. When the product changes, it replays the committed storyboard and
commits fresh media — **no key, no LLM tokens, ~$0** on free runner minutes.
See docs/CI.md.
**Free & open source.** MIT-licensed. Runs on GitHub's free Actions tier, or
fully local at $0 with the in-process voice — no API key, no cloud upload, no
telemetry. Works against **localhost and auth-walled apps** (your own Chrome).
From one sentence to a narrated MP4
You type a sentence, the agent writes an artifact you can read and edit, the
engine records and cuts it:
**1 · What you type** — one line to any MCP-capable agent (Claude Code here):
**2 · What the agent authors** — a plain, editable storyboard.json (excerpt:
narration + a fixed browser action-spec, side by side — no generated code):
**3 · How it's recorded + cut** — aidemo render drives a real Chrome (smooth
animated cursor, human-cadence typing, auto-zoom), then trims the dead time and
syncs to the narration:
**4 · What you get** — output/final-demo.mp4, plus a README-ready GIF
(aidemo gif) and named stills (aidemo stills) from the same take. UI changed?
Re-run against the same storyboard — no re-recording by hand.
The design goal: demos that look **human-made and snappy**, not like an AI
clicking around and waiting between screenshots — by separating **authoring**
(slow, one-time — figure out the flow) from **recording** (a fast deterministic
replay with a smooth animated cursor).
What teams render with it
- **GitHub README demos** — aidemo gif demos/onboarding, drop the autoplaying
GIF into the readme (the GIFs on this page are exactly that).
- **Landing-page hero videos** — the muted-autoplay MP4 on
aidemo.top is a rendered demo, poster frame and all.