Remotion MCP Server

Description

Create videos programmatically with Claude Code using Remotion. This MCP server indexes Remotion's entire documentation into a vector database, giving Claude deep knowledge of Remotion's video framework. Build professional videos with React components, animated graphics, code visualizations, and more - all through natural language prompts.

Code

Skill Code

// Example: Ask Claude to create a video
"Create a 30-second intro video "keyword">for my app with:
- Animated logo reveal
- Feature highlights with text overlays  
- Smooth transitions between scenes
- Export as MP4 at 1080p"

// Remotion uses React components "keyword">for video
"keyword">const MyVideo = () => {
  "keyword">return (
    <Composition
      id="MyVideo"
      component={Main}
      durationInFrames={900}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Usage Examples

Examples

User: Create a product demo video showing my app's features

Claude: I'll create a Remotion video with the following structure:
1. Title slide with your app name (3 seconds)
2. Feature showcase with animated screenshots (15 seconds)
3. Call-to-action ending (2 seconds)

*Creates React components "keyword">for each scene*
*Configures transitions and timing*
*Renders to MP4*

User: Add background music and voiceover

Claude: I'll add an audio track and sync the visuals to the voiceover timing using Remotion's audio APIs.

Installation

Add the following to your CLAUDE.md file (project root or ~/.claude/CLAUDE.md for global):

CLAUDE.md

# Remotion Video Creation

Use the Remotion MCP server to create videos programmatically.

## Capabilities
- Create React-based video compositions
- Animate text, images, and graphics
- Add audio tracks and voiceovers
- Export to MP4, WebM, GIF
- Use Tailwind CSS for styling

## Tips
- Append .md to any Remotion doc URL for markdown
- Request text/markdown in Accept header for AI-friendly docs
- Use <Sequence> for timing, <Audio> for sound
- fps=30 is standard, durationInFrames = seconds * fps

Install the MCP server and add to your Claude Code settings:

MCP Configuration

{
  "mcpServers": {
    "remotion-documentation": {
      "command": "npx",
      "args": ["@remotion/mcp@latest"]
    }
  }
}

Run this command to install:

Terminal

npx @remotion/mcp@latest

Get the full source code and documentation on GitHub:

🔗 View on GitHub

Clone: git clone https://github.com/remotion-dev/remotion

Description

Code

Usage Examples

Installation

Comments (0)

Leave a Comment