Skip to main content
Glama
enesruzh
khajaaijaz26

Agent Demo Studio

by khajaaijaz26
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

Agent Demo Studio

Agent Demo Studio 是一个开源的 MCP 服务器、CLI、浏览器录制器和视频编辑器，可让 Codex、Claude Code 和其他 AI 智能体直接从终端制作精美的产品演示。

它会打开一个真实的 Chromium 浏览器，实时执行所请求的工作流，记录每一个动作，并生成高质量 MP4，包含：

  • 1920×1080 H.264 视频

  • 平滑的智能体光标和点击高亮

  • 章节卡片和操作注释

  • 电影感渐变背景和浏览器边框

  • 品牌化开场和结尾

  • 烧录式旁白字幕

  • 本地系统语音旁白

  • 生成的免版税环境音乐

  • 用于预览和重新美化的本地可视化编辑器

无需托管账户。项目、录制内容、旁白、音乐和渲染文件都留在你的机器上。

工作原理

Codex / Claude Code / any MCP client
                 │
            MCP tools
                 │
       Agent Demo Studio engine
       ├── Playwright live recorder
       ├── Semantic action timeline
       ├── Local TTS + generated music
       ├── Sharp design compositor
       └── FFmpeg 1080p renderer
                 │
        Local Studio + MP4 export

MCP forPlatform 是智能体控制平面。浏览器和媒体工作均在本地运行，大型媒体文件通过 identity 作为文件资源返回，而不是通过模型上下文发送。

Related MCP server: ittybitty MCP server

环境要求

  • Node.js 20.12 或更高版本

  • FFmpeg 和 FFprobe 在 PATH 中

  • Codex 和/或 Clonde Code 用于控制智能体

如果需要，请安装 FFmpeg：

# Windows
winget install Gyan.FFmpeg
# macOS
brew install ffmpeg

# Ubuntu / Debian
sudo apt-get install ffmpeg

从 GitHub 安装

npm install --global github:khajaaijaz26/agent-demo-studio
agent-demo setup

agent-demo setup 会安装缺失的 Playright Chromium，并将 MCP 服务器注册到检测到的每个客户端：

  • Codex CLI、Codex IDE 扩展和 Codex 桌面配置

  • Claude Code（用户作用域）

随时运行健康检查：

agent-demo doctor

如果要从源码开发，则：

git clone https://github.com/khajaaijaz26/agent-demo-studio.git
cd agent-demo-studio
npm install
npm run build
npm link
agent-demo setup

让智能体创建演示

设置完成后，启动 Codex 或 Clodu Codex 并提交：

Create a 45-second product demo of https://my-product.example.
Show the sign-up and dashboard workflow in a visible browser.
Use a purple cinematic background, add this narration, generate music,
render a 1080p MP4, and give me the final file.

如果进行实时自适应录制，智能体通常这样做：

  1. 调用 demo_create_project。

  2. 调用 demo_browser_start 打开可见浏览器。

  3. 调用 demo_browser_snapshot 检查当前页面。

  4. 每次点击、填充、滚动、导航或章节都调用 demo_browser_act。

  5. 调用 demo_browser_finish。

  6. 如果需要旁白，调用 demo_generate_voice。

  7. 调用 demo_render 并轮询 demo_job_status。

  8. 返回最终的 MP4 资源链接。

如果已知的工作流已经确定，智能体可以一次调用 demo_record_flow 并传入完整操作列表。

单命令 CLI 演示

记录页面四秒，并对视频使用电影镜头和环境氛围来渲染：

agent-demo quick https://example.com --title "Example product tour"

添加本地旁白语音：

agent-demo quick https://example.com \
  --title "Example product tour" \
  --narration "Meet the fastest way to launch your next project."

浏览器默认可见。如需在 CI 或无人值守的环境录制浏览器，请使用 --headless。

脚本化的演示

录制脚本是可移植的 JSON 文件：

{
  "title": "Analytics in action",
  "subtitle": "From data to insight in seconds",
  "url": "http://localhost:3000",
  "narration": "Create a report and share clear insights in seconds.",
  "actions": [
    {
      "type": "chapter",
      "label": "Create a report",
      "description": "A complete workflow",
      "milliseconds": 1200
    },
    {
      "type": "click",
      "role": "button",
      "name": "Create report",
      "label": "Open the report builder"
    },
    {
      "type": "fill",
      "selector": "#report-name",
      "value": "Q3 Growth Brief",
      "label": "Name the report"
    },
    {
      "type": "click",
      "role": "button",
      "name": "Generate report"
    }
  ],
  "headless": false,
  "generateVoice": true,
  "autoRender": true
}

