使用说明

demosmith mcp

MCP（模型上下文协议）服务器，用于自动录制演示视频、文档和屏幕截图。非常适合使用AI代理创建产品演示、教程和文档。

演示

演示：GitHub登录流程，带有动画光标、点击效果和自动生成的文档

特性

视频录制 -浏览器会话的自动屏幕录制
电脑屏幕截图工具 -每一步自动截图
动画光标 -带有点击效果和声音的平滑光标动画
TTS叙事 -与多个提供商（OpenAI、ElevenLabs、Azure、Edge）合作的人工智能配音
多种输出格式:
- 视频（WebM）
- 带音频的视频（MP4）
- 剧作家追踪（交互式回放）
- Markdown指南
- JSON步骤
- 叙述脚本+JSON（带时间戳）
- 字幕（SRT/VTT）
- 交互式HTML教程
- GIF预览
多语言支持 -英语和汉语
多标签支持 -使用多个浏览器选项卡
柔性元件选择 -按引用、文本、标签、占位符、CSS、XPath

安装

npm install demosmith-mcp
npx playwright install chromium

用法

作为MCP服务器

添加到您的Claude Code MCP配置中(~/.claude/mcp.json):

{
  "mcpServers": {
    "demosmith": {
      "command": "npx",
      "args": ["demosmith-mcp"]
    }
  }
}

命令行接口命令模式

# Replay a recorded demo
demosmith replay ./steps.json -o ./output --video

# Generate documentation from steps
demosmith generate ./steps.json -l zh -o ./docs

# Serve generated files locally
demosmith serve ./output

MCP工具

会话管理

工具	说明
`demosmith_start`	开始新的演示录制会话
`demosmith_end`	结束会议并生成所有可交付成果
`demosmith_status`	获取当前会话状态

导航与发现

工具	说明
`demosmith_navigate`	导航到URL
`demosmith_snapshot`	获取元素引用的可访问性树快照

核心行动

工具	说明
`demosmith_click`	单击元素（使用动画光标）
`demosmith_fill`	填充文本输入（带键入动画）
`demosmith_select`	从下拉列表中选择
`demosmith_press_key`	按键盘键或组合键
`demosmith_hover`	将鼠标悬停在元素上（用于工具提示/菜单）
`demosmith_drag`	拖放
`demosmith_upload`	上传文件

页面操作

工具	说明
`demosmith_scroll`	滚动页面或元素
`demosmith_wait`	等待条件
`demosmith_screenshot`	手动截图

验证

工具	说明
`demosmith_assert`	验证条件（文本、可见性、URL等）

选项卡管理

工具	说明
`demosmith_new_tab`	打开新浏览器选项卡
`demosmith_switch_tab`	切换到其他选项卡
`demosmith_close_tab`	关闭选项卡
`demosmith_list_tabs`	列出所有打开的选项卡

元素选择器

demosmith支持多种定位元素的方法：

# By ref (from snapshot)
"1", "2", "3"

# By visible text
"text:Submit"
"text:/Submit|Cancel/"  # regex

# By label
"label:Email"

# By placeholder
"placeholder:Enter your name"

# By role and name
"role:button:Submit"
"role:textbox"

# By test ID
"testid:submit-btn"

# By CSS selector
"css:.btn-primary"

# By XPath
"xpath://button[@type='submit']"

# By alt text
"alt:Logo"

# By title
"title:Close"

示例工作流程

1. demosmith_start(url="https://example.com/login", title="Login Demo")
2. demosmith_snapshot()  → Get element refs
3. demosmith_fill(ref="label:Email", value="user@example.com", description="Enter email")
4. demosmith_fill(ref="label:Password", value="password123", description="Enter password")
5. demosmith_click(ref="text:Sign In", description="Click sign in button")
6. demosmith_assert(type="url", expected="/dashboard", description="Verify redirect")
7. demosmith_end()  → Returns all deliverables

输出文件

结束会话后，将生成以下文件：

