Expo Launch Video

io.github.Rudrasamadhiya由 GitHub 账号 Rudrasamadhiya 发布v0.1.2更新于 Oct 30, 2026

Record your Expo app on a real phone and edit a 1080p launch video with motion graphics and sound.

已验证STDIO仅桌面浏览器自动化开发者工具媒体与设计

概览

AI 生成的概览

在真实手机上录制 Expo 应用，并让助手规划、剪辑并渲染带字幕、动效与音效的 1080p 发布视频。

可以做什么
  • 检查并驱动已连接的应用：状态、界面大纲、布局、截图、日志、网络请求、JS 执行、重载
  • 操作应用：点击、输入、滚动、开关、跳转路由、等待、批量执行步骤、收起键盘、按 Android 硬件键
  • 采集素材：单页或多路由的高清截图与整页滚动截图、点击交互前后画面、数秒屏幕录制
  • 规划与剪辑时间线：自动生成分镜，调整时长、速度、字幕、缩放、转场、画幅与音效
  • 打开浏览器工作台，等待用户输入的修改请求、在工作台聊天中回复，并把 MP4 渲染到文件路径
适用场景
适合需要为 Expo 应用制作宣传片或应用商店预览视频，并希望直接用真机画面、不另装录屏或剪辑软件的场景。也适合已通过 expo-mcp-bridge 控制应用的助手，以及想靠拖拽或输入文字微调成片的用户。
运行要求
通过 npx 在本机运行，需要 Node.js 20 或更高版本。需要已挂载 expo-mcp-bridge 的 Expo 应用、与电脑处于同一 Wi-Fi 的手机，以及用于导出 MP4 的 Chrome 或 Edge。可选 ANTHROPIC_API_KEY（或 Anthropic 登录配置）用于工作台自由文本修改；EXPO_MCP_PORT、LAUNCH_VIDEO_PORT、LAUNCH_VIDEO_DIR、LAUNCH_VIDEO_AI、LAUNCH_VIDEO_MODEL 用于调整端口、输出目录与模型。
安装前请注意
ANTHROPIC_API_KEY 为可选项，但设置后工作台提示词与所选分镜会发送到 Claude API，可能产生费用；不设置则改由你的助手处理。app_* 工具会直接操作运行中的应用：点击、输入、跳转、重载 JS 包并在其中执行任意 JavaScript，建议使用开发版与测试数据。截图、项目文件与成片会写入磁盘上的项目目录。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Expo Launch Video，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照 仓库 中的启动说明。

README

[expo-launch-video — your AI agent shoots and edits a launch video of your app, live]

[npm version] [CI] [node] [MIT license]

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

bash
npx expo install expo-mcp-bridge react-native-view-shotnpm install --save-dev expo-launch-videonpx 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:

text
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:

  1. Install the packages and run init (above).

  2. Mount the bridge once in your root layout:

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

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

  4. 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.
  • The phone moves. In landscape the phone travels across the frame from scene to scene while the caption sweeps in over it; video_plan alternates sides, video_edit sets side:"left"|"right" per scene.
  • 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

text
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-out2. Plan     video_plan {targetSeconds:45, format:"landscape"}             timing, zooms, captions, chips3. Direct   video_edit [{op:"update", scene:"dashboard", title:"…", side:"right"}]  refine any scene4. Studio   video_studio  →  you drag, trim and type prompts              video_wait_for_prompt / video_reply5. Render   video_render  →  launch-video/out/launch-landscape.mp4

Common questions

How do I make an App Store preview video of my Expo app with AI?

Install this package next to expo-mcp-bridge, run npx expo-launch-video init, open the app on your phone and ask your agent: "Make a 30 second App Store preview, portrait." It records the real app, plans the video and opens a studio; export gives you a 1080p MP4.

Can Claude Code or Cursor make a promo video of my React Native app?

Yes, any MCP agent can. The agent records page loads, scrolls and taps live from the phone, writes captions from the real content on screen, and adds zooms, pop-outs, motion graphics and sound.

