Pagecast

Pagecast

English | 廣東話

AI によるブラウザー操作を、洗練された製品デモに変えます。

AI にアプリのデモを指示しましょう。Pagecast はブラウザーを記録し、すべてのクリックとキー入力を追跡して、ツールチップによるズームオーバーレイや映画のようなパン効果を加えた、すぐに公開できる GIF または MP4 を出力します。画面録画ソフトも、動画編集ソフトも、後処理も不要です。必要なら、PR のたびにデモ GIF を自動生成できます。

Pagecast を使わない場合 — 通常の画面録画では、デモを自分で操作して録画する必要があり、UI を変更するたびに録画をやり直さなければなりません。カーソルの動きは見えますが、実際の操作は小さすぎて確認できません：

Pagecast を使用した場合（ツールチップモード） — 操作のたびに拡大表示が現れるため、視聴者は実際に何が起きているかを確認できます。デモの内容を決め、新しいデモ GIF を自動生成します：

Pagecast を使用した場合（シネマティックモード） — カメラが各操作に合わせて切り抜きとパンを行い、デモの内容を決めて新しいデモ GIF を自動生成します：

Pagecast の使い方は 2 通り

1. 製品デモツール（主な用途）

ウェブアプリを作成し、README 用のデモ GIF が必要だとします。通常は、次の手順が必要です：

1. 画面録画ソフトを開き、デモを手動で操作する
2. 動画編集ソフトを開き、重要な部分を拡大する
3. エクスポートし、ffmpeg の使い方を調べ、ファイルサイズを最適化する
4. UI を変更したら、すべてをやり直す

Pagecast を使えば、AI に次のように指示するだけです：

"Record a demo of localhost:3000 for my GitHub README"

AI が実際のブラウザーを開いてアプリを操作し、操作のたびに自動ズームする洗練された GIF を出力します。UI を変更した場合も、再実行するだけです。デモが自動的に作り直されます。

2. 画面録画ツール（こちらも利用可能）

ズーム効果が不要な場合も、Pagecast は通常の画面録画ツールとして使えます：

"Record my app for 10 seconds and export as MP4"

AI が録画すると、.webm が生成され、最適化済みの .gif または .mp4 を取得できます。2 パスの ffmpeg パレット最適化、プラットフォームに応じたサイズ調整を、1 回のツール呼び出しで行えます。

エクスポートモード

モード	ツール	機能	最適な用途
ツールチップ	smart_export	ビューポート全体を表示しつつ、各操作の近くに拡大ツールチップを表示	README のデモ、製品ページ
シネマティック	cinematic_export	カメラが各操作に合わせて切り抜きとパンを行う	ソーシャルメディア、ドラマチックな見せ場
標準	convert_to_gif / convert_to_mp4	ズーム効果のない標準的な画面録画	バグ報告、QA の記録

出力先を伝えるだけ

ビューポートのサイズや形式を把握している必要はありません。AI に出力先を伝えるだけです：

"Record a demo for GitHub README"           → 1280×720 GIF
"Record my app for Instagram Reels"         → 1080×1920 MP4
"Make a TikTok demo of my dashboard"        → 1080×1920 MP4
"Record for YouTube"                        → 1280×720 MP4

プラットフォーム	サイズ	形式	アスペクト比
github / readme	1280×720	GIF	16:9
youtube / twitter	1280×720	MP4	16:9
reels / tiktok / shorts	1080×1920	MP4	9:16
instagram / linkedin	1080×1080	MP4	1:1
カスタム	任意のサイズ	任意の形式	任意

クイックスタート

Node.js ≥ 20 と ffmpeg が必要です。

# Add to Claude Code
claude mcp add pagecast -- npx -y @mcpware/pagecast

# Or run directly
npx @mcpware/pagecast

# Headless mode (no visible browser)
claude mcp add pagecast -- npx -y @mcpware/pagecast --headless

# First time: install browser
npx playwright install chromium

仕組み

You: "Record a demo of my app"
            ↓
AI → record_page(url, platform: "github")
    Opens Chromium (visible) at 1280×720
    Injects cursor highlight + click ripple
            ↓
AI → interact_page(click, type, hover...)
    Each action records bounding box + timestamp
            ↓
AI → stop_recording
    Saves .webm + timeline.json
            ↓
AI → smart_export (tooltip mode)
        or cinematic_export (crop-pan mode)
        or convert_to_gif (plain mode)
            ↓
    Shipping-ready .gif or .mp4

デモをプロらしく見せる機能：

• カーソルのハイライト — 赤い点がマウスを追跡し、視聴者が操作を追えるようにします
• クリックリップル — クリックのたびに視覚的なフィードバックを表示します
• ツールチップオーバーレイ — 操作の近くに拡大表示を出し、小さな矢印で操作箇所を指します
• シネマティックパン — easeInOut カーブを使い、操作対象間をスムーズに切り替えて切り抜きます

