Studio MCP

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:

{
  "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.