# AIOProductOS/studio-mcp [Health: Active]

**Category:** 🎯 Marketing  
**Repository:** https://github.com/AIOProductOS/studio-mcp  
**GitHub Stars:** 3  
**npm Downloads (last month):** 273  
**Views:** 3  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/aioproductos-studio-mcp

## Description
Turns your AI host into a product videographer: scripted screen recordings of your own web app with a visible gliding cursor, camera zooms, highlight callouts, captions, and designed scene transitions, plus marketing-grade screenshots; deterministic dark-frame cleanup and MP4/GIF export. Free and fully local. npx -y @aioproductoscom/mcp-studio

## Tools
Capabilities this server exposes over MCP:

- **studio_start** — 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.
- **studio_goto** — 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.
- **studio_click** — 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 <target>', or errors 'target not visible' — then take a studio_screenshot and pick a better target.
- **studio_type** — 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.
- **studio_scroll** — 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.
- **studio_caption** — 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.
- **studio_narrate** — 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).
- **studio_highlight** — 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 <target>' when the element is found, or errors 'target not found: <target>' 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.
- **studio_zoom** — 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.
- **studio_hold** — 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.
- **studio_end_card** — 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.
- **studio_screenshot** — 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.
- **studio_finish** — 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.
- **studio_cancel** — 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).

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "studio-mcp": {
    "command": "npx",
    "args": ["-y","@aioproductoscom/mcp-studio"]
  }
}
```

## Documentation

## What AIOProductOS/studio-mcp MCP server does

AIOProductOS/studio-mcp MCP server turns scripted browser actions into product-demo footage and screenshots. It opens a themed Chromium recording session for your web app, keeps a visible cursor on screen, and adds presentation elements such as transition cards, captions, highlight rings, camera zooms, and an end card.

The workflow is intended for demonstrations of your own web product. A recording can show a dashboard, move through several surfaces, interact with controls, explain a result with text or local voice-over, and save high-DPI images from the same session. The output directory contains the generated files and any screenshots requested during recording.

## How it works

Start one session with a brand theme, viewport settings, optional cookies, an optional Playwright storage-state file, and selectors for UI that should be hidden. Navigate between surfaces with designed transition cards so loading states are not shown. Use smooth scrolling, cursor-led clicks, human-paced typing, captions, narration, highlights, zooms, and holds to stage each shot.

At the end, the AIOProductOS/studio-mcp MCP server closes the browser and processes the recording. With ffmpeg available, it removes residual dark frames, creates an H.264 MP4, and can add locally synthesized voice-over, music, subtitles, social crops, and a GIF. Without ffmpeg, the raw WebM remains available. Cancelling closes the browser and discards the take, while preserving screenshots already saved.

## Setup and configuration

Install the package through an MCP host with:

```json
{
  "mcpServers": {
    "studio": {
      "command": "npx",
      "args": ["-y", "@aioproductoscom/mcp-studio"]
    }
  }
}
```

The documented clients include Claude Code, Cursor, and Codex. The runtime requires Node 18 or later and Playwright Chromium, installed with `npx playwright install chromium`. Install ffmpeg and place it on `PATH` for MP4 and GIF export; recording still produces raw WebM without it.

For authenticated pages, create a Playwright `storageState` JSON file and provide its path at session start. This allows the browser to reuse a logged-in session without passing credentials to the recording tools. Cookies can suppress consent banners, and `hide_selectors` can hide chat widgets or development overlays. Set the theme background to match the app background to reduce visible flashes during page loads.

## Tools and capabilities

The AIOProductOS/studio-mcp MCP server provides these tool groups:

- Session control: `studio_start`, `studio_finish`, and `studio_cancel`.
- Navigation and interaction: `studio_goto`, `studio_click`, `studio_type`, and `studio_scroll`.
- Story and camera direction: `studio_caption`, `studio_narrate`, `studio_highlight`, `studio_zoom`, and `studio_hold`.
- Presentation and capture: `studio_end_card` and `studio_screenshot`.

Targets can generally be selected with CSS selectors or visible text. Elements must be visible before clicking, and off-screen targets should be brought into view first. Highlights can stack until cleared, while zoom should be reset before navigation or the closing card. Captions can also provide the script for optional local narration.

## Limitations and notes

Only one recording session can run at a time. Text entered into the browser appears in the recording, so demo content should be chosen deliberately. The tools depend on the target page being reachable and sufficiently settled; failed or hidden targets may require a screenshot and a more suitable selector. Local voice-over is generated at finish time and requires `voiceover:true`. No cloud upload or external voice service is described.

_Full upstream README: https://allmcps.com/mcp/aioproductos-studio-mcp/readme_