Locally records scripted walkthrough videos and screenshots of your web app with cursor, zoom, captions, and export to MP4/GIF.
Copy the AI prompt to install this server into Claude Code, Cursor, or another agent ā or use 1-click editor setup below.
š” Paste the JSON block into your client's configuration file under mcpServers, then restart the application.
Inspect callable tools, capabilities, and parameters exposed to AI agents by Studio MCP.
studio_startStart a recording session: launches a themed headless browser and begins capturing video. Returns the session config and the output directory. One session at a time ā studio_finish or studio_cancel ends it. Set theme to the PRODUCT'S brand (bg = its app background ā wrong bg causes visible flashes on page loads); use storage_state_path (a Playwright storageState JSON) to record logged-in areas without sharing credentials; list chat widgets / dev overlays / consent banners in hide_selectors so they never appear on tape.
studio_gotoNavigate to a URL behind a designed transition card (eyebrow + big title on the theme background) ā the viewer never sees a loading flash or half-hydrated page. Use for the opening shot AND every surface change; give each a short title so the cut reads as a chapter. Waits for real content (network settle + optional wait_for selector + skeleton loaders cleared) before lifting the card.
studio_clickGlide the visible cursor to a target and click it, slow enough to read as a deliberate action on camera. Use for every button / link / menu interaction in the walkthrough. Precondition: the target must be on screen ā studio_goto or studio_scroll to it first if it isn't. Prefer a stable CSS selector; fall back to visible text. After clicking it waits for the page to settle and re-applies the theme overlays, so the next beat is on a hydrated page. Returns 'clicked <target>', or errors 'target not visible' ā then take a studio_screenshot and pick a better target.
studio_typeGlide to an input and type text at a human pace (keystroke by keystroke ā it reads as real usage, not a paste). Use realistic demo content; whatever you type is on tape.
studio_scrollCubic-eased scroll to an absolute Y offset or until a target element is in view ā never a jump cut. Use between story beats to bring the next area on camera. Side effect: changes only the page scroll position (no click, no navigation). Pass exactly ONE of to_y or to_target. Returns 'scrolled' on completion. To reveal an off-screen element before studio_click or studio_highlight, scroll to it first.
studio_captionShow (or replace) the bottom-left storyline caption ā an eyebrow kicker plus one sentence that narrates the current beat. Keep it under ~12 words and leave it up 2ā4s (studio_hold) so it reads. Pass clear=true to fade it out before a scene change. The caption_text is ALSO recorded as the voice-over script: if you call studio_finish with voiceover:true it's spoken aloud (locally) timed to this moment ā write captions as speakable sentences. Set no_voice:true for a caption you want on screen but NOT narrated.
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.
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).
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/.
| 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 |
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.
cookies so it never mounts.hide_selectors ā hidden from frame 1.theme.bg to your app's real background.No white flash on page commits (the theme background paints before any page CSS), no black frames (navigations hide behind designed title cards, and residual dark frames are detected and cut deterministically with ffmpeg), no stutter (every camera move is compositor-friendly easing), and action that reads on camera (a visible cursor glides to every target before it acts).
@aioproductoscom/mcp (the workspace connector) Ā· @aioproductoscom/mcp-agent (assignable coding teammate)MIT Ā© AIOProductOS Inc.
Factual signals from GitHub, npm, and our automated checks ā not a rating.
No reviews yet ā be the first to share how this listing worked for you.
Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.
[](https://allmcps.com/mcp/aioproductos-studio-mcp)<a href="https://allmcps.com/mcp/aioproductos-studio-mcp"><img src="https://allmcps.com/api/badge/aioproductos-studio-mcp?style=directory" alt="Studio MCP on AllMCPs" /></a>