output/
├── demo.webm              # Screen recording video
├── demo-with-audio.mp4    # Video with TTS narration (if TTS enabled)
├── demo.gif               # Animated GIF preview
├── trace.zip              # Playwright trace (interactive replay)
├── guide.md               # Markdown documentation
├── steps.json             # Structured step data
├── narration.txt          # Voiceover script
├── narration.json         # Timed narration for TTS APIs
├── narration.mp3          # Generated audio (if TTS enabled)
├── subtitles.srt          # SRT subtitles
├── subtitles.vtt          # VTT subtitles
├── tutorial.html          # Interactive HTML tutorial
├── animated-preview.html  # HTML preview (fallback)
└── assets/
    ├── step-001.png
    ├── step-002.png
    └── ...

看 examples/github登录演示/ 以获得完整的示例输出。

配置选项

启动会话选项

选项	类型	默认值	描述
`title`	string	必填	演示标题
`startUrl`	string	必需	起始URL
`outputDir`	string	临时目录	输出目录
`video`	boolean	true	录制视频
`trace`	boolean	true	记录剧作家跟踪
`screenshotOnStep`	boolean	true	每一步自动截图
`headless`	boolean	false	无头运行浏览器
`viewport`	对象	1280x720	浏览器视口大小
`storageState`	string	-	登录状态文件的路径

动画选项

点击并填充动作支持动画选项：

选项	类型	默认值	描述
`animated`	boolean	true	启用光标动画
`moveDuration`	number	500	光标移动持续时间（ms）
`typeDelay`	number	50	按键之间的延迟（ms）

断言类型

这 demosmith_assert 该工具支持以下验证类型：

类型	描述
`text`	检查元素文本内容
`visible`	检查元件是否可见
`hidden`	检查元素是否隐藏
`url`	检查当前URL
`title`	检查页面标题
`value`	检查输入值
`checked`	复选框已选中
`enabled`	检查元件是否启用
`disabled`	检查元件已禁用
`count`	检查匹配元素的数量

多语言支持

生成的内容支持英语和中文。通过CLI设置：

demosmith generate ./steps.json -l zh  # Chinese
demosmith generate ./steps.json -l en  # English (default)

自定义模板

您可以使用类似Mustache的语法为输出生成提供自定义模板：

# {{session.title}}

{{#each steps}}
## Step {{this.id}}: {{this.description}}

{{#if this.screenshotRelative}}
![Screenshot]({{this.screenshotRelative}})
{{/if}}
{{/each}}

登录会话支持

使用Playwright保存登录会话：

await context.storageState({ path: 'auth.json' });

在演示中使用：

demosmith_start(url="...", title="...", storageState="auth.json")

TTS叙事

通过将TTS选项传递给 demosmith_end:

demosmith_end(tts={
  provider: "openai",
  apiKey: "sk-...",
  voice: "alloy"
})

支持的TTS提供商

提供商	需要API密钥	语音	注释
`openai`	是	合金、回声、寓言、玛瑙、新星、微光	最佳品质
`elevenlabs`	是	各种语音ID	最自然
`azure`	是的，美国JennyNeural等。	SSML支持
`edge`	美国AriaNeural等。	免费，需要 `edge-tts` CLI

TTS选项

选项	类型	描述
`provider`	string	TTS提供者（openai、elevenlabs、azure、edge）
`apiKey`	string	neneneba API键（边缘不需要）
`voice`	string	语音ID或名称
`language`	string	语言代码（例如en-US、zh-CN）
`speed`	number	语音速度倍增器

环境变量

对于Azure TTS，设置区域：

export AZURE_SPEECH_REGION=eastus

叙述JSON格式

生成的 narration.json 包含用于自定义TTS集成的定时段：

{
  "title": "Login Demo",
  "totalDurationMs": 15000,
  "segments": [
    {
      "stepId": 1,
      "startMs": 2000,
      "endMs": 4500,
      "durationMs": 2500,
      "text": "Click the login button"
    }
  ]
}

发展

# Install dependencies
pnpm install

# Build
pnpm build

# Run MCP server
pnpm start

# Run CLI
pnpm cli help

许可证

麻省理工学院