I always believe, picture worth thousand words and video worth even more when it comes to do tutorials.
Recently I found a tool called Remotion.
Remotion is a short video generating app which uses React at the core. It is programmatic way to generate videos. Because it is programmatic, it works well with AI agents. This is why it has got my attention.
Therefore, in blog I'm going to show how remotion can be used with Claude.ai.
Since we are going to use Remotion with Claude.Ai, we need Claude code installed on the machine we are intended to use Remotion. Note that Claude code require paid subscription to work.
Another pre-requisite is Node.js. Install the latest Node.js (remotion will require v16 or higher).
Installation
Create a folder for your project and open that folder using terminal.
Type following:
npx create-video@latest
Follow the wizard in terminal.
Wizard will ask you to choose a template, choose the blank template as we ae just getting started and we intend to use this with Claude code.
Wizard will ask you to install TailWindCSS or not. For our beginner project, I would say no. But it is completely optional, choosing yes is also ok, but add more complexity.
Next question is "Add agent skills?". Definitely answer yes for this question.
You will be asked to choose which agent to get skills installed for. For us it is Claude code.
Then you will require to choose installation scope. I would keep it to project. You can choose Global if you prefer to install it once.
Installation method for skill is "Symlink"
Then wizard will install the skills and complete the installation.
Next step is to install all packages. To this run following:
npm i
Once all packages are installed, you can run the app using following command:
npm run dev
There will be nothing as we haven't add any frames.
Setting up Claude Code
Next step is to run Claude code on the projects folder.
Assuming you are still on the project folder in terminal type following to invoke Claude Code:
Claude
Assuming everything is setup correctly on Claude code, above will open Claude code in project folder.
run /init to initialize Claude code for the project. This will read the content of the folder and add the remotion skill and will create claude.md file for the project. Once this is done Claude is ready for your instructions.
Prompt
Now you provide the prompt to Claude code to build the video. More elaborate the prompt is more sophisticate your video will be.
To make this demo easier, I have asked following from Claude.ai (chat box) and create the prompt for me.
Create a prompt which I can give for Claude code to create simple video tutorial for SQL Server Constraint types using "Remotion". This is for remotion project. See remotion information on https://www.remotion.dev/ . SQL server Constraint video should be based on following blog post -> https://mpa-tech-tales.blogspot.com/2026/05/all-constraints-in-sql-server.html . It should have attractive opening screen and then will need several animating screens based on sections of the blog post. For example it should show a one animation screen explaining what are sql server constraints and then transit from that screen to next screen to show primary key constraints and related animations. Can you please generate the prompt for this?
It has created very comprehensive prompt, which I can paste or give Claude Code as a md file.
If the prompt is so big, it is advisable to instruct Code Claude to proceed phase by phase (after validating output of each phase). This will make sure Claude keep on the track we wanted instead of what it wanted.
Here is the first draft of the video created by Claude Code and remotion, using above prompt. It is not any mean polish video I wanted, but you can keep refine it with Claude Code to make it more preferable.
In my opinion (as per now), Remotion + Claude can create you basic animation videos which you can use for tutorials or presentations. I think more appropriate use case is use it to create short animations which can be embedded/merge into your overall video, rather than making entire video from Remotion + Claude.
No comments:
Post a Comment