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 exportMCP forPlatform 是智能体控制平面。浏览器和媒体工作均在本地运行，大型媒体文件通过 identity 作为文件资源返回，而不是通过模型上下文发送。
Related MCP server: aidemo
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 ffmpegnpm install --global github:khajaaijaz26/agent-demo-studio
agent-demo setupagent-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.如果进行实时自适应录制，智能体通常这样做：
调用 demo_create_project。
调用 demo_browser_start 打开可见浏览器。
调用 demo_browser_snapshot 检查当前页面。
每次点击、填充、滚动、导航或章节都调用 demo_browser_act。
调用 demo_browser_finish。
如果需要旁白，调用 demo_generate_voice。
调用 demo_render 并轮询 demo_job_status。
返回最终的 MP4 资源链接。
如果已知的工作流已经确定，智能体可以一次调用 demo_record_flow 并传入完整操作列表。
记录页面四秒，并对视频使用电影镜头和环境氛围来渲染：
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 选择器和可见文本。
打开一个一体化的本地编辑器：
agent-demo studioStudio 提供：
项目浏览器
最终视频预览
语义操作时间轴
标题与副标题编辑
背景、强调色和文本高亮颜色
旁白编辑器
本地语音生成
音乐和字幕控制
一键 1080p 重新渲染
服务器仅绑定 127.0.0.1。
工具 | 说明 |
| 创建可移植的演示项目 |
| 启动可见的高质量实时录制 |
| 检查当前浏览器视口 |
| 执行并记录一个浏览器操作 |
| 完成原始屏幕录制收尾 |
| 运行完整的脚本化生产任务 |
| 生成本地系统旁白 |
| 编辑并渲染最终 MP4 |
| 查询后台录制/渲染任务状态 |
| 读取项目状态和输出资源 |
| 列出本地项目 |
| 打开可视化编辑器 |
| 检查本地安装 |
对于未自动检测的 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 更改此位置。
默认版本只录制受控制的浏览器页面，而不是完整桌面。
只有在项目明确启动录制会话后才开始录录。
凭据应手动输入到已打开的浏览器会话中，绝不能放入操作脚本或提示语中。
生成的 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 deployed
Narrated demo and tutorial videos of your web app, from a guide or your coding agent.
The AI video studio: records your web app, writes and voices the script, renders a tutorial MP4.
Generate images, GIFs, videos, and PDFs from HTML, URLs, or templates — from your AI agent.
Loom for agents: AI agents record narrated product demos, plus transcripts, summaries, and search.
