内容
<div align="center">
# AutoDemo
**代码即演示。** 将任何正在运行的 Web 应用程序转换为演示视频、交互式教程和营销素材 — 只需一条命令。由 CI 重新生成，因此它们永远不会过时。
[](https://github.com/praveen-palanisamy/autodemo/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/@praveen-palanisamy/autodemo)
[](LICENSE)
[](docs/AGENTS.md)
[产品页面](https://praveen-palanisamy.github.io/autodemo/) · [快速开始](#快速开始) · [GitHub Actions](docs/GITHUB_ACTION.md) · [适用于 AI 代理](#适用于-AI-代理) · [使用案例](docs/RECIPES.md) · [贡献](#贡献)
</div>
---
```bash
autodemo demo "注册并打开仪表盘" --url http://localhost:3000
```
这条简单的命令驱动一个真实的浏览器通过你的真实应用程序，并生成：
| 工件 | 用途 |
| --- | --- |
| `video.mp4` | 发布帖子、着陆页、PR 描述 — 光标、点击环、人类节奏输入 |
| `index.html` | 静态、可嵌入的**交互式教程**（步骤截图 + 笔记、键盘导航） |
| `assets/*.png` | **命名的营销素材**，用于主页和展示，真实的 UI 区域 |
| `run.json` | 可复制的元数据 — 时机、步骤、工具的工件合约 |
下面的预告片是由 AutoDemo 生成的，关于其自己的产品页面，在 CI 中：
[](https://praveen-palanisamy.github.io/autodemo/demos/site-landing/latest/video.mp4)
## 为什么
演示和截图在 UI 更改时立即过时。重新录制它们是手动的、缓慢的，并且总是在列表的最后。交互式演示 SaaS 工具通过 $300–500/月的计划、每席定价和浏览器扩展来解决新鲜度问题，将快照捕获到他们的云中。
AutoDemo 将演示视为软件的其他部分：
- **版本控制** — 场景是存储库中的 YAML，经过代码审查
- **可复制** — 确定性的 Playwright 步骤，或需要速度时的 AI 步骤
- **持续** — 一个 [5 行 GitHub Actions](docs/GITHUB_ACTION.md) 在合并时重新生成所有内容；失败的演示是失败的用户流程
- **属于您** — 在您的机器和 CI 上运行；无需云，无需遥测，MIT 许可
## 快速开始
**一键安装**（macOS / Linux / WSL — 安装 Bun、CLI 和浏览器）：
```bash
curl -fsSL https://raw.githubusercontent.com/praveen-palanisamy/autodemo/main/install.sh | bash
```
或零安装/按项目：
```bash
bunx @praveen-palanisamy/autodemo --help # Bun
npm add -D @praveen-palanisamy/autodemo # 或作为开发依赖
bunx playwright install chromium
```
### 1. 神奇时刻（AI 编写）
在您的环境中（`ANTHROPIC_API_KEY`、`OPENAI_API_KEY`、`GOOGLE_API_KEY`、`GROQ_API_KEY` — 或本地的 `OLLAMA_HOST`，自动检测）使用任何 LLM 密钥：
```bash
autodemo demo "注册、创建项目、打开仪表盘" --url http://localhost:3000
```
观看浏览器执行，然后打开打印的 `video.mp4` 和教程。添加 `--save` 以保留场景以供重放。
### 2. 确定性演示（无需 LLM）
```bash
autodemo init # 编写注释的 .autodemo.yml
```
```yaml
scenarios:
signup:
description: "使用可读的输入和点击高亮注册"
steps:
- type: goto
url: /signup
- type: fill
selector: "[data-testid=email]"
value: "maya@example.com"
typing: true
- type: click
selector: "[data-testid=submit]"
- type: waitFor
text: "仪表盘"
- type: screenshot
name: dashboard-hero
selector: "[data-testid=dashboard]"
```
```bash
autodemo run signup --url http://localhost:3000 # 一个场景
autodemo run --all --url http://localhost:3000 --headless # 所有场景（CI）
```
### 3. 永久保持新鲜（CI）
```yaml
- uses: praveen-palanisamy/autodemo@v0
with:
url: http://localhost:3000
```
完整的输入和配方：[docs/GITHUB_ACTION.md](docs/GITHUB_ACTION.md).
## 适用于 AI 代理
AutoDemo 是代理原生的：编码代理使用它来**展示他们的工作** — 每个 PR 的演示视频。
```bash
bunx @praveen-palanisamy/autodemo mcp --no-tui # 通过 stdio 的 MCP 服务器
```
Cursor / Claude Code / Codex、JSON CLI 合约和插入式规则代码段的单行注册：[docs/AGENTS.md](docs/AGENTS.md).
## 功能
- **任何 LLM，或无** — OpenAI、Anthropic、Google、Groq、Ollama/本地，任何 OpenAI 兼容端点；确定性场景需要零密钥
- **身份验证流程** — 可重用的浏览器存储状态；登录一次，演示登录永久
- **营销级输出** — 隐藏开发叠加层，修剪加载噪音（`videoStartStep`），命名区域捕获，自定义光标和点击高亮
- **故事工具** — 屏幕`narrate`节拍，教程中的逐步笔记
- **交互式 TUI** — 用于记录和运行的向导（`autodemo record --interactive`）
- **CI 级** — `--json` 输出，稳定退出代码，失败时 `trace.zip`，`run.json` 中的工件合约
## 比较
| | **AutoDemo** | Demo SaaS (Supademo, Arcade, Storylane…) | 屏幕录制器 |
| --- | --- | --- | --- |
| 价格 | 免费，OSS | $300–500/月用于 HTML 捕获，每席 | $10–30/月 |
| 新鲜度 | 在 CI 中重新生成 | 手动重新捕获 | 手动重新录制 |
| 输出 | 视频 + 教程 + 静态图片，一次运行 | 通常一种格式 | 仅视频 |
| 在 git / 代码审查中 | ✅ | ❌ | ❌ |
| 代理可操作（MCP） | ✅ | ❌ | ❌ |
SaaS 工具适用于无代码编辑、分析和托管演示中心。AutoDemo 适用于希望演示成为**构建工件**的团队。
## 文档
| | |
| --- | --- |
| [CLI 参考](docs/CLI.md) | 命令、标志、退出代码 |
| [配置](docs/CONFIG.md) | `.autodemo.yml`，步骤类型，LLM 提供商，身份验证状态 |
| [GitHub Actions](docs/GITHUB_ACTION.md) | CI 中的演示 |
| [AI 代理](docs/AGENTS.md) | MCP 设置，JSON CLI，规则代码段 |
| [配方](docs/RECIPES.md) | 复制粘贴场景 |
| [架构](docs/ARCHITECTURE.md) | 引擎，运行器，工件管道 |
| [测试](docs/TESTING.md) · [本地 CI](docs/CI_LOCAL.md) | 开发工作流 |
## 要求
- [Bun](https://bun.sh) ≥ 1.3（安装程序设置）
- Playwright Chromium（一次性 `bunx playwright install chromium`）
- `ffmpeg` 用于 MP4 导出（可选 — 其他功能无需它即可工作）
## 贡献
15 分钟设置、项目游览和 `good first issue` 列表位于 [CONTRIBUTING.md](CONTRIBUTING.md). 最低摩擦的贡献是 [场景配方](https://github.com/praveen-palanisamy/autodemo/issues/new/choose).
```bash
bun install && bun run playwright:install
bun test && bun run lint && bun run typecheck
```
## 许可证
[MIT](LICENSE) © Praveen Palanisamy 和 AutoDemo 贡献者。
---
<div align="center">
<sub>本 README 的预告片、[产品页面](https://praveen-palanisamy.github.io/autodemo/)及其演示视频都是由 AutoDemo 本身生成的 — 每次部署。</sub>
</div>
