AIOProductOS Studio
OfficialAIOProductOS Studio lets your AI assistant act as a product videographer, recording scripted, polished walkthroughs of your web app and producing share-ready marketing videos and screenshots — all locally, with no uploads.
Core capabilities:
Start/Stop Recording: Launch a themed browser session with custom colors, fonts, viewport, and logged-in state (
studio_start). Hide cookie banners, chat widgets, or dev overlays. Finish by exporting to MP4/GIF with optional voice-over, background music, and subtitles (studio_finish), or abandon cleanly (studio_cancel).Navigation: Go to any URL behind a styled transition card — no loading flashes or half-hydrated pages on tape (
studio_goto).User Interaction: Simulate smooth cursor glides and clicks (
studio_click), human-paced keystroke typing (studio_type), and cubic-eased scrolling (studio_scroll).Visual Storytelling: Add bottom-left storyline captions (
studio_caption), spoken voice-over without on-screen text (studio_narrate), accent-ring highlights with optional labels (studio_highlight), and cinematic zoom punch-ins (studio_zoom).Holding Shots: Pause on a frame with subtle micro-drift to keep flow after captions or zooms (
studio_hold).End Cards: Display a customizable closing card with title, subtitle, and CTA URL (
studio_end_card).Screenshots: Capture high-DPI 2× PNG screenshots of the viewport, a specific element, or the full page at any point (
studio_screenshot).
What you can produce:
Demo videos and product walkthroughs
Changelog GIFs and launch clips
Explainer videos with captions and voice-over
Hero screenshots and marketing PNGs
Social-ready vertical/square crops (9:16, 1:1 for Reels/TikTok/feed)
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
# Claude Code
claude mcp add studio -- npx -y @aioproductoscom/mcp-studio
# Cursor / Codex — .mcp.json
{ "mcpServers": { "studio": { "command": "npx", "args": ["-y", "@aioproductoscom/mcp-studio"] } } }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).
Related MCP server: Agent Demo Studio
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 |
| open a themed recording browser (viewport, brand colors, logged-in state) |
| navigate behind a designed title card — no loading flashes on tape |
| cursor glides to the target; typing is human-paced |
| cubic-eased scroll, never a jump cut |
| bottom-left storyline caption (the "voiceover" in text) |
| spoken voice-over with NO on-screen caption; holds the shot under the line |
| accent ring + label callout around any element or visible text |
| smooth camera punch-in on a metric, button, or result |
| hold the shot (micro-drift keeps frames flowing) |
| closing glass card: title, subtitle, CTA URL |
| high-DPI PNG of the frame, an element, or the full page |
| stop, auto-remove dark frames, export MP4 (+ optional GIF) |
| 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
cookiesso it never mounts.Chat bubble / dev overlay? List selectors in
hide_selectors— hidden from frame 1.Wrong flash color on page loads? Set
theme.bgto your app's real background.
Why it looks good (the hard-won part)
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).
Links
Website: aioproductos.com
The product behind it: AIOProductOS — the product OS that joins feedback, revenue, work, and code on one customer record. Studio is free; it's how our own launch videos get made.
Our other MCPs:
@aioproductoscom/mcp(the workspace connector) ·@aioproductoscom/mcp-agent(assignable coding teammate)Support: office@aioproductos.com — a human founder answers every email.
MIT © AIOProductOS Inc.
Available Tools
14 toolsstudio_cancelA
Abandon the current recording session: closes the browser and discards the tape. Nothing is written except screenshots already saved. Safe to call when no session is active (no-op).
Inputs: no named parameters.
studio_captionA
Show (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.
Inputs: clear, eyebrow, no_voice, caption_text.
studio_clickA
Glide 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 ', or errors 'target not visible' — then take a studio_screenshot and pick a better target.
Inputs: target (required), settle_ms.
studio_end_cardA
Show the closing card — a centred glass card over the (still visible) product: title, optional subtitle and URL. The classic outro: what they saw + where to get it. Hold ~2.5s after this, then studio_finish.
Inputs: title (required), url, subtitle.
studio_finishA
Stop recording and produce the final files: closes the browser, strips residual dark frames (ffmpeg blackdetect → trim), transcodes to a share-ready MP4 (H.264, faststart), then — optionally — narrates the caption lines with a LOCAL voice (no cloud/keys), lays down a music bed, writes/burns subtitles, and exports vertical/square social crops, plus a GIF. Voice-over timing is auto-corrected for the frames the deblack step removed. Returns every produced file with size + duration. Without ffmpeg you still get the raw WebM.
Inputs: name (required), gif, music, voice, +3 more.
studio_gotoA
Navigate 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.
Inputs: url (required), title, eyebrow, dwell_ms, +1 more.
studio_highlightA
Draw an accent ring around a target (CSS selector or visible text), optionally with a label card beside it — the 'look here' callout. Side effects: scrolls the target into view, then overlays a ring (and card) in the theme accent; rings stack until cleared. Returns 'highlighted ' when the element is found, or errors 'target not found: ' when it isn't — retry with a studio_screenshot to pick a better target. Always call with clear=true before you navigate, zoom, or ring a different element, so stale rings don't linger on the next shot.
Inputs: clear, label, target, eyebrow.
studio_holdA
Hold the shot for a moment — glides to a target (optional) and keeps micro-drift so the recorder keeps emitting frames (a dead-static hold gets its tail frames dropped). Use after captions, highlights, and zooms: 2000–3000ms is a good beat.
Inputs: ms, target.
studio_narrateA
Record a line of voice-over WITHOUT putting a caption on screen — narration spoken over the action. The line is synthesized locally at studio_finish (needs voiceover:true). Holds the shot afterward so there's footage under the line; set hold_ms to roughly the length of the sentence when spoken (~400ms/word).
Inputs: line (required), hold_ms.
studio_screenshotA
Take a high-DPI (2x) screenshot of the current frame and save it as a PNG in the output directory. Works any time during a session — element-only via selector, or full_page for the whole scroll height. Returns the file path. Clear captions/rings first unless you want them in the shot.
Inputs: name (required), selector, full_page.
studio_scrollA
Cubic-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.
Inputs: to_y, to_target, duration_ms.
studio_startA
Start 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.
Inputs: theme, width, height, cookies, +4 more.
studio_typeA
Glide 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.
Inputs: selector (required), input_text (required), delay_ms.
studio_zoomA
Camera punch-in: smoothly zoom the page toward a target (CSS selector or visible text) — the money shot for a metric, button, or result. Captions stay screen-fixed; the content scales under them. ALWAYS studio_zoom with reset=true before navigating or showing the end card, or the next scene inherits the zoom.
Inputs: reset, target, zoom_scale, duration_ms.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 14 tools
Each tool serves a unique, clearly defined function in the recording workflow (start, navigate, click, type, scroll, zoom, highlight, caption, narrate, hold, screenshot, end card, cancel, finish). There is no ambiguity or overlap.
All tools follow a consistent 'studio_verb' pattern (e.g., studio_start, studio_click, studio_finish). The naming is uniform and predictable.
14 tools cover the full range of operations needed for recording a product walkthrough—from session control to interactions, media capture, and final output—without being excessive or sparse.
The tool surface provides a complete lifecycle: session management, navigation, interaction, visual cues, voiceover, screenshots, and finalization. All essential operations are present, including edge-case handling like cancellation.
Maintenance
Related MCP Connectors
Make narrated, on-brand product videos of your real app from your coding agent or AI assistant.
Demo-video assistant: records your web app click by click and returns an MP4 with zooms, captions.
The AI video studio: records your web app, writes and voices the script, renders a tutorial MP4.
The AI video studio: records your web app, writes and voices the script, renders a tutorial MP4.
Related MCP Servers
AlicenseAqualityCmaintenanceProduct management over a shared product spine — link customer feedback and insights to features, tasks, sprints and releases, then read closed-loop analytics (customer 360, funnels, retention, NRR) on the same records. Local stdio server via npx @aioproductoscom/mcp; also a 38-tool hosted remote (OAuth 2.1).71MIT- AlicenseNot gradedqualityBmaintenanceEnables AI agents to create polished product demo videos by controlling a real Chromium browser, recording actions, and rendering 1080p MP4s with narration, captions, and styled overlays.2MIT
- AlicenseNot gradedqualityBmaintenanceEnables an AI agent to operate a web app, record a deterministic session, and compile an editable project into a polished MP4 with zooms, cuts, captions, callouts, and reproducible renders.MIT
- AlicenseAqualityBmaintenanceEnables AI agents to inspect localhost or remote web services with headless Chromium and produce automated MP4 and GIF walkthroughs, including virtual cursor/click effects, HUD captions, dummy-data injection, and reusable scenario flows.5MIT