Skip to content

Code-based video generation

Every frame of your product is a real capture, never a generated mockup.

Demo videos and launch films for developers, short STEM lessons for educators, all driven by your coding agent over MCP.

Apache 2.0 licensed. No account and no API key. Renders through Remotion, which has its own license.

render_video 1920x1080 · 30fps · 495/495 · output/demo.mp4_

Three kinds of video

Developers get demos and director mode. Educators get Supernova. All three run on one server and one set of tools: you tell your agent which kind you want, and it follows that kind's process.

The defaultFor developers

Demos of your product

Your agent opens your running app in a real browser, films what it does, and cuts the clips to a plan you approved first. Every pixel of the product is a capture, so a viewer can trust what they read in it.

  • A browser, a desktop app, a phone or a terminal
  • A README GIF up to a few minutes, widescreen or vertical
  • The whole plan shown to you, and a yes before anything is saved
How a demo is made
Director modeFor developers

Launch films, directed

Ask for the peak or mid creative level and the agent writes a brief before it builds anything: the story, the one feeling, and a shot list that marks each shot real or constructed. Then it moves the camera on purpose, picks a transition for every cut and scores the film.

  • Named camera moves, handheld sway and real depth layers
  • Cut, whip, fade, push, wipe or light leak on each beat
  • An original score with no drums, so nothing ticks under the voice
What director mode adds
SupernovaFor educators

Lessons that explain one idea

A script-first mode for maths, physics and computer science. One concept in up to two minutes, vertical, in the same seven beats every time: a hook that names the chapter, a diagram, a derivation built line by line, a worked example and a closing question.

  • Each equation carries the words the voice says, and a linter checks they match
  • Pictures drawn from code that follow the narration word by word
  • Built and tested. The first published lessons are still to come
How lessons work

How a demo is made

Your agent works through five steps in order, calling the tool named under each. There is no separate app to open and no timeline to drag. Director mode adds a written brief and a camera plan to the same steps. Lessons start from a script instead, and have their own page.

  1. 01

    Draft the beats

    validate_beats

    Your agent runs the guided intake and writes a beats.json: timing, narration, and a decided capture method for every beat. It shows you the whole draft and waits for approval before anything touches disk.

  2. 02

    Capture the real app

    capture_screenshot

    Playwright drives a real browser against your running app and takes zoom compensated screenshots and full viewport recordings. This is the step that makes the footage real rather than imagined.

  3. 03

    Scaffold each shot

    scaffold_scene

    One scene per beat, generated with camera keyframes already in place. The camera lives inside the UI, zoomed in and moving, never parked on a flat full screen grab.

  4. 04

    Stitch the timeline

    stitch_composition

    Scenes get sequenced against the beats file, with narration and a music bed layered in if you provided them. Sound effects land on the visual events rather than on a guess.

  5. 05

    Render and check

    render_video

    Remotion renders the mp4, then frames come back out at each beat so you can check text is crisp, captions are visible and nothing important drifted off frame.

Real output

Every frame in these is a capture of software that actually exists and actually runs. Press play on any of them.

oss-launch

11s

repo scaffolding tool

TourneyRadar

14s

chess tournament finder

Read what each one is showing

Two tiers

Nearly every beat comes from your product's real UI. One kind of shot genuinely cannot: a beat with no product UI in it at all. That single gap is what the optional tier covers.

Always on

$0

Core pipeline

Free, no account, no key.

  • Built on Remotion, under its own license, and Playwright, under Apache 2.0
  • Real screenshots and real screen recordings of your running app
  • Driven through MCP, so Claude Code, Cursor or any MCP client can run it
  • No cost from openvidstudio beyond your own compute
Opt in

Higgsfield b roll

For the shots real capture cannot produce.

  • Atmosphere and b roll only: a desk shot, an establishing texture
  • Never carries on screen product text or real UI
  • Needs your own Higgsfield subscription and its MCP connector
  • openvidstudio never holds a key and never bills you

openvidstudio only imports a clip your agent already generated. It never calls Higgsfield's generation tools itself.

Get running

Add it to your agent, restart it, and ask for a video. Check prerequisites first if you have not run Playwright or ffmpeg on this machine before.

  1. 01

    Add it to your agent

    Pick the line for where you use your agent. Claude Code installs a plugin that brings the server and the skills together; every other client takes one config block.

    Claude Code, the Claude desktop Code tab, Cowork

    Install the plugin. It registers the server and the four openvidstudio skills together, and updates with one command. From a shell, run the same two with claude plugin in place of /plugin.

    in a session
    /plugin marketplace add AnayDhawan/openvidstudio
/plugin install openvidstudio@openvidstudio

    The first start installs the server once (about 330 MB, about a minute) in the background, so the tools can take a minute to appear. Later starts are instant and work offline.

    Claude Desktop, the Chat tab

    Chat loads a plugin's skills but not its local server, so the tools come from the app's own config file. This writes it. Quit Claude completely and start it again.

    shell
    npx -y @openvidstudio/mcp-server install claude-desktop

    It adds only the openvidstudio entry, keeps your other servers, and saves a backup of the file first. Then restart the app.

    Cursor and VS Code

    One command each. Cursor gets the global config; VS Code gets this folder's .vscode/mcp.json.

    shell
    npx -y @openvidstudio/mcp-server install cursor
npx -y @openvidstudio/mcp-server install vscode

    It adds only the openvidstudio entry, keeps your other servers, and saves a backup of the file first. Then restart the app.

    Any other MCP client

    Add this to the client's mcpServers block and restart it. The client starts the server with npx, so there is nothing to clone or build.

    mcp.json
    {
  "mcpServers": {
    "openvidstudio": {
      "command": "npx",
      "args": ["-y", "@openvidstudio/mcp-server"]
    }
  }
}

    On native Windows some clients need the command wrapped: use "cmd" as the command and "/c", "npx", "-y", "@openvidstudio/mcp-server" as the args.

    If you already added the server by hand, remove that entry before you install the plugin, or you will get two servers. Plugins do not load in Claude Code cloud sessions; use the npx config there.

  2. 02

    Restart the client

    44 tools should appear (45 with the Higgsfield tier on). Ask your agent to run preflight and it will tell you whether ffmpeg and Playwright are ready before you spend a render finding out.

  3. 03

    Ask for the video

    Start your app (a lesson needs none), then ask in plain words. Your agent runs the intake, drafts the plan, and shows you the whole thing before it writes anything. Which kind you get depends on what you ask for:

    ask your agent
    Build a 30 second demo video of this product.

Make a launch video at the peak creative level.
Write the brief first.

Make a two minute lesson on projectile motion,
vertical, with the derivation.
Run it from source insteadRead the full docs

Code-based video generation

Apache 2.0, no account, and it renders on your own machine. Remotion, which does the rendering, has its own license.

DownloadView on GitHub