aidemo

aidemo — コーディングエージェントがデモ動画を作成

aidemo.top · 実際の51秒の出力を見る ▶ · 作成ガイド · CIでレンダリング

コーディングエージェントに 「チェックアウトフローの45秒のデモを録画して」 と伝えるだけで、ナレーション、同期した字幕、自動ズームを備えた洗練された MP4 が完成します。MCP 対応のエージェント（Claude Code、Codex CLI、Gemini CLI）が storyboard.json を1つ作成すると、ヘッドレスエンジンが実際の Chrome を操作し、決定論的なリプレイを記録して、ナレーションと字幕を追加し、不要な時間をカットします。リプレイは決定論的なので、プロダクトに変更があれば CI でデモを再レンダリングできます。再録画は不要で、API キーも必要なく、レンダリング1回あたりのコストは約0ドルです。コーディングエージェントにデモを作らせたい場合に、Screen Studio、Clueso、Demosmith に代わるオープンソース（MIT）の選択肢です。

インストール： Claude Code /plugin marketplace add tandryukha/aidemo · 任意のエージェント npx skills add tandryukha/aidemo（スキルのみ。repo-init で MCP サーバーを追加） · CI uses: tandryukha/aidemo@stable · CLI npx -y @tandryukha/aidemo · Homebrew brew install tandryukha/aidemo/aidemo
GitHub Marketplace、npm、Homebrew tap、MCP Registry で公開されています。

_{実際の出力 — Wikipediaを約51秒で案内する、ナレーション付きのツアーです（ポータルで検索 → Ada Lovelace → フォーカスズーム → クリックして Analytical Engine のページへ → 滑らかなスクロール）。Claudeが1つの storyboard.json から作成し、決定論的なリプレイとして記録しました。プレビューGIFは無音です。 ナレーション付きの完全版を見る ▶。}

使い方は3通り

1. コーディングエージェントから — 最も手軽な方法です。Claude Codeでは： /plugin marketplace add tandryukha/aidemo の後に /plugin install record-demo@aidemo を実行します（スキルとMCP サーバーが含まれています）。Codex / Gemini / 任意の MCP エージェントでは： npx -y github:tandryukha/aidemo#stable repo-init を実行します。あとは *「<flow> の45秒のデモを録画して」*と伝えるだけで、エージェントが作成してレンダリングします。
2. ローカルで無料・オフラインで — AIDEMO_TTS_PROVIDER=local aidemo render <dir> --headless。プロセス内で動作する 音声モデルと、スクリプトに合わせた字幕により、API キー不要、約 $0、完全オフラインです。 docs/LOCAL_MODELS.md をご覧ください。
3. CI で自動メンテナンス — ワークフローに uses: tandryukha/aidemo@stable を追加します。 プロダクトに変更があると、コミット済みのストーリーボードを再生して新しいメディアを コミットします。無料のランナー実行時間内でキー不要、LLM トークン不要、約 $0です。 docs/CI.md をご覧ください。

無料のオープンソースです。 MIT ライセンスです。GitHub の無料 Actions プランで実行できるほか、 プロセス内音声を使えば完全ローカルで $0 で利用できます。API キーもクラウドへのアップロードも テレメトリーも不要です。localhost や認証で保護されたアプリにも対応します（ご自身の Chrome を使用）。

ひとことからナレーション付き MP4 へ

文章を入力すると、エージェントが読んで編集できる成果物を作成し、エンジンが録画して編集します。

1 · 入力する内容 — MCP 対応エージェント（ここでは Claude Code）に1行入力します。

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

2 · エージェントが作成するもの — 編集可能なプレーンテキストの storyboard.json（抜粋： ナレーションと固定のブラウザー操作仕様を並べて記述し、コードは生成しません）。

