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 分