expo-launch-video

Website · Docs · The studio · Tools reference · Changelog

expo-launch-video lets your AI agent shoot and edit a launch video of your Expo app — live from your phone. Ask Claude Code, Antigravity or Cursor for a video; it records the real app (page loads, scrolling, taps, panels opening), picks the best takes, writes the captions and cuts a polished video with motion graphics, break-out pop-outs and sound. Then it opens a studio where you tweak the result by dragging, or just by typing what you want. Export is a real 1080p MP4, rendered in your browser. No After Effects, no ffmpeg, no screen-recording app.

"Make a 45 second launch video of the app: landing, login, dashboard, the question bank and one exam. Captions should sell the benefits."

Table of contents

• Installation
• Quick start
• Features
• How a video gets made
• Tools
• The studio
• CLI and environment
• Project structure
• Troubleshooting
• Requirements
• Related
• Contributing
• License

Installation

npx expo install expo-mcp-bridge react-native-view-shot
npm install --save-dev expo-launch-video
npx expo-launch-video init

init writes .mcp.json with a launch-video server — it includes every app_* tool from expo-mcp-bridge, so one server does both — plus the directing skill for Claude Code (.claude/skills/launch-video), the same playbook in AGENTS.md for Antigravity, Cursor and others, and a .gitignore entry for the project folder.

Quick start

The one-shot way. Paste this into your agent inside your Expo project:

Read https://raw.githubusercontent.com/Rudrasamadhiya/expo-launch-video/main/AI_SETUP.md and set up app control and launch videos in this project.

By hand:

• Install the packages and run init (above).

• Mount the bridge once in your root layout:

  import { Stack, router } from 'expo-router';
  import { AgentBridge } from 'expo-mcp-bridge';
  
  export default function RootLayout() {
    return (
      <>
        <Stack />
        <AgentBridge router={router} />
      </>
    );
  }
  

• Run npx expo start and open the app on your phone (same Wi-Fi).

• Restart your agent and ask for a video.

On Windows the MCP config uses "command": "cmd", "args": ["/c", "npx", "expo-launch-video"].

Features

• Real footage from the phone. Screen recordings at about 10–15 fps captured in-app: page loads and animations on camera, smooth scrolls from full-page captures, taps mid-take.
• Auto-directed. A director plans timing, zooms into stat rows and buttons, speeds up long scrolls, and writes captions and pop-up chips from the real numbers on screen.
• Motion graphics. Kinetic typography, glass callouts, light sweeps, accent wipes, and an animated intro and outro with a logo burst and a pulsing call to action.
• Break-out pop-outs. A tapped card lifts off the phone to center stage; a panel that opens springs out into a side-by-side layout.
• Sound design. Synthesized pops, clicks, whooshes and chimes timed to every animation, mixed into an AAC track in the MP4.
• Prompt the studio. "speed up analytics 2x", "text on the right", "zoom into the Start button". Simple edits apply instantly; anything else goes to your agent, which edits the video live.
• Every format. 16:9 for stores and YouTube, 9:16 for Reels and Shorts, 1:1 for feeds.

How a video gets made

1. Shoot    video_record {route:"/dashboard", seconds:8, scroll:true}    live from the phone
            video_record {tap:"My Analytics", seconds:6}                  tap → hero / side pop-out
2. Plan     video_plan {targetSeconds:45, format:"landscape"}             timing, zooms, captions, chips
3. Direct   video_edit [{op:"update", scene:"dashboard", title:"…"}]      refine any scene
4. Studio   video_studio  →  you drag, trim and type prompts              video_wait_for_prompt / video_reply
5. Render   video_render  →  launch-video/out/launch-landscape.mp4

Tools

In addition to every app_* tool from expo-mcp-bridge. Full parameters are in the tools reference.

Tool	Description
video_record	Screen-record the phone: open the page on camera, hold while it loads, scroll — or tap mid-take
video_capture	High-resolution stills and full-page scroll captures for one or many routes
video_capture_tap	Before / tap / after stills of an interaction
video_plan	Auto-plan the whole timeline from the captures
video_edit	Edit scenes: order, duration, speed, captions, chips, zooms (including timed zooms), pop-outs, transitions, format, caption side, theme, sound
video_timeline	The whole plan in a few lines
video_studio	Open the studio in the browser
video_wait_for_prompt	Wait for what the user types in the studio
video_reply	Answer the user in the studio after an edit
video_render	Export the MP4 and return its path

The studio

A browser editor with live preview, a drag-to-reorder and drag-to-resize timeline, a per-scene inspector (captions, duration, speed, transitions, draw a zoom area, scroll amount), video settings (format, caption side, colors from your app, sound) and a prompt box. It understands common edits on its own:

make dashboard 4s · speed up analytics 2x · slow down the 3rd scene · remove pricing
move faq after help · zoom on Log In in login · no zoom on dashboard · scroll mistakes 60%
title dashboard: Your day at a glance · fade transition on analytics · portrait · square
text on the right · make it 30 seconds · cta: Get it on Google Play · color #7c3aed · mute · volume 60%

With ANTHROPIC_API_KEY set (or an ant auth login profile), free-form requests go straight to Claude (claude-opus-5-5); otherwise they go to your agent through video_wait_for_prompt. Prompts carry the scene you have selected, so "fix this" means that scene.

Reopen a project without an agent with npx expo-launch-video studio.

CLI and environment

npx expo-launch-video init      # .mcp.json ("launch-video" server), skills, AGENTS.md, .gitignore
npx expo-launch-video studio    # reopen the studio for ./launch-video (edit, preview, export)
npx expo-launch-video           # run the MCP server (your agent starts this for you)
npx expo-launch-video --help

Variable	Default	Description
EXPO_MCP_PORT	8347	Port the phone connects to (shared with expo-mcp-bridge)
LAUNCH_VIDEO_PORT	8790	Studio web server (the next free port if taken)
LAUNCH_VIDEO_DIR	./launch-video	Where captures, project.json and renders live
LAUNCH_VIDEO_AI	on	off sends studio prompts to your agent instead of the Claude API
LAUNCH_VIDEO_MODEL	claude-opus-5-5	Model for direct studio edits (needs Anthropic credentials)

Project structure

server/       MCP server, director (auto-planning), capture and recording, studio server,
              prompt parser, optional Claude edits
studio/       the editor (vanilla JS): renderer, motion graphics, sound design,
              MP4 export (Mediabunny / WebCodecs)
skill/        the directing playbook installed by init
AI_SETUP.md   one-shot setup guide an AI agent can follow

Projects live in launch-video/ inside your app (captures, project.json, renders in out/); init adds the folder to .gitignore.

Troubleshooting

Symptom	Fix
The render dialog never finishes	Keep the studio tab visible; exports use the browser's hardware encoder (Chrome or Edge).
A page capture shows an old screen	Update both packages — captures use the visible screen view.
Lists are empty in recordings	The app may need dev environment variables (for example EXPO_PUBLIC_* set only in eas.json); start Metro with them set.
A panel covers later takes	Close modals between takes — video_record warns you when one is still open.
Anything else	See the expo-mcp-bridge troubleshooting table.

Requirements

• Node.js 20 or newer
• An Expo app with expo-mcp-bridge mounted
• Chrome or Edge for export (WebCodecs H.264 + AAC)

Related

• expo-mcp-bridge — the app-control layer this package builds on.
• Expo Agent Kit — the website and full documentation for both libraries.

Contributing

npm install
npm test

See CONTRIBUTING.md for details.

License

MIT © Rudra Samadhiya

Exports are muxed with Mediabunny (MPL-2.0).