Do I need a screen recorder or a video editor?

No. Recording happens inside the app through expo-mcp-bridge, editing happens in a browser studio you can drag or prompt ("speed up analytics 2x"), and the MP4 is rendered in Chrome or Edge.

Which formats can it export?

16:9 for YouTube and websites, 9:16 for App Store and Play Store previews, Reels, Shorts and TikTok, and 1:1 for social feeds.

Tools

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

ToolDescription
video_recordScreen-record the phone: open the page on camera, hold while it loads, scroll — or tap mid-take
video_captureHigh-resolution stills and full-page scroll captures for one or many routes
video_capture_tapBefore / tap / after stills of an interaction
video_planAuto-plan the whole timeline from the captures
video_editEdit scenes: order, duration, speed, captions, chips, zooms (including timed zooms), pop-outs, transitions, format, caption side, theme, sound
video_timelineThe whole plan in a few lines
video_studioOpen the studio in the browser
video_wait_for_promptWait for what the user types in the studio
video_replyAnswer the user in the studio after an edit
video_renderExport 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:

text
make dashboard 4s · speed up analytics 2x · slow down the 3rd scene · remove pricingmove 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 · squaretext 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

bash
npx expo-launch-video init      # .mcp.json ("launch-video" server), skills, AGENTS.md, .gitignorenpx 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
VariableDefaultDescription
EXPO_MCP_PORT8347Port the phone connects to (shared with expo-mcp-bridge)
LAUNCH_VIDEO_PORT8790Studio web server (the next free port if taken)
LAUNCH_VIDEO_DIR./launch-videoWhere captures, project.json and renders live
LAUNCH_VIDEO_AIonoff sends studio prompts to your agent instead of the Claude API
LAUNCH_VIDEO_MODELclaude-opus-5-5Model for direct studio edits (needs Anthropic credentials)

Project structure

text
server/       MCP server, director (auto-planning), capture and recording, studio server,              prompt parser, optional Claude editsstudio/       the editor (vanilla JS): renderer, motion graphics, sound design,              MP4 export (Mediabunny / WebCodecs)skill/        the directing playbook installed by initAI_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

SymptomFix
The render dialog never finishesKeep the studio tab visible; exports use the browser's hardware encoder (Chrome or Edge).
A page capture shows an old screenUpdate both packages — captures use the visible screen view.
Lists are empty in recordingsThe app may need dev environment variables (for example EXPO_PUBLIC_* set only in eas.json); start Metro with them set.
A panel covers later takesClose modals between takes — video_record warns you when one is still open.
Anything elseSee 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

Contributing

bash
npm installnpm test

See CONTRIBUTING.md for details.

License

MIT © Rudra Samadhiya

Exports are muxed with Mediabunny (MPL-2.0).

来源：README.md，提交 dbe4d25

工具

27

app_status

Check whether the mobile app is connected and show device info. Call first.

无需输入参数。

app_snapshot

Compact text outline of the current screen (buttons, inputs, text, lists) with refs like [e3] to act on. Prefer this over screenshots.

输入参数maxLines

app_layout

Positions (dp, window coordinates) and font sizes of elements on the current screen. For layout checks and visual work; app_snapshot is cheaper for acting.

输入参数limit

app_screenshot

JPEG screenshot of the app. Use only for visual/layout questions; app_snapshot is cheaper for finding elements. With saveTo, writes the file and returns only its path (no image tokens).

输入参数areasaveToqualitymaxWidthfullScroll

app_batch

