Demosmith MCP

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支持多种定位元素的方法：

# 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
    └── ...

看 以获得完整的示例输出。

配置选项

启动会话选项

动画选项

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

断言类型

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

多语言支持

生成的内容支持英语和中文。通过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}}

{{/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提供商

TTS选项

环境变量

对于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

许可证

麻省理工学院