# AIOProductOS Studio

Directs scripted walkthroughs and captures marketing screenshots of your web applications. It automates browser clicks, zooms, and captions, producing video files on demand.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 3
- Author: AIOProductOS
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/AIOProductOS/studio-mcp
- Updated: 2026-07-21
- HTML: https://affpapa.org/en/nevibecode/mcp/aioproductos-studio

## What it does

The server turns an AI assistant into a screen director by controlling a local Playwright Chromium instance. It walks through your web interface according to prompts: the pointer glides realistically across targets, text input follows human cadence, and camera transitions smooth out page movements. Finished clips arrive in `./studio-output/`.

During production, the tools handle storyline overlays, voice-over narrations, element highlight rings, and end cards with call-to-action text. You can hide cookie prompts or live support bubbles using `hide_selectors`. Supplying an `auth.json` file through Playwright storage state lets the agent navigate behind login walls without exposing credentials.

Running the studio requires Node 18+ and a Playwright Chromium download. Without ffmpeg available on your system `PATH`, the process can only deliver uncompressed WebM captures instead of MP4 files.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add mcp-studio -- npx -y @aioproductoscom/mcp-studio
```

### Codex

**Platform CLI**
```bash
codex mcp add aioproductos-studio -- npx -y @aioproductoscom/mcp-studio
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "aioproductos-studio": {
            "command": "npx",
            "args": [
                "-y",
                "@aioproductoscom/mcp-studio"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "aioproductos-studio": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@aioproductoscom/mcp-studio"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add aioproductos-studio npx -y @aioproductoscom/mcp-studio
```

## When to use it
- record scripted walkthroughs of web software with mouse smoothing
- capture high-DPI screenshots of user interface sections
- eliminate flashes, cookie popups, and support bubbles from recordings
- produce MP4 and GIF product releases without manual video editing

## Example prompts
- Record a 30-second tour of https://app.example.com, highlight the analytics graph, and add a closing card with the sign-up link
- Take a high-DPI screenshot of the billing table on https://app.example.com
- Film a walk-through on https://app.example.com using auth.json, hiding selectors in #intercom-container

## Similar
- [Scrapling MCP Server](https://affpapa.org/en/nevibecode/mcp/scrapling-mcp-server.md) — MCP server · ★ 89899
- [browser-use](https://affpapa.org/en/nevibecode/mcp/browser-use.md) — MCP server · ★ 119231
- [AIHawk](https://affpapa.org/en/nevibecode/mcp/aihawk.md) — MCP server · ★ 32260
- [Skyvern](https://affpapa.org/en/nevibecode/mcp/skyvern.md) — MCP server · ★ 23283
- [SeleniumBase MCP](https://affpapa.org/en/nevibecode/mcp/seleniumbase-mcp.md) — MCP server · ★ 13181
- [apify-mcp-server](https://affpapa.org/en/nevibecode/mcp/apify-mcp-server.md) — MCP server · ★ 13345

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md