Remotion Mcp

remotion-mcp

AI アシスタントが Remotion の動画を作成、編集、レンダリングできる MCP サーバーです。UI は必要ありません。

Claude、Cursor、Windsurf で、次のことができます。

• 🎬 MP4 動画、静止画（PNG/JPEG）、アニメーション GIF をレンダリング
• React/Remotion コンポーネントのひな形を作成して編集
• データ駆動型の動画生成向けに動的な inputProps を渡す
• プロジェクトのファイルツリーを確認し、コンポジションファイルを読み書き
• ジョブ ID を使って、時間のかかるレンダリングを非同期で追跡

初めての方は、Getting Started ガイドをご覧ください
実際の例をお探しですか？ Cookbook →をご覧ください — 正確なプロンプトを使った、手順ごとの動画チュートリアルです

Cookbook	作成するもの
01 — YouTube Intro	5 つのプロンプトで作成する、アニメーション付きタイトルカードの MP4
02 — Data-Driven Video	1 つのテンプレートを N 種類のデータセットでレンダリング
03 — Edit & Iterate	読み取り → 編集 → プレビューをすばやく繰り返すワークフロー

---

クイックスタート

🎥 実際の動作を見る

https://github.com/Vidhanvyrs/remotion-mcp/raw/master/examples/setupinide.mp4

前提条件

• Node.js ≥ 18
• Google Chrome がシステムにインストールされていること

Claude Desktop への追加

~/.config/claude/claude_desktop_config.json（Linux/macOS）または
%APPDATA%\Claude\claude_desktop_config.json（Windows）を編集します。

{
  "mcpServers": {
    "remotion": {
      "command": "npx",
      "args": ["-y", "remotion-mcp"]
    }
  }
}

Cursor / Windsurf / VS Code への追加

{
  "mcp": {
    "servers": {
      "remotion": {
        "command": "npx",
        "args": ["-y", "remotion-mcp"]
      }
    }
  }
}

エディターを再起動し、AI に 「~/my-video に Remotion プロジェクトを作成してレンダリングして」 と依頼します。

---

利用可能なツール

ツール	説明
init_remotion_project	React テンプレートを使って、新しい Remotion プロジェクトを作成
list_compositions	プロジェクトに登録されているすべてのコンポジションを一覧表示
list_project_files	プロジェクトのファイルツリーを返す（node_modules は除外）
get_composition_code	プロジェクト内の任意のソースファイルを読み取る
update_composition	任意のコンポジション／コンポーネントファイルに新しい内容を書き込む
add_component	新しいコンポーネントのひな形を作成（basic、animated、sequence テンプレート）
create_composition_scaffold	最小限のコンポジションファイルを作成
render_video	MP4 を非同期でレンダリングし、すぐに jobId を返す
render_still	1 フレームを PNG/JPEG/WebP としてレンダリング
render_gif	アニメーション GIF をレンダリング
get_render_status	非同期レンダリングジョブのステータス／進行状況を確認
query_remotion_docs	コード生成前に、正確な API シグネチャを確認するため、Remotion の公式ドキュメントを検索

---

ドキュメントに基づいた生成

remotion-mcp は、ライブ実行と公式ドキュメントに基づいた生成を組み合わせた唯一の Remotion MCP です。

AI アシスタントは、コンポーネントのひな形を作成したり、レンダリングを設定したりする前に、query_remotion_docs を呼び出して、公式の @remotion/mcp ドキュメントサーバーから最新の API シグネチャを取得できます。これにより、次のことが可能になります。

• 生成されるコンポーネントコードでは、古くなっている可能性のある学習データではなく、正確で最新の Remotion API が使われます
• codec、pixelFormat、crf などのレンダリングオプションは、実行前に実際のドキュメントに照らして検証されます
• レンダリングに失敗した場合、AI はエラーを調べて自己修正できます

これはソフト依存です。ドキュメントサーバーが利用できない場合、query_remotion_docs は役立つメッセージを表示して適切に機能を縮退し、ほかのツールは通常どおり動作します。

---

Chrome が検出されない場合

CHROME_EXECUTABLE 環境変数を設定します。

{
  "mcpServers": {
    "remotion": {
      "command": "npx",
      "args": ["-y", "remotion-mcp"],
      "env": {
        "CHROME_EXECUTABLE": "/usr/bin/chromium"
      }
    }
  }
}

---

HTTP ／クラウドモード

共有 HTTP サーバーとして実行します（チーム向け、またはホスト型デモ向け）。

MCP_MODE=http PORT=3000 npx remotion-mcp

Railway、Fly.io、Docker の手順については、DEPLOYMENT.md をご覧ください。

---

開発

git clone https://github.com/Vidhanvyrs/remotion-mcp
cd remotion-mcp
npm install
npm run dev          # run with tsx (no build needed)
npm test             # run smoke tests
npm run build        # compile to dist/

新しいツールの追加方法については、CONTRIBUTING.md をご覧ください。

---

ライセンス

ISC