How to Make Videos with Cursor's AI Agent

Cursor is an AI-powered code editor. Its Agent can read project files, write code, run shell commands, and revise the files it creates. This makes Cursor useful for producing videos in code, with scenes, animations, captions, and rendering defined in project files.

For narrated explainers and product demos, explainroo is a practical kit for making videos in Cursor. This free, open-source kit lets a coding agent write the script, draw scenes, sync visuals with narration, add music and sound effects, and export an MP4 video on your computer.

You describe the video in Cursor, tell the Agent to use explainroo, and review the generated result. The Agent creates two important files:

• script.md, which contains the narrator’s spoken words
• scenes.js, JavaScript code that draws each scene and connects drawings to specific words in the script

The finished video is saved as videos/<name>/out/video.mp4. You still need to review it and request changes. explainroo handles the technical work by writing animation code, working with audio tools, and rendering the video.

Why Cursor works well for code-generated video

Cursor’s Agent is strongest when the video follows a repeatable structure. Explainer videos, product walkthroughs, launch announcements, tutorials, and feature demos fit that pattern because each scene has a defined purpose and can be described in text.

The Agent can write the scene code, run the necessary commands, inspect generated stills, and make revisions. Cursor’s own agent best practices emphasize giving the Agent a clear task and allowing it to work within the project files rather than asking for disconnected snippets.

Code-based video production also gives you editable source files. You can change the narration in script.md, adjust a scene in scenes.js, or change the visual style in video.json, then render the video again. This helps when a product screen, statistic, sentence, or call to action changes.

Another way to make videos with code is to use a React video framework such as Remotion. Remotion’s Cursor plugin and Agent Skills support this approach, but it takes more manual setup and human review. For narrated explainers and product demos, explainroo has a more direct workflow: it connects narration, word-level timing, scene rendering, audio, checks, and MP4 export.

Install the tools Cursor needs

explainroo runs locally, so the generated files and rendered video stay on your computer. Install these prerequisites first:

• Node.js
• ffmpeg to combine video and audio into the final file
• Chrome or Chromium to render each frame

During setup, explainroo downloads the voice and timing models. You do not need a graphics card. explainroo was developed and tested on Linux. It should also work on macOS and Windows, though it has had less testing on those platforms.

Clone the repository and run its setup commands:

cd explainroo
npm install
node bin/explainroo.js doctor --fetch

The doctor --fetch command checks the local setup and downloads the models used for voice generation and word timing. The explainroo documentation contains the current installation details if a dependency needs platform-specific configuration.

Ask Cursor to make the first video

Open the explainroo directory in Cursor and start an Agent conversation. Use this prompt, replacing the bracketed text with your subject:

Make me a short explainer video about [your topic]. Use explainroo for it: read its AGENTS.md and follow the steps.

If you have already cloned explainroo and opened its directory, the Agent can use that project. The prompt points it to the project instructions and gives it a specific task.

For a better first result, make the topic specific. Compare these requests:

Make me a short explainer video about databases.

Make me a short explainer video for junior web developers explaining why database indexes speed up lookups. Use one simple example, three scenes, and a clear summary.

The second request tells Cursor who the video is for and what it covers, while setting its scope and structure. You can also set its tone, visual style, and target platform. For specific assets, say whether to include a chart, code sample, or screenshot.

Cursor then asks explainroo to create the files, generate narration, render scenes, run checks, and produce an MP4. The Agent itself cannot watch the finished video like a person, so explainroo produces review material alongside the render.

How explainroo turns a script into a video

explainroo turns a script into a video in four steps: narration, timing, drawing, and assembly.

The script controls the narration

The Agent writes the spoken words to script.md. Kokoro, an open voice model, reads that script aloud. It provides English voices with American and British options, and it does not require an account or API key. Narration is English only.

Review script.md before spending time on visual changes. A sentence that is too long, vague, or dense will make the video harder to follow even if the animation is technically correct. Ask Cursor to shorten a section, replace jargon, or rewrite the opening for a specific audience.

Word timing controls the animation

Whisper listens to the generated recording and records when each word is spoken. Whisper is a speech recognition model, but explainroo uses it here as a timing reference.

That timing lets a drawing appear on a chosen word. For example, a diagram can appear when the narration says “request,” a highlighted code line can appear when the voice says “cache,” and an arrow can move when the explanation reaches the next step.

