Claude Code + Remotion: How to Make a Video with an AI Coding Agent (Step by Step)

Quick answer: create a Remotion project with npx create-video --yes --blank my-video, add Remotion’s official Agent Skills with npx remotion skills add, start the preview with npm run dev, and then run claude (or codex) in the same folder and describe your video. Claude Code writes the React code, Remotion Studio shows the result live, and npx remotion render turns it into an MP4. These steps come straight from Remotion’s Claude Code guide.

What is Claude Code + Remotion, and what is it good for?

Remotion is an open-source framework for making videos with React. Every frame is a web page that Remotion renders and encodes. Claude Code, Codex and similar agents are good at writing that code, so you can describe a video in plain language and get editable source back.

Good fits:

• product demos and launch videos built from your own UI and logo
• animated captions and subtitles
• explainers, charts, maps and kinetic typography
• templated videos you regenerate with new data

Poor fits: photoreal people or scenes. Those need a generative model, such as the ones in our image-to-video guide.

It’s also not a Claude Code feature. The skills come from Remotion itself and work across several coding agents, including Claude Code, Codex and Cursor, a point one widely shared post on X also made (@iambakhtier).

What do you need before you start?

• Node.js. Remotion’s guide lists it as the only system prerequisite besides the agent (Remotion).
• A coding agent: Claude Code, Codex, Kimi Code or OpenCode. Remotion notes that “most coding agents require a paid subscription”. For Claude, compare the options in Claude Pro vs Max vs API. If you want to bill through the API, see how to get a Claude API key.
• Your assets in one folder: logo, screenshots, fonts, music and voiceover.
• A license check if you work for a company (see below).

How do you set it up, step by step?

1. Create a blank Remotion project

npx create-video --yes --blank my-video
cd my-video

2. Add Remotion’s Agent Skills

npx remotion skills add

This installs Remotion’s skills into the project. They include /remotion-best-practices (covers everything), /remotion-create, /remotion-markup, /remotion-studio, /remotion-render, /remotion-captions, /remotion-maps and more (Remotion Agent Skills). The same set is on GitHub as remotion-dev/skills and can also be installed with npx skills add remotion-dev/skills.

Claude Code loads project skills from .claude/skills/ and lets you call them as /skill-name (Claude Code docs).

3. Start Remotion Studio

npm run dev

Studio is the live preview. Leave it running.

4. Start your agent in a second terminal

cd my-video
claude    # or: codex / kimi / opencode

5. Prompt the video

Be specific about length, size, scenes and assets. For example:

/remotion-create Make a 20-second 1080x1920 launch video for our app. Use the logo in public/logo.svg and the three screenshots in public/screens/. Scene 1: logo reveal. Scenes 2–4: one screenshot each with a short caption. End card with the URL. Background music from public/music.mp3, fading out at the end.

Users report that vague prompts give weak results. One Claude Code user says good results came only after writing a detailed, well-explained prompt and supplying plenty of assets (@sandeepdev_code).

6. Iterate in Studio

Watch the preview and ask for changes one at a time (“make scene 2 slower”, “use the brand blue”). If elements can’t be selected in Studio, Remotion’s /remotion-interactivity skill is meant for that (Remotion Agent Skills).

7. Render the MP4

Ask the agent to run /remotion-render, or run the CLI yourself:

npx remotion render

If you don’t pass a composition ID, Remotion asks you to pick one. Output goes to the out folder by default, encoded as H.264 unless you set --codec (Remotion CLI).

Which Claude model should you use?

Use the strongest coding model your plan allows for the first build, then a faster one for small edits. As of October 2026, Anthropic’s models overview suggests starting with Claude Opus 5.5 (released September 22, 2026) for most workloads, describing it as built for long-running agentic coding, and lists Claude Fable 5.1 for the most demanding long-horizon work (Anthropic announcement, Claude models overview). Model choice affects how much of your usage each session takes, and video projects tend to involve many rounds of changes. Claude Pro vs Max vs API explains how the limits work.

Can you edit real footage this way?

Yes, with extra tools. A common pattern is to give the agent FFmpeg alongside the Remotion skill, so it cuts pauses and adds captions, then uses Remotion for graphics. One user describes keeping the raw footage, music, logo and written instructions together in a single folder, then asking Claude to remove the pauses and add captions (@TawohAwa). Open-source skills built for editing are listed in our open-source AI video skills directory.

What about HyperFrames instead of Remotion?

HyperFrames is HeyGen’s open-source (Apache-2.0) alternative. You write plain HTML instead of React. Its README gives a Claude Code plugin install:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

You then call it with /hyperframes:hyperframes. It requires Node.js 22+ and FFmpeg. Both tools render with headless Chrome and FFmpeg; the main difference is React components versus HTML (HyperFrames README).

Is Remotion free for commercial use?

It depends on who you are. Remotion’s LICENSE.md says you can use it for free if you are:

• an individual
• a for-profit organization with up to 3 employees
• a non-profit or not-for-profit organization
• evaluating Remotion and not yet using it commercially

For-profit organizations above that size need a company license. The terms and the license options are on remotion.dev/docs/license. HyperFrames is Apache-2.0.

What if something breaks?

The most common problems are render failures, a missing browser or FFmpeg, slow renders and fonts that don’t load. Start by asking the agent to read the error and use the /remotion-docs skill to look up the current API (Remotion Agent Skills). If the agent’s own API calls fail with 401 or 429, see fix AI API errors.

Next: browse the open-source video skills for Claude Code and Codex, or go back to the AI video tools hub.