mcpField
A
AIOProductOS Studio

AIOProductOS Studio

本地服务
aioproductos.com媒体与设计314 周前更新
代码仓库访问官网

关于 AIOProductOS Studio

AIOProductOS Studio 是本地运行的 MCP 服务，可录制自有 Web 应用的脚本化演示并生成视频和截图，适合制作产品演示与发布素材。

主要功能

  1. 01录制脚本化网页演示
  2. 02添加字幕、旁白和标注
  3. 03平滑缩放与镜头移动
  4. 04导出 MP4 或 GIF
  5. 05生成高分辨率截图

适用场景

  1. 01制作产品功能演示视频
  2. 02生成版本更新 GIF
  3. 03录制登录后的应用流程
  4. 04截取发布页面主视觉图

MCP 相关

MCP 服务向 AI 主机提供浏览器录制、交互、字幕、旁白、截图及视频导出工具；录制在本地进行。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "com-aioproductos-mcp-studio": {
      "command": "npx",
      "args": [
        "-y",
        "@aioproductoscom/mcp-studio"
      ]
    }
  }
}
启动命令npx -y @aioproductoscom/mcp-studio

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@aioproductoscom/mcp-studio0.2.3

工具

14

收录的工具列表 · 更新于 2 周前

参数类型必填说明
themeobject否叠加层／转场的视觉主题——使用录制产品的品牌。
theme.bgstring否应用背景色，例如 '#0d1117'（默认 '#101014'）。
theme.fontstring否叠加层字体栈（默认 system-ui）。
theme.textstring否叠加层文字颜色（默认接近白色）。
theme.brandstring|null否转场卡片上显示的品牌名称；若不显示则为 null。
theme.accentstring否环形标记／字幕／光标的强调色，例如 '#4f8cff'。
widthnumber否视口宽度，单位为 px（可选；默认 1280）。
heightnumber否视口高度，单位为 px（可选；默认 720）。
cookiesarray否预先设置的 Cookie，例如用于避免横幅显示的同意 Cookie（可选）。
show_cursorboolean否在屏幕上可见、会滑动至目标位置的光标（默认 true）。
color_schemeenum否页面的 prefers-color-scheme（默认 dark）。dark | light
hide_selectorsarray否要从第 1 帧中隐藏的 CSS 选择器（聊天气泡、Cookie 横幅、开发调试覆盖层）。
storage_state_pathstring否用于已登录录制的 Playwright storageState JSON 路径（可选）。

详细介绍

AIOProductOS Studio · MCP

你的 AI 队友将成为你的产品视频摄影师。Studio 是一个 MCP 服务，可为你自己的 Web 应用录制脚本化演示视频——可见的光标滑向每个点击目标、镜头推近、重点标注、故事线字幕、精心设计的场景转场，还能拍摄适用于营销的截图。告诉你的 AI 主机要拍摄什么故事；即可获得可直接分享的 MP4。

PM 们最不愿制作的视频——演示片段、讲解视频、更新日志 GIF、发布截图——如今只需一个提示词。

免费 · MIT · 100% 本地运行（使用你的浏览器、你的 URL、你已登录的会话——不会上传任何内容）。由 AIOProductOS 打造，采用与我们制作自家发布视频相同的流水线。

安装

# Claude Code
claude mcp add studio -- npx -y @aioproductoscom/mcp-studio

# Cursor / Codex — .mcp.json
{ "mcpServers": { "studio": { "command": "npx", "args": ["-y", "@aioproductoscom/mcp-studio"] } } }

要求：Node 18+、Playwright Chromium（一次性运行 npx playwright install chromium）以及 PATH 中的 ffmpeg，用于导出 MP4/GIF（运行 brew install ffmpeg 安装——没有 ffmpeg 也能获得原始 WebM）。

使用

然后，只需指导拍摄：

“为 https://app.example.com 录制一段 30 秒的演示视频——采用我们的品牌主题（#0d1117 背景、#f97316 强调色），从带有标题 ‘Meet Example’ 的仪表板画面开始，为三个关键功能添加字幕，推近分析图表，最后以 ‘Start free · example.com’ 收尾。另外，拍一张主视觉截图。”

你的主机逐个调用拍摄工具；文件会保存到 ./studio-output/。

工具

工具功能
studio_start打开应用主题的录制浏览器（视口、品牌颜色、已登录状态）
studio_goto在精心设计的标题卡后导航——录制画面中不会出现加载闪烁
studio_click / studio_type光标滑向目标；输入速度模拟真人
studio_scroll采用三次缓动滚动，不会突然跳切
studio_caption左下角故事线字幕（文字形式的“旁白”）
studio_narrate语音旁白，不显示屏幕字幕；朗读期间保持当前镜头
studio_highlight为任意元素或可见文本添加强调色圆环和标签标注
studio_zoom平滑推近某项指标、按钮或结果
studio_hold保持镜头（微小漂移让画面持续流动）
studio_end_card片尾玻璃卡片：标题、副标题、CTA URL
studio_screenshot为当前画面、某个元素或整页拍摄高 DPI PNG
studio_finish停止录制、自动移除暗帧，并导出 MP4（可选导出 GIF）
studio_cancel放弃本次录制

录制已登录区域

Studio 不会读取你的凭据。只需保存一次 Playwright storageState（运行 npx playwright codegen --save-storage=auth.json https://app.example.com），然后将 storage_state_path: "auth.json" 传给 studio_start。

避免录入杂项

  • Cookie 横幅？ 通过 cookies 传入你的同意 Cookie，这样它就不会出现。
  • 聊天气泡 / 开发者浮层？ 在 hide_selectors 中列出选择器——从第 1 帧起就会隐藏。
  • 页面加载时背景颜色闪错？ 将 theme.bg 设为应用的实际背景色。

画面效果出色的原因（经验之谈）

页面提交时不会闪白（页面 CSS 加载前先绘制主题背景），不会出现黑帧（导航隐藏在精心设计的标题卡后，残留暗帧会由 ffmpeg 检测并确定性地剪除），不会卡顿（每个镜头移动都采用对合成器友好的缓动），操作在镜头中清晰可见（可见的光标会先滑向每个目标，再执行操作）。

链接

MIT © AIOProductOS Inc.

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。