English Français العربية

AIOProductOS Studio

السجل الرسمي الوسائط والتصميم

Turn your AI host into a product videographer: scripted app demos, voice-over, captions, MP4/GIF.

الشيفرة المصدرية الموقع التوثيق

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

NPM package @aioproductoscom/mcp-studio
Claude Code 
claude mcp add aioproductos-studio -- npx -y @aioproductoscom/mcp-studio@0.2.3
إعداد JSON (Claude Desktop وCursor وVS Code) 
{
    "mcpServers": {
        "aioproductos-studio": {
            "command": "npx",
            "args": [
                "-y",
                "@aioproductoscom/mcp-studio@0.2.3"
            ]
        }
    }
}

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. AIOProductOS Studio · MCP
  2. Install
  3. Use
  4. The tools
  5. Recording logged-in areas
  6. Keeping junk off the tape
  7. Why it looks good (the hard-won part)
  8. Links

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).

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

ToolWhat it does
studio_startopen a themed recording browser (viewport, brand colors, logged-in state)
studio_gotonavigate behind a designed title card — no loading flashes on tape
studio_click / studio_typecursor glides to the target; typing is human-paced
studio_scrollcubic-eased scroll, never a jump cut
studio_captionbottom-left storyline caption (the "voiceover" in text)
studio_narratespoken voice-over with NO on-screen caption; holds the shot under the line
studio_highlightaccent ring + label callout around any element or visible text
studio_zoomsmooth camera punch-in on a metric, button, or result
studio_holdhold the shot (micro-drift keeps frames flowing)
studio_end_cardclosing glass card: title, subtitle, CTA URL
studio_screenshothigh-DPI PNG of the frame, an element, or the full page
studio_finishstop, auto-remove dark frames, export MP4 (+ optional GIF)
studio_cancelabandon 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 cookies so it never mounts.
  • Chat bubble / dev overlay? List selectors in hide_selectors — hidden from frame 1.
  • Wrong flash color on page loads? Set theme.bg to 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).

MIT © AIOProductOS Inc.

الأسئلة الشائعة

ما هو AIOProductOS Studio؟

Turn your AI host into a product videographer: scripted app demos, voice-over, captions, MP4/GIF.

كيف أثبّت AIOProductOS Studio؟

يعمل على جهازك. في Claude Code: claude mcp add aioproductos-studio -- npx -y @aioproductoscom/mcp-studio@0.2.3. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج AIOProductOS Studio إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل AIOProductOS Studio مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون AIOProductOS Studio؟

ينشره AIOProductOS. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.