Run several actions in one call (fastest way to fill forms or walk a flow). Returns the screen once at the end. Steps: {action:"tap"|"type"|"scroll"|"toggle"|"navigate"|"wait"|"dismiss_keyboard", ...that tool's args}.

输入参数fullsteps必填snapshot

app_tap

Press a button/pressable element. Returns what changed on screen plus any new errors.

输入参数reffulllongtexttestIDsnapshot

app_type

Set text in an input (replaces by default). Target by ref, testID, or placeholder text.

输入参数reffulltextvalue必填appendsubmittestIDsnapshot

app_scroll

Scroll a list/ScrollView (first one on screen if no target).

输入参数reffulltextamounttestIDsnapshotdirection

app_toggle

Flip a Switch (or set it with value).

输入参数reffulltextvaluetestIDsnapshot

app_navigate

Open a route (expo-router path like "/settings") or a full deep link.

输入参数fullpath必填replacesnapshot

app_wait

Wait until text or a testID appears (or disappears with gone=true). Cheaper than polling snapshots.

输入参数gonetexttestIDtimeout

app_logs

Console logs and JS errors captured in the app.

输入参数clearlevellimitsincesearch

app_network

HTTP requests made by the app (fetch/XHR) with status, timing and truncated bodies.

输入参数limitsincebodiessearchfailedOnly

app_eval

Run JavaScript inside the app (dev only) and return the JSON result. Expression or statements with return. `bridge` and `RN` (react-native) are in scope.

输入参数code必填

app_reload

Reload the JS bundle (like pressing r in Metro).

无需输入参数。

app_dismiss_keyboard

Hide the on-screen keyboard.

无需输入参数。

device_key

Press a hardware/system key on an Android device via adb (USB or Wi-Fi debugging): volume_up, volume_down, mute, back, home, app_switch, enter, tab, delete, power, menu, escape.

输入参数key必填repeat

video_capture

Capture app screens for the launch video: screenshot, element positions and the full scroll content. Give routes to capture several screens in one call (in video order), or nothing to capture the current screen.

输入参数nameroutesscroll

video_record

Screen-record the phone for a few seconds (real frames, ~6-12 fps): optionally navigate first, scroll smoothly, or tap an element mid-way. The clip plays in the video as a live recording.

输入参数tapnameroutetapAtscrollsecondsliveLoadscrollFrom

video_capture_tap

Capture an interaction: the current screen, a tap on an element (animated finger + ripple in the video) and the screen it leads to.

输入参数refnametexttestID

video_plan

Build the video timeline from all captured screens: intro, one scene per screen with automatic timing, zooms, scroll speed-ups and captions, then an outro. Replaces the current timeline.

输入参数ctaformatappNametaglinetargetSeconds

video_timeline

Show the current video timeline (compact).

无需输入参数。

video_edit

Edit the timeline. ops is a list of: {op:"update", scene, duration?, speed?, title?, subtitle?, transition?("slide"|"fade"|"zoom"|"rise"|"none"), focus?(element label | {x,y,w,h} dp | null), zoom?(1-3), zoomTimes?([inStart,inEnd,outStart,outEnd] recording seconds, for recordings), scroll?(0-1 | false), callouts?, popouts?} {op:"move", scene, to(number|"first"|"last") | before | after} · {op:"remove", scene} · {op:"add", asset, at?} · {op:"drop", asset} (discard a bad capture) {op:"settings", format?, appName?, tagline?, cta?, captionSide?("left"|"right"), sound?{sfx: bool, volume: 0-1}, theme?{accent, bg:[c1,c2]}} · {op:"plan", targetSeconds?} scene = id ("s3"), 1-based position, or a screen name/route ("dashboard").

输入参数ops必填

video_studio

Open the studio in the browser: live preview, timeline, per-scene controls and a prompt box where the user can type edits.

输入参数open

video_render

Render the video to MP4 (in the studio tab, opening it if needed) and return the file path.

无需输入参数。

video_wait_for_prompt

Wait for the user to type an edit request in the studio prompt box (ones the studio could not apply itself). Apply it with video_edit, answer with video_reply, then call this again to keep collaborating.

输入参数timeoutSeconds

video_reply

Show a short message to the user in the studio chat.

输入参数text必填

版本历史

1
  1. v0.1.2最新Oct 21, 2026

评分

已满足适用检查项的 90%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通25 分
  • 已声明认证方式10 分

    请在注册中心条目中声明凭据请求头，或保持端点能够响应探测，以便判定其认证方式。

  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分