使用 PageBolt 与 GitHub Copilot CLI：通过 MCP 实现自动截图和视频演示

Source: Dev.to

介绍

GitHub Copilot CLI 现在支持 MCP（模型上下文协议），允许 AI 代理直接从终端捕获截图并录制视频——无需安装 Chromium 或管理额外的基础设施。PageBolt 提供了一个与 Copilot CLI 无缝集成的 MCP 服务器，使您能够：

• 对任意 URL 进行截图
• 为演示、测试和文档录制浏览器工作流
• 完全在命令行中操作

设置

步骤 1：创建 MCP 服务器配置

在 ~/.copilot/mcp-servers.json 中创建以下内容：

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
  }
}

步骤 2：获取 API 密钥

从 pagebolt.dev 获取您的 API 密钥。

步骤 3：重启 Copilot CLI

保存配置并添加 API 密钥后，重启 Copilot CLI 以加载新的 MCP 服务器。

使用 Copilot CLI 与 PageBolt

截取截图

copilot "Take a screenshot of https://example.com and tell me what you see"

Copilot 将会：

1. 调用 PageBolt 的截图工具
2. 下载图像
3. 分析图像
4. 报告结果

验证生产仪表盘

copilot "Check if our production dashboard is live at https://app.example.com. Take a screenshot and verify it loaded correctly."

结果： Copilot 捕获仪表盘，分析其正确性，并返回类似 “Dashboard is live. All metrics visible. Status: OK.” 的状态。

录制演示视频

copilot "Record a video of our checkout flow starting at https://shop.example.com and ending at the order confirmation page. Save it to outputs/checkout-demo.mp4"

Copilot 将会：

1. 定义工作流步骤
2. 调用 PageBolt 的 record_video 接口
3. 获取专业的 MP4（可选配旁白）
4. 保存至 outputs/checkout-demo.mp4

完整的 MCP 服务器配置示例

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "pk_live_abc123xyz"]
  },
  "filesystem": {
    "command": "node",
    "args": ["~/.copilot/tools/filesystem.js"]
  }
}

Copilot CLI 会自动发现并使用这两个服务器。

常见使用场景

1. CI/CD 验证

copilot "After deploying to production, take a screenshot of https://app.example.com and verify the new feature is visible"

2. 可视化回归测试

copilot "Compare the current homepage screenshot to the baseline. Report any visual differences."

3. 文档自动化

copilot "Record videos of our top 5 features for the product docs. Save them to docs/videos/"

4. QA 自动化

copilot "Test the entire signup flow. Take screenshots at each step and verify the happy path works."

5. 监控

copilot "Every hour, screenshot our status page and alert if anything looks broken"

相较于前置 MCP 代理的优势

• 可视化反馈： 代理现在可以看到它们生成或测试的 UI。
• 自动化验证： 可视化检查自动完成。
• 全栈演示： 生成视频无需人工摄像师。
• 零基础设施： 无需管理浏览器或无头服务。

定价

• 免费层： 每月 100 次请求
• 付费计划： 起价 $29 / month，每月 500 次请求（无设置费，无基础设施成本）

兼容性

PageBolt 的 MCP 服务器可与任何支持 MCP 的工具配合使用，包括：

• GitHub Copilot CLI
• Claude Desktop
• Cursor
• 其他具备 MCP 集成的 IDE

您的终端现在可以成为完整的演示工作室——只需配置 PageBolt，发出 Copilot 命令，让 AI 处理截图、视频录制和可视化验证。