Remocn: Remotion MCP server

Remocn

Remocn is a copy-paste component library for building videos in Remotion. Instead of writing every fade, wipe, and kinetic title from scratch, you npx shadcn add a polished primitive into your project and own the code. Built for solo builders and small teams who need a product demo video shipped today, not next week.

Rather direct the video than write it? Remocn Studio is a free, open-source macOS app where your own coding agent (Claude Code, Codex, GitHub Copilot or Grok) builds the video from Remocn components while you watch the live preview.

Why Remocn

Production-ready Remotion code: every component uses useCurrentFrame(), interpolate(), and spring() correctly. No Math.random() traps that break rendering. Own your code: components are copied into your project, not installed as a dependency. Tweak them however you like. Live previews: each component page mounts a real @remotion/player you can scrub frame-by-frame

Installation

Remotion is a prerequisite — set up a Remotion project first if you don't have one (npx create-video@latest). Then add any component from the registry:

npx shadcn@latest add @remocn/blur-reveal

Setup with AI

You need two things: an AI coding agent and an empty folder.

1. Get an agent. We recommend Claude Code, also works with ChatGPT, Opencode and others. 2. Open the agent in an empty folder and paste:

Set up a new Remotion video project in this folder, then install the remocn agent skill: npx skills add Remocn/remocn --yes. When you're done, start the preview studio so I can watch the video while we work

When a browser tab opens with an empty video player, you're ready. Pick a guide and make it yours.

Plugin for Claude Code and Codex

The remocn plugin bundles the skill with a /remocn:video workflow: brief → storyboard → install → compose → visual check → open in Remocn Studio.

/plugin install remocn --marketplace Remocn/remocn

In Codex: codex plugin marketplace add Remocn/remocn, then codex plugin add remocn@remocn.

Remotion MCP server (hosted)

Remocn runs a hosted MCP server for making videos with Remotion at https://remocn.dev/mcp. Add the URL to Claude Code, Cursor, Codex or any MCP client. There's no API key and no account.

URL	https://remocn.dev/mcp
Transport	Streamable HTTP
Auth	None
Access	Read-only; it does not render video
License	MIT, free
Clients	Claude Code, Claude Desktop and claude.ai, Cursor, VS Code, Codex, any Streamable HTTP client

Tools:

• search_components: find Remocn components by query, vibe or length in frames
• get_component: one component's docs as Markdown: props, usage example, install command
• plan_video: turn a brief into a beat-by-beat storyboard with component picks
• preview_component: a live preview link, played inline in clients that support MCP Apps

Claude Code:

claude mcp add --transport http remocn https://remocn.dev/mcp

Codex:

codex mcp add remocn --url https://remocn.dev/mcp

Cursor (.cursor/mcp.json):

{
  "mcpServers": {
    "remocn": { "url": "https://remocn.dev/mcp" }
  }
}

Your agent installs what it picks with npx shadcn@latest add @remocn/<name>, and you render with Remotion as usual. The plugin above already includes the server. Setup for every client: MCP server docs.

Sponsors

Remocn is free and MIT-licensed. These sponsors keep the registry growing and the renders fast.

Become a sponsor to get your logo on the landing page, in the docs sidebar and here.