AIOProductOS Studio

AIOProductOS Studio · MCP

AI のチームメイトがプロダクトのビデオグラファーになります。Studio は、お客様自身のウェブアプリの台本付きウォークスルーを記録する MCP サーバーです。画面上のカーソルがすべてのクリック位置へ滑らかに移動し、カメラがズームインし、ハイライト付きの吹き出しやストーリー仕立てのキャプション、演出されたシーン切り替えを加え、マーケティング品質のスクリーンショットも撮影します。どんなストーリーを撮影するか AI ホストに伝えるだけで、共有可能な MP4 が手に入ります。

PM が作るのを嫌がる動画――デモクリップ、解説動画、変更履歴の GIF、ローンチ用スクリーンショット――が、ひとつのプロンプトで作れます。

無料 · MIT · 100％ローカルで動作（お使いのブラウザー、ご自身の URL、ログイン済みのセッションを使用します。どこにもアップロードされません）。AIOProductOS が提供しています。自社のローンチ動画にも使っているものと同じパイプラインを使用して構築されています。

インストール

# Claude Code
claude mcp add studio -- npx -y @aioproductoscom/mcp-studio

# Cursor / Codex — .mcp.json
{ "mcpServers": { "studio": { "command": "npx", "args": ["-y", "@aioproductoscom/mcp-studio"] } } }

必要なもの：Node 18 以降、Playwright Chromium（npx playwright install chromium を一度実行）、MP4／GIF のエクスポート用の ffmpeg（PATH 上にあること。brew install ffmpeg）。ffmpeg がなくても、元の WebM は取得できます。

使い方

あとは、撮影内容を指示するだけです。

「https://app.example.com の30秒のウォークスルーを撮影してください。ブランドに合わせたテーマにして（背景色は #0d1117、アクセントカラーは #f97316）、タイトルを『Meet Example』にしてダッシュボードから始め、3つの主な機能にキャプションを付け、分析チャートにズームインして、『Start free · example.com』で終わってください。ヒーロー画像のスクリーンショットも撮影してください。」

ホストがツールをひとつずつ実行して撮影します。ファイルは ./studio-output/ に保存されます。

ツール

ツール	機能
studio_start	テーマを設定した録画用ブラウザーを開きます（ビューポート、ブランドカラー、ログイン状態）
studio_goto	演出されたタイトルカードの背後でページに移動します。映像に読み込み中のちらつきが入りません
studio_click / studio_type	カーソルが対象まで滑らかに移動します。入力は人間のペースで行われます
studio_scroll	3次イージングでスクロールします。ジャンプカットはありません
studio_caption	左下にストーリー仕立てのキャプションを表示します（テキストによる「ナレーション」）
studio_narrate	画面上にキャプションを表示せず、音声ナレーションを加えます。ナレーションの間、映像を維持します
studio_highlight	任意の要素や表示テキストの周囲に、アクセントカラーのリングとラベル付きの吹き出しを表示します
studio_zoom	指標、ボタン、結果に向けてカメラを滑らかにズームインします
studio_hold	映像を維持します（微細なドリフトでフレームの流れを保ちます）
studio_end_card	タイトル、サブタイトル、CTA URL を表示する、ガラス調のエンドカードを表示します
studio_screenshot	フレーム、要素、ページ全体を高 DPI の PNG で撮影します
studio_finish	撮影を終了し、暗いフレームを自動削除して、MP4（任意で GIF も）にエクスポートします
studio_cancel	撮影を中止します

ログインが必要なエリアの撮影

Studio が認証情報を見ることはありません。Playwright の storageState を一度保存し（npx playwright codegen --save-storage=auth.json https://app.example.com）、studio_start に storage_state_path: "auth.json" を渡してください。

映像に不要なものを映さない

• クッキーバナーが表示されますか？ 同意済みの Cookie を cookies に渡せば、表示されなくなります。
• チャットバブルや開発用オーバーレイが表示されますか？ セレクターを hide_selectors に指定すれば、最初のフレームから非表示になります。
• ページ読み込み時のフラッシュ色が合いませんか？ theme.bg にアプリ本来の背景色を設定してください。

きれいな映像になる理由（試行錯誤でたどり着いた部分）

ページを切り替えても白くちらつかず（ページの CSS が適用される前にテーマの背景色を描画します）、黒いフレームも入りません（ページ遷移は演出されたタイトルカードの背後で行われ、残った暗いフレームは ffmpeg で検出して確実にカットします）。映像がぎくしゃくすることもありません（カメラの動きはすべて、コンポジターに適したイージングで行われます）。アクションも映像でわかりやすく伝わります（操作の前に、画面上のカーソルがすべての対象まで滑らかに移動します）。

リンク

• ウェブサイト： aioproductos.com
• その基盤となる製品： AIOProductOS — フィードバック、収益、作業、コードを1つの顧客レコードにまとめる、プロダクト OS です。Studio は無料で、私たち自身のローンチ動画の制作にも使っています。
• その他の MCP： @aioproductoscom/mcp（ワークスペースコネクター） · @aioproductoscom/mcp-agent（担当を割り当てられるコーディングチームメイト）
• サポート： [email protected] — すべてのメールに創業者本人が返信します。

MIT © AIOProductOS Inc.