使用方法：

agent-demo record demo.json

支持的浏览器操作有：

  • navigate

  • click

  • fill

  • press

  • hover

  • scroll

  • wait

  • chapter

Suggested CSS 使用时的 role 和 name 定位器。还支持 CSS 选择器和可见文本。

Visual Studio

打开一个一体化的本地编辑器：

agent-demo studio

Studio 提供：

  • 项目浏览器

  • 最终视频预览

  • 语义操作时间轴

  • 标题与副标题编辑

  • 背景、强调色和文本高亮颜色

  • 旁白编辑器

  • 本地语音生成

  • 音乐和字幕控制

  • 一键 1080p 重新渲染

服务器仅绑定 127.0.0.1。

MCP 工具

工具

说明

demo_create_project

创建可移植的演示项目

demo_browser_start

启动可见的高质量实时录制

demo_browser_snapshot

检查当前浏览器视口

demo_browser_act

执行并记录一个浏览器操作

demo_browser_finish

完成原始屏幕录制收尾

demo_record_flow

运行完整的脚本化生产任务

demo_generate_voice

生成本地系统旁白

demo_render

编辑并渲染最终 MP4

demo_job_status

查询后台录制/渲染任务状态

demo_get_project

读取项目状态和输出资源

demo_list_projects

列出本地项目

demo_open_studio

打开可视化编辑器

demo_doctor

检查本地安装

对于未自动检测的 MCP 客户端：

agent-demo mcp-config

这将打印使用当前 Node 可执行文件和已安装 CLI 路径的可移植 mCPservers 配置。

编辑和音频

渲染器使用可移植的 JSON 项目清单。原始录制不会从未永久地扁平化为单个不可编辑的文件：录制的浏览器事件、旁白、设计设置和音频引用都保留，可以重新渲染。

默认音频不需要 API 密钥：

  • Windows 使用 System.Speech。

  • macOS 使用 say。

  • Linux 在安装了 espeak 后使用它。

  • 环境音乐由 Agent Demo Studio 在本地合成，作为原创生成的素材使用 是安全的。

  • 可以通过 --voice 或 --music 提供的现有 WAV、MP3 或受 FFmpeg 支持的音频。

例如：

agent-demo voice my-project --text "Welcome to the product."
agent-demo render my-project --music ./assets/launch-track.mp3

项目文件

默认情况下，项目存储在 ~/AgentDemoStudio/projects：

projects/my-demo/
├── project.json
├── raw/browser.webm
├── screenshots/latest.png
├── audio/
│   ├── voiceover.wav
│   └── ambient.wav
├── design/
├── captions/
└── exports/
    ├── my-demo.mp4
    └── my-demo-thumbnail.jpg

设置 AGENT_DEMO_HOME 或使用 --root 更改此位置。

隐私和 Safe use

  • 默认版本只录制受控制的浏览器页面，而不是完整桌面。

  • 只有在项目明确启动录制会话后才开始录录。

  • 凭据应手动输入到已打开的浏览器会话中，绝不能放入操作脚本或提示语中。

  • 生成的 Studio 仅绑定到 localhost。

  • 此版本不自动收包发布。

  • 如果演示包含隐私或客户信息，请在分享之前审阅。

当前范围

这个首个开源版本专注于网站和 Web 产品演示。 它尚不捕获任意原生桌面窗口、不克隆声音、不直接发布传播到社交流媒体，也不回到提供云协作。

计划中的改进包括场景重拍、多宽高比、引入页面故事板、多语言配音、团队评审链接和桌面原生录制。

开发

npm install
npm run typecheck
npm test
npm run build
npm run test:smoke

冒烟测试会启动一个真实的无头浏览器,用自带示例产品运行,录制工作流,渲染结果,并验证输出是否为 1920×1080 H.264 视频。

贡献

欢迎 Issue 和拉取请求。在进行大的改动之前,请先阅读 CONTRIBUTING.md。

许可证

MIT.查看 LICENSE。

This server cannot be installed

A
license - permissive license
Not graded
quality - not tested
C
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • mcp

    Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.

  • Clueso

    Make videos and docs with your AI agent — describe what you need, every output stays editable.

  • studio

    Build and run visual creative-production workflows from your AI agent.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/khajaaijaz26/agent-demo-studio'

If you have feedback or need assistance with the MCP directory API, please join our Discord server