An MCP App for AI-powered video creation. It combines an MCP server with an interactive View — the model writes React/Remotion code, the server compiles it in real-time, and a live video player renders the result directly inside the chat.
Unlike a standard MCP server that only returns text, an MCP App bundles a full UI View alongside its tools. The Remotion Player View renders inline in any compatible client (ChatGPT, Claude, or custom apps built with mcp-use), giving the model a visual canvas it can iterate on.
Connect to the hosted instance:
https://still-feather-l5mwy.run.mcp-use.com/mcp
- Open Settings > Apps and Connectors > Advanced Settings and enable Developer Mode
- Go to Connectors > Create, name it "Remotion", paste the URL above
- In a new chat, click + > More and select the Remotion connector
Requires ChatGPT Pro, Team, Enterprise, or Edu. Full guide
- Open Settings > Connectors > Add custom connector
- Paste the URL above and save
- The Remotion tools will be available in new conversations
Requires Claude Pro, Max, Team, or Enterprise. Full guide
Click the previews above to watch the full demos.
This is an MCP App — an MCP server paired with a UI View. The two pieces work together:
- MCP Server -- exposes
create_videotool + rule tools for teaching Remotion patterns - View -- a Remotion Player that renders inline in the chat and receives compiled bundles from the server
The flow:
- The model calls
create_videowith React/Remotion source files - The server compiles the project with esbuild (sub-second)
- The compiled bundle is sent back as
structuredContent, and the View renders it as a playable video - For edits, the mounted View exposes
update_video; it sends only changed files through the server compiler and swaps the player in place
Model MCP App (Server + View)
| |
|-- create_video({files}) ->|
| |-- esbuild compile
|<- structuredContent -----|
| |-- View renders video inline
| |
|-- update_video({edits}) ->| (View tool)
| |-- create_video merges + recompiles
| |-- existing View swaps the player in place
The server exposes one model-visible tool, create_video, for the initial composition. Once its View is mounted, the View exposes an ephemeral update_video tool. That tool reuses the server compiler, merges only the changed files with the current session project, and replaces the mounted player without creating another View result.
The server includes teaching tools derived from the remotion-best-practices skill that the model can call to learn Remotion patterns:
| Tool | Topic |
|---|---|
rule_react_code |
Project structure, imports, entry file contract |
rule_remotion_animations |
useCurrentFrame, frame-driven animation |
rule_remotion_timing |
interpolate, spring, Easing configs |
rule_remotion_sequencing |
Sequence, scene management, duration |
rule_remotion_transitions |
TransitionSeries, fade, slide, wipe |
rule_remotion_text_animations |
Typewriter effect, word highlighting |
rule_remotion_trimming |
Trimming with negative Sequence from |
The Remotion Player View is what makes this an MCP App rather than a plain MCP server. It runs inside the chat interface and features:
- Live video playback with controls
- Animated loading state with shader gradient while the model writes code
- Editing overlay (blur + gradient) when updating an existing video
- Ephemeral
update_videoView tool for in-place agent edits - Fullscreen mode
- Error display with compilation error details
- Node.js 22.22.2+
- npm or pnpm
git clone https://github.com/mcp-use/remotion-mcp-app.git
cd remotion-mcp-app
npm install
npm run devnpm run dev builds the View inline before opening the embedded Inspector. This keeps the v2 View compatible with the Inspector sandbox, so the animated gradient loading state mounts instead of getting stuck on the host's fallback Compiling... spinner. Use npm run dev:hmr when testing outside that embedded sandbox and Vite hot reload is more useful.
The server starts at http://localhost:3000/mcp.
Point any MCP client at http://localhost:3000/mcp. For example with mcp-use:
{
"mcpServers": {
"remotion": {
"url": "http://localhost:3000/mcp"
}
}
}npm run build
npm run deployindex.ts -- MCP server, tool definitions, handler
utils.ts -- esbuild compilation, session state, response helpers
types.ts -- Shared types (VideoProjectData, VideoMeta)
rules/ -- Remotion teaching content served by rule tools
views/remotion-player/ -- MCP App View (React + Remotion Player)
view.tsx -- Main View component
types.ts -- Browser-only View types and runtime constants
components/
CodeComposition.tsx -- CSP-safe blob module compiler + runtime shim
create_video({
files: string, // REQUIRED -- JSON string of {path: code}
entryFile?: string, // Default: "/src/Video.tsx"
title?: string,
durationInFrames?: number, // Default: 150
fps?: number, // Default: 30
width?: number, // Default: 1920
height?: number, // Default: 1080
})The files parameter is a JSON string mapping virtual file paths to source code:
{
"/src/Video.tsx": "import {AbsoluteFill} from \"remotion\";\nexport default function Video() { return <AbsoluteFill />; }"
}- ChatGPT conversations maintain isolated project state; other clients fall back to caller or transport identity
- Calling
create_videomerges new files with the previous project - Metadata (title, fps, dimensions) carries forward unless overridden
- Sessions are capped at 250 concurrent projects with LRU eviction
MIT -- see LICENSE for details.
Note: Remotion is a dependency with its own license. Free for individuals and companies with up to 3 employees. Larger organizations need a company license.
Built with mcp-use and Remotion. Rule tools adapted from the remotion-best-practices skill by Remotion.