AIOProductOS/studio-mcp

Your AI teammate becomes your **product videographer**. Studio is an MCP server
that records scripted walkthroughs of **your own web app** — a visible cursor
that glides to every click, camera punch-ins, highlight callouts, storyline
captions, designed scene transitions — and takes marketing-grade screenshots.
Tell your AI host what story to shoot; get back a share-ready MP4.
The videos PMs hate making — demo clips, explainers, changelog GIFs, launch
screenshots — become one prompt.
**Free · MIT · runs 100% locally** (your browser, your URLs, your logged-in
session — nothing is uploaded anywhere). By AIOProductOS,
built from the same pipeline we use for our own launch videos.
Install
Requirements: Node 18+, Playwright Chromium (npx playwright install chromium,
one-time), and ffmpeg on PATH for MP4/GIF export (brew install ffmpeg — without
it you still get the raw WebM).
Use
Then just direct the film:
> "Record a 30-second walkthrough of https://app.example.com — theme it to our
> brand (#0d1117 bg, #f97316 accent), open on the dashboard with the title
> 'Meet Example', caption the three key features, zoom in on the analytics
> chart, and end with 'Start free · example.com'. Also grab a hero screenshot."
Your host runs the shoot tool by tool; files land in ./studio-output/.
The tools
| Tool | What it does |
|---|---|
| studio_start | open a themed recording browser (viewport, brand colors, logged-in state) |
| studio_goto | navigate behind a designed title card — no loading flashes on tape |
| studio_click / studio_type | cursor glides to the target; typing is human-paced |
| studio_scroll | cubic-eased scroll, never a jump cut |
| studio_caption | bottom-left storyline caption (the "voiceover" in text) |
| studio_narrate | spoken voice-over with NO on-screen caption; holds the shot under the line |
| studio_highlight | accent ring + label callout around any element or visible text |
| studio_zoom | smooth camera punch-in on a metric, button, or result |
| studio_hold | hold the shot (micro-drift keeps frames flowing) |
| studio_end_card | closing glass card: title, subtitle, CTA URL |
| studio_screenshot | high-DPI PNG of the frame, an element, or the full page |
| studio_finish | stop, auto-remove dark frames, export MP4 (+ optional GIF) |
| studio_cancel | abandon the take |
Recording logged-in areas
Studio never sees your credentials. Save a Playwright storageState
once (npx playwright codegen --save-storage=auth.json https://app.example.com),
then pass storage_state_path: "auth.json" to studio_start.
Keeping junk off the tape
- **Cookie banner?** Pass your consent cookie via cookies so it never mounts.
- **Chat bubble / dev overlay?** List selectors in hide_selectors — hidden from frame 1.