aidemo — your coding agent makes the demo video

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 <dir> --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):

claude "record a 45s demo touring Wikipedia: search for Ada Lovelace,
open the Analytical Engine, then glide down the article"

2 · What the agent authors — a plain, editable storyboard.json (excerpt: narration + a fixed browser action-spec, side by side — no generated code):

{
  "title": "A quick tour of Wikipedia",
  "zoom": {},                                  // Screen-Studio-style auto-zoom
  "scenes": [
    { "id": "search",
      "narration": "Start at the Wikipedia portal and search for Ada Lovelace.",
      "actions": [
        { "op": "goto", "url": "https://www.wikipedia.org/" },
        { "op": "type", "target": { "selector": "#searchInput" }, "text": "Ada Lovelace" },
        { "op": "click", "target": { "selector": "button[type=submit]" } } ] },
    { "id": "engine",
      "narration": "Her notes on Babbage's Analytical Engine hold the first computer program.",
      "actions": [
        { "op": "focus", "target": { "selector": "#firstHeading" } },
        { "op": "click", "target": { "selector": "a[href*='Analytical_Engine']" } },
        { "op": "scrollBy", "dy": 900, "easing": "glide" } ] }
  ]
}

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:

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