{
  "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 · 録画・編集の方法 — aidemo render が実際の Chrome を操作し（滑らかなアニメーションカーソル、 人間らしいテンポのタイピング、自動ズーム）、不要な時間をカットしてナレーションに同期します。

storyboard.json
   → voice     OpenAI / ElevenLabs / local TTS → audio/narration.mp3 + voice.json
   → record    drives Chrome, animated cursor  → recordings/raw.{webm,mp4} + timeline.json
   → captions  Whisper word timestamps         → generated/captions.{srt,vtt,cues.json}
   → compose   trim idle · sync · auto-zoom · cards · caption · mux → output/final-demo.mp4

4 · 出力されるもの — output/final-demo.mp4 に加え、同じ録画から README にそのまま使える GIF （aidemo gif）と名前付き静止画（aidemo stills）を作成します。UI が変わった場合も、 同じストーリーボードを使って再実行すればよく、手作業で再録画する必要はありません。

設計目標は、AI がクリックしてスクリーンショットの合間に待つようなものではなく、 人が作ったような、テンポのよいデモです。作成（時間をかけて一度だけフローを把握する作業）と 録画（滑らかなアニメーションカーソルで高速かつ決定論的に再生する作業）を分けることで実現します。

チームでの活用例

• GitHub README のデモ — aidemo gif demos/onboarding を実行し、自動再生 GIF を README に貼り付けます（このページの GIF もすべて同じ方法で作成されています）。
• ランディングページのメイン動画 — aidemo.top のミュート・自動再生 MP4 は、 ポスター画像も含めてレンダリングされたデモです。
• リリース／リリース内容のデモ — 新機能のナレーションを作成し、 gh release upload v1.4.0 demos/whats-new/output/final-demo.mp4 を実行します。
• 顧客・見込み顧客向けデモ — 実際のアプリに対して、ローカルホスト、認証で保護された環境、 ログイン済みのご自身の Chrome を使った個別のフローを作成できます。何もマシンの外には送信されません。

CI でレンダリング（デモを自動メンテナンス）

ストーリーボードをコミットすると、aidemo GitHub Action がデモメディアを 同期します。関連する変更のたびに、ナレーションと字幕付きの新しい MP4（および GIF）を生成します。 決定論的な再生とローカル音声により、API キー不要、LLM トークン不要、約 $0 （無料のランナー実行時間のみ）です。これは画面録画ツールでは実現できないループです。 デモが自動でメンテナンスされます。

# .github/workflows/demo.yml
- uses: actions/checkout@v4
- run: sudo apt-get update && sudo apt-get install -y ffmpeg   # ubuntu ships Chrome, not ffmpeg
- uses: tandryukha/aidemo@stable
  with:
    demos: demos/*
    tts: local        # in-process voice → no keys, no tokens
    gif: "true"

詳しい手順、テンプレート（自動コミット／PR コメント／cron による更新）、常に最新の埋め込みを 実現する方法については、docs/CI.md、 docs/EMBEDS.md、**docs/recipes/**をご覧ください。

クイックスタート（自己完結型のスモークテスト）

同梱のフィクスチャストア（検索 → 結果 → カート → チェックアウト）を使い、外部依存なしで完成したデモをレンダリングします。

npm install                                # Node 20+, system Chrome, ffmpeg on PATH
node examples/local-demo/serve.mjs         # terminal 1: fixture on :8787
node bin/aidemo.mjs render examples/local-demo --headless   # terminal 2
open examples/local-demo/output/final-demo.mp4   # xdg-open on Linux, start on Windows

音声／字幕を利用するには、.env に OPENAI_API_KEY が必要です。または AIDEMO_TTS_PROVIDER=local を指定すると（キー不要、オフラインで動作）、またはローカルサーバーの OPENAI_BASE_URL を指定します。docs/LOCAL_MODELS.md を参照してください。Playwright のブラウザーをダウンロードする必要はありません。エンジンはシステムの Chrome（channel: "chrome"）を使用します。

_{同梱のフィクスチャを最初から最後までレンダリング — ナレーション、字幕、自動トリミング付き。音声なしのプレビューです。フルバージョン ▶。}

CLI

各ステップは個別に実行・再実行できます。録画し直さずに音声を再生成したり、文字起こしをやり直さずに再構成したりできます。

aidemo init <name>            # scaffold demos/<name>/ with a starter storyboard
aidemo init <name> --from-url <url>   # …drafted from the live page's headings + real selectors
aidemo import-trace trace.zip --name <name>   # …or from a Playwright trace / *.spec.ts (actions + selectors → scenes)
aidemo voice   <dir>          # per-scene TTS → narration.mp3 + voice.json
aidemo record  <dir>          # drive Chrome → raw video + timeline.json
aidemo probe   <dir>          # record-only dry run (verify selectors), no key needed
aidemo validate <dir>         # schema-check the storyboard, no browser (non-zero exit on issues)
aidemo lint    <dir>          # predict freezes/cuts + selector pitfalls before spending a take
aidemo captions <dir>         # Whisper → captions.{srt,vtt,cues.json} (--offline for no network)
aidemo compose <dir>          # trim + sync + zoom + cards + caption + mux → final-demo.mp4
aidemo gif     <dir>          # final-demo.mp4 → README-ready GIF (autoplays on GitHub)
aidemo frames  <dir>          # evenly spaced PNGs from the video for review (--source raw)
aidemo render  <dir>          # voice → record → captions → compose
aidemo guide                  # print the canonical authoring guide
aidemo doctor                 # check Node, ffmpeg, Chrome, voice endpoint

CI／フィクスチャには --headless を追加します。ログイン済みのセッションが必要な実際のサイトでは省略してください。--profile <dir> は Chrome のユーザーデータディレクトリを指定します。--fresh はデータを消去した状態で録画します。--storage-state <file>／--cookie "name=value;domain=host" は最初の操作の前に、Cookie で保護されたサイトに Cookie を設定します（またはストーリーボードで setup を宣言します。各テイクの前に preflight スクリプトを実行することもできます）。--capture native|obs は高精細な画面キャプチャに切り替えます。voice／render は変更のないシーンの TTS をスキップし、record は失敗したテイクを救済します（映像を保持し、logs/ にスクリーンショット／フレームダンプを保存します）。

エージェントインターフェース（MCP）

aidemo mcp は stdio MCP サーバーを実行します（ネットワークリスナーなし）。あらゆる MCP クライアントにエンジンを公開します。Claude Code プラグインにはこれが同梱されています。aidemo repo-init はエージェントに依存しない方法で登録します（Claude Code では .mcp.json、Gemini では .gemini/settings.json、Codex では codex mcp add aidemo -- npx -y github:tandryukha/aidemo#stable mcp）。

• オーサリングツール — get_authoring_guide は、エンジンとバージョンが一致した docs/AUTHORING.md を提供します（古くなりません）。get_storyboard_schema、validate_storyboard、init_demo、doctor も利用できます。
• パイプラインツールはジョブとして実行 — probe／record／render／voice／captions／compose／gif は jobId をすぐに返します。job_status はステージ、シーンごとの進捗状況、（失敗時には）スクリーンショット／フレームダンプのパスを報告します。

この設計にした理由

• LLM を処理に介在させず、決定論的に再生します。 録画では固定のアクション仕様を全速で実行するため、動画は滑らかです。エージェントが行うのはストーリーボードの作成（およびセレクターの初回確認）だけで、キャプチャ中に作業することはありません。
• 宣言型のアクション仕様と固定プレーヤーを採用しています（生成される spec.ts ではありません）。より安全で編集しやすく、タイムラインも自動で生成されます。compose は各シーンの動画をナレーションの長さに合わせ、待機部分だけをトリミング／速度調整します。残りの時間は静止ページをフリーズ表示するため、見苦しいスローモーションになりません。
• 字幕は libass ではなく、PNG を重ねて表示します。 ffmpeg のビルドによっては subtitles／drawtext が含まれていません。aidemo はヘッドレス Chrome で字幕をラスタライズし、時間に応じて切り替わる enable で重ねて表示します。overlay を備えたあらゆる ffmpeg で動作します。
• 映画のような仕上げは録画時ではなく、compose 時に行います。ズームに問題があれば、録画し直すのではなく再構成します。docs/POLISH.md を参照してください。

詳細なドキュメント

• docs/AUTHORING.md — エンジンが提供する、標準的なストーリーボードスキーマ、アクションの用語集、デモディレクターの原則です。
• docs/LOCAL_MODELS.md — API キー不要のレンダリングについて説明しています。プロセス内で動作する Kokoro 音声、ローカル音声サーバー（speaches）、ElevenLabs、オフライン字幕が含まれます。
• docs/POLISH.md — 自動ズーム、スクロールのイージング、音楽のダッキング、イントロ／アウトロカード、モーションブラー、カーソル制御、ネイティブ／OBS による高忠実度のキャプチャについて説明しています。
• docs/CHATGPT_APPS.md — ChatGPT Apps SDK ウィジェットの録画について説明しています（専用プロファイル、入れ子になった iframe、waitForWidget）。
• docs/CI.md · docs/EMBEDS.md · docs/recipes/ — CI でのレンダリング、常に最新の埋め込みコンテンツ、CI 内のエージェント向けレシピです。

セットアップ

前提条件：Node 20 以降、Google Chrome、PATH 上の ffmpeg + ffprobe。 macOS で開発・テストしています。Linux では、デフォルトの（Playwright による）キャプチャと --capture obs が動作します。aidemo doctor を実行してセットアップを確認してください。

npm install
cp .env.example .env      # add OPENAI_API_KEY, or use AIDEMO_TTS_PROVIDER=local (no key)

プロジェクトの構成（デモごと）

demos/<name>/          ← your working area (untracked; scaffold with `aidemo init`)
  input/      brief.md
  generated/  storyboard.json  timeline.json  captions.{srt,vtt,cues.json}
  recordings/ raw.webm (or raw.mp4 for native/OBS capture)
  audio/      scene-*.mp3  narration.mp3  voice.json
  output/     final-demo.mp4
  logs/       <command>.log  fail-<scene>-<n>.{png,json} (on a failed action)

セキュリティと信頼性

• テレメトリなし、分析なし、インストール時スクリプトなし（package.json に postinstall／preinstall はありません）。
• ネットワーク通信はユーザーが開始した場合のみです： api.openai.com（voice／captions のみ。ご自身のキー、または OPENAI_BASE_URL を介したローカルサーバーを使用）、api.elevenlabs.io（オプトイン）、huggingface.co（AIDEMO_TTS_PROVIDER=local の場合に一度だけダウンロード）、github.com（ご自身の gh を使った aidemo feedback 用）。録画と合成は完全にローカルで行われます。MCP サーバーは stdio 専用で、リスナーはありません。
• 小規模で監査しやすい構成： ソースファイル約 20 個、実行時依存関係 7 個、MIT ライセンスです。変動する #stable タグが気になる場合は、不変の参照を指定してください： npx -y github:tandryukha/aidemo#v0.14.0（リリース済みの任意のタグ）。
• 詳細については、docs/LOCAL_MODELS.md を参照してください。脆弱性は SECURITY.md の手順に従って非公開で報告してください。

ロードマップ

• 動画へのコメント（一時停止してコメント）と インラインでのトランスクリプト編集：字幕はシーンに対応しているため、行を編集するとそのシーンが変更済みとしてマークされ、aidemo voice --scene <id> + compose により変更分のみが再生成されます。
• Web UI、プロジェクト履歴、ブランドキット、変更履歴との連携。
• ホスト型のパブリック MCP（docs/plans/public-mcp.md を参照）。

リリース済み：GitHub Action（CI での再レンダリング）、シネマティックな仕上げ（自動ズーム、スクロールのイージング、音楽のダッキング、イントロ／アウトロカード、モーションブラー、後処理でのカーソル制御）、ネイティブ／OBS キャプチャ、エージェントを問わず利用できる MCP サーバー とオーサリングガイド、ElevenLabs と プロセス内で動作するローカル音声プロバイダー、Claude Code プラグインです。

コントリビューション

Issue と PR を歓迎します。開発環境のセットアップ、スモークテスト、DCO サインオフ要件については CONTRIBUTING.md を参照してください。録画セッションに関するフィードバックは、aidemo feedback demos/<name> を実行すると、必要事項を記入した Issue が作成されるため、すばやく送信できます。

ライセンス

MIT © Andrii Taran