This timing removes the need to guess when an animation should start. If you change the script, explainroo can generate new timings to keep each scene in sync with the narration.

JavaScript draws each scene

The Agent writes scenes.js with instructions for drawing scenes. Chrome runs in the background and renders each frame on an HTML canvas, a browser drawing surface that JavaScript can update frame by frame.

Scenes can include:

• Hand-drawn lines made with Rough.js
• Icons from the Lucide library
• Charts and diagrams
• Code
• Your own screenshots
• Product interface recreations

explainroo supports five visual looks: paper, clean, chalk, blueprint, and midnight. Change the selected look in video.json instead of rewriting every scene.

ffmpeg creates the MP4

explainroo generates background music and adds sound effects to each video. It lowers the music while the narrator speaks. Then ffmpeg combines the rendered frames, voice, music, and effects into an MP4 file.

The final file appears at:

videos/<name>/out/video.mp4

Create a product demo from Cursor

explainroo can create product demos from an application’s code or website. Tell Cursor which product to demonstrate and where its code or website is located.

The Agent rebuilds the product’s screens with matching colors, fonts, and button labels. It can also create a mouse pointer that clicks through screens and types into fields while the narration explains the workflow.

A useful request names the audience and the exact path through the product:

Make a product demo of [product name] for first-time users. Show how to create a project, add a data source, and export the result. The product code is at [local path or website]. Use explainroo and keep the narration focused on the three actions.

Before rendering, check that the requested flow matches the current product. If the website or source code has changed, tell Cursor which screen or behavior to update.

Choose the right video size

Set the output size according to where the video will appear:

• Wide format for YouTube
• Tall format for YouTube Shorts, TikTok, and Instagram Reels
• Portrait format for posts on Instagram and LinkedIn
• Square format for square placements

Tall videos keep text away from the areas where platform buttons appear. Tall, 4:5, and square videos also receive captions that light up word by word.

Ask Cursor to target the platform in the initial prompt. For example:

Make a vertical explainer video for YouTube Shorts about [topic]. Keep each scene readable on a phone and use short caption-friendly sentences.

Designing for the final size from the beginning is more reliable than trying to crop a wide composition later. A diagram with several side-by-side elements might work in a wide frame but become unreadable in a vertical frame.

Control the pace without rewriting every scene

The pace setting in video.json controls voice speed, pauses, and animation speed.

Use a lower value when the topic contains unfamiliar terms, code, or dense diagrams. Use a higher value when the video has short statements and simple visuals. Ask Cursor to change the setting after reviewing the full render rather than speeding up a single scene in isolation, because narration and animation timing are linked.

For example:

Set the video pace to 0.9 so viewers have more time to read the code and captions. Re-render and run the checks again.

Review the video with explainroo’s checks

A successful render shows that the files ran. It does not show whether the message is clear or every scene looks good.

explainroo gives the Agent several ways to inspect the result:

• Still images of each scene
• A contact sheet with many small frames
• A layout check that looks for cut-off or overlapping text
• A speech check that finds words the voice pronounced incorrectly

The Agent cannot watch the video, so use the stills and contact sheet to identify problems, then open the MP4 yourself. Check whether the opening communicates the subject quickly, whether text remains readable at the target size, and whether the narration matches the visual emphasis.

If the result needs work, give Cursor one focused revision at a time:

The second scene contains too much text. Rewrite that scene with one sentence and one diagram. Keep the same narration topic, regenerate the timing, and render again.

Small, specific requests make debugging easier. You can also edit script.md or scenes.js directly when you know the exact change.

What Cursor and explainroo do not replace

This workflow is designed for generated explainers and product demonstrations. explainroo does not edit existing camera footage, create talking avatars, or generate live-action video. It also has no drag-and-drop editor. You describe the video to Cursor and ask the Agent to modify the project.

Choose a production method based on the kind of video you need. Coding agents handle structured scenes and repeated layouts well. They need more guidance for subtle pacing, music choices, or compositions built around real footage. Research on Remotion and coding agents reaches a similar conclusion: agents are useful for templated output, while visual judgment still requires a person.

Optional AI illustrations are available through OpenRouter and are paid for per image. Everything else in explainroo costs nothing per video, while Cursor or another coding agent remains a separate service with its own pricing.