MCP ツール

ツール	機能
record_page	URL を開いて録画を開始します。カーソルのハイライトとクリック時の波紋を自動で追加します
interact_page	スクロール、クリック、ホバー、入力、キーの押下、選択、移動、waitForSelector を実行します。すべての操作がバウンディングボックス付きで記録されます
stop_recording	.webm と -timeline.json（操作位置を含むイベントタイムライン）を保存して録画を停止します
smart_export	ツールチップオーバーレイ — 各操作でツールチップを拡大して表示します
cinematic_export	シネマティックなクロップ＆パン — 操作対象の間をカメラが追従します
convert_to_gif	WebM → 最適化された GIF（ffmpeg の 2 パスパレット方式。FPS／幅／トリミングを設定可能）
convert_to_mp4	WebM → MP4（H.264。SNS での共有や埋め込みに対応）
record_and_export	オールインワン：録画し、プラットフォームに応じて GIF または MP4 に自動エクスポートします
list_recordings	出力ディレクトリ内のすべての .webm、.gif、.mp4 ファイルを一覧表示します

比較

	自動化	操作	デモのズーム	出力	AI 駆動	プラットフォームプリセット
Pagecast	✅	✅ クリック／入力／スクロール／ホバー	✅ ツールチップ＋シネマティック	GIF＋WebM＋MP4	✅	✅
Screen Studio	❌ 手動	❌	✅ カーソルベース	MP4	❌	❌
AutoZoom	❌ 手動	❌	✅ クリックベース	MP4	❌	❌
Playwright MCP	✅	✅	❌	生の .webm	部分対応	❌
gifcap.dev / Peek / Kap	❌ 手動	❌	❌	GIF	❌	❌
VHS (Charmbracelet)	✅ スクリプトによる自動化	ターミナルのみ	❌	GIF	❌	❌

Screen Studio と AutoZoom は優れたズーム機能を備えていますが、手動での録画が必要です。 Pagecast は、AI が録画を行い、デモ効果も自動で適用される唯一のツールです。

設定

設定	デフォルト	備考
ブラウザー	ヘッド付き（表示）	バックグラウンドで実行するには --headless を指定します
GIF FPS	12	数値を上げると滑らかになりますが、ファイルサイズも大きくなります
GIF 幅	800px	高さは自動調整されます
ツールチップの拡大率	1.6x	ツールチップの拡大率です
ツールチップのサイズ	380px	ツールチップの挿入領域のサイズです
シネマティックズーム	2.5x	カメラの拡大率です
ズーム遷移	0.35s	スムーズステップによるイーズイン／イーズアウトの時間です
カーソルオーバーレイ	オン	赤い点とクリック時の波紋効果
動画のビューポート	1280×720	または platform パラメーターを使用します
出力ディレクトリ	./recordings	上書きするには RECORDING_OUTPUT_DIR を設定します

アーキテクチャ

src/
├── index.js        # MCP server — 9 tools, platform presets, stdio transport
├── recorder.js     # Playwright browser lifecycle + sessions + event timeline
├── converter.js    # ffmpeg GIF/MP4 + tooltip overlay + cinematic zoom conversion
├── zoom.js         # Zoom engine — chains, panning, tooltip events, FFmpeg expressions
├── tooltip.js      # Tooltip PNG generator (rounded rect + arrow, pure Node.js)
└── remotion/
    ├── ZoomComposition.jsx  # React composition for cinematic zoom
    ├── Root.jsx             # Remotion entry point
    └── render.js            # Remotion CLI wrapper

• イベントタイムライン — すべての操作でバウンディングボックスとタイムスタンプを記録します
• カーソルオーバーレイ — 赤い点とクリック時の波紋をページに追加します
• ツールチップオーバーレイ — 方向矢印付きの見やすいツールチップ枠内に拡大表示します
• シネマティックズームチェーン — 近くにある操作をチェーン化し、ズームイン、パン、ズームアウトします
• スレッドセーフな FFmpeg 式 — マルチスレッドエンコードでもクロップフィルターが正しく動作します
• デフォルトでヘッド付き — AI の動作を確認できます
• exec ではなく execFile — シェルインジェクションを防ぎます

@mcpware のその他のプロジェクト

プロジェクト	機能	インストール
Instagram MCP	Instagram Graph API の 23 個のツール — 投稿、コメント、DM、ストーリー、分析	npx @mcpware/instagram-mcp
Claude Code Organizer	Claude Code のメモリー、スキル、MCP サーバー、フックを管理するビジュアルダッシュボード	npx @mcpware/claude-code-organizer
UI Annotator	あらゆるウェブページにホバーラベルを表示 — AI が要素を名前で参照できます	npx @mcpware/ui-annotator
LogoLoom	AI によるロゴデザイン → SVG → ブランドキット一式のエクスポート	npx @mcpware/logoloom

ライセンス

MIT