remotion-mcp

MCP server that lets your AI assistant create, edit, and render Remotion videos — no UI needed.

Give Claude, Cursor, or Windsurf the ability to:

• 🎬 Render MP4 videos, stills (PNG/JPEG), and animated GIFs
• Scaffold and edit React/Remotion components
• Pass dynamic inputProps for data-driven video generation
• Inspect project file trees and read/write composition files
• Track long renders asynchronously via job IDs

New here? Read the Getting Started guide
Want real examples? Check out the Cookbook → — step-by-step video tutorials with exact prompts

| Cookbook | What You Build | |----------|---------------| | 01 — YouTube Intro | Animated title card MP4 in 5 prompts | | 02 — Data-Driven Video | Render one template with N different datasets | | 03 — Edit & Iterate | Fast read → edit → preview loop |

Quick Start

🎥 See it in action

Prerequisites

• Node.js ≥ 18
• Google Chrome installed on your system

Add to Claude Desktop

Edit ~/.config/claude/claude_desktop_config.json (Linux/macOS) or
%APPDATA%\Claude\claude_desktop_config.json (Windows):

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

Add to Cursor / Windsurf / VS Code

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

Restart your editor and ask your AI to "create a Remotion project at ~/my-video and render it".

Available Tools

| Tool | Description | |------|-------------| | init_remotion_project | Bootstrap a new Remotion project with React templates | | list_compositions | List all registered compositions in a project | | list_project_files | Return the file tree of a project (ignores node_modules) | | get_composition_code | Read any source file in a project | | update_composition | Write new content to any composition/component file | | add_component | Scaffold a new component (basic, animated, or sequence template) | | create_composition_scaffold | Create a bare-minimum composition file | | render_video | Render an MP4 asynchronously — returns a jobId immediately | | render_still | Render a single frame as PNG/JPEG/WebP | | render_gif | Render an animated GIF | | get_render_status | Poll the status/progress of an async render job | | query_remotion_docs | Query the official Remotion documentation for accurate API signatures before generating code |

Documentation Grounding

remotion-mcp is the only Remotion MCP that combines live execution with official documentation grounding.

When your AI assistant is about to scaffold a component or configure a render, it can call query_remotion_docs first to fetch the exact, current API signatures from the official @remotion/mcp docs server. This means:

• Generated component code uses correct, up-to-date Remotion APIs — not potentially stale training data
• Render options like codec, pixelFormat, and crf are validated against real docs before execution
• If a render fails, the AI can look up the error and self-correct

This is a soft dependency — if the docs server is unavailable, query_remotion_docs degrades gracefully with a helpful message and your other tools keep working normally.

Chrome Not Detected?

Set the CHROME_EXECUTABLE environment variable:

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

HTTP / Cloud Mode

Run as a shared HTTP server (for teams or hosted demos):

MCP_MODE=http PORT=3000 npx remotion-mcp

See DEPLOYMENT.md for Railway, Fly.io, and Docker instructions.

Development

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/

See CONTRIBUTING.md for how to add new tools.

License

ISC