如何使用 PageBolt 为任何 MCP 服务器添加浏览器自动化

发布: 1天前 (2026年3月2日 GMT+8 20:15)

8 分钟阅读

I’m sorry, but I can’t retrieve the content from the external link you provided. If you paste the text you’d like translated here, I’ll be happy to translate it into Simplified Chinese while preserving the original formatting and markdown.

Introduction

You’re building an AI agent with Claude. Your agent needs to interact with the web — take screenshots, generate PDFs, record demo videos, inspect page structure.

Write Python scripts to call Puppeteer (fragile, maintenance burden)
Manage your own headless browser pool (infrastructure overhead)
Use PageBolt’s MCP server (tool call, done)

Option 3 takes 5 minutes.

PageBolt provides an open MCP server that gives Claude, Cursor, and Windsurf native access to browser‑automation tools. Your agent calls take_screenshot() directly. No Python. No subprocess management. No infrastructure.

什么是 PageBolt MCP？

MCP（模型上下文协议）是 AI 代理调用外部工具的标准。PageBolt 实现了 MCP 规范，使 AI 代理能够：

对任意 URL 进行截图
从 HTML 或网页生成 PDF
将浏览器交互记录为带解说的视频
检查页面结构（CSS 选择器、元素文本）
执行多步骤浏览器序列

全部通过 Claude Code、Cursor IDE、Windsurf 中的直接函数调用实现。PageBolt MCP 将这些调用转换为托管的 API 请求——您无需自行搭建基础设施。

安装（2 分钟）

步骤 1 – 全局安装 PageBolt MCP

npm install -g pagebolt-mcp

步骤 2 – 获取您的 API 密钥

在此注册（免费套餐：每月 100 次请求），并复制您的 API 密钥。

步骤 3 – 配置 Claude Desktop

编辑 ~/.claude/claude_desktop_config.json：

{
  "mcpServers": {
    "pagebolt": {
      "command": "pagebolt-mcp",
      "env": {
        "PAGEBOLT_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}

重启 Claude Desktop。完成。

步骤 4 – 配置 Cursor（可选）

在项目根目录编辑 .cursor/mcp.json（或全局 Cursor 设置）：

{
  "mcpServers": {
    "pagebolt": {
      "command": "pagebolt-mcp",
      "env": {
        "PAGEBOLT_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}

重启 Cursor。您的代理现在可以调用 PageBolt 工具。

Source: …

可用工具

安装后，您的代理可以调用以下函数。

`take_screenshot(url, options)`

捕获任意 URL 的截图。

Agent: "Take a screenshot of example.com on mobile"
Tool: take_screenshot("https://example.com", {
  "device": "iphone_14_pro",
  "fullPage": true
})
Result: base64 PNG image

`generate_pdf(url, options)`

从 URL 或 HTML 生成 PDF。

Agent: "Generate a PDF of the checkout page"
Tool: generate_pdf("https://mystore.com/checkout", {
  "format": "A4",
  "margin": "1in"
})
Result: base64 PDF

`record_video(steps, narration)`

将浏览器交互录制为带旁白的 MP4。

Agent: "Record a demo of adding a product to cart and checking out"
Tool: record_video([
  {"action": "navigate", "url": "https://mystore.com"},
  {"action": "click", "selector": "button.add-to-cart"},
  {"action": "click", "selector": "a.checkout"}
], {
  "narration": true,
  "audioGuide": "Adding product to cart. Proceeding to checkout."
})
Result: base64 MP4 video

`inspect_page(url)`

获取页面元素的结构化映射——按钮、输入框、带 CSS 选择器的链接。

Agent: "Inspect the login page and find the submit button"
Tool: inspect_page("https://myapp.com/login")
Result: {
  "forms": [{
    "selector": "form.login-form",
    "inputs": [
      {"selector": "#email", "type": "text", "placeholder": "Email"},
      {"selector": "#password", "type": "password", "placeholder": "Password"}
    ],
    "buttons": [{"selector": "button[type=submit]", "text": "Sign In"}]
  }]
}

`run_sequence(steps, options)`

执行多步骤浏览器自动化序列。

Agent: "Run through the checkout flow and tell me if it succeeds"
Tool: run_sequence([
  {"action": "navigate", "url": "https://mystore.com/checkout"},
  {"action": "fill", "selector": "input[name=email]", "value": "test@example.com"},
  {"action": "click", "selector": "button[type=submit]"},
  {"action": "wait_for", "selector": ".order-confirmation", "timeout": 5000}
], {
  "captureScreenshots": true
})
Result: success/failure + screenshot evidence

实际示例

示例 1 – 截图代理

User: "Take a screenshot of each competitor's pricing page"
Agent: Calls take_screenshot() for each URL
Result: PNG images for comparison analysis

您的代理现在可以在无需编写任何 Puppeteer 代码的情况下，自动捕获并分析截图。

示例 2 – 演示视频生成器

User: "Record a narrated demo of our checkout flow"
Agent: Calls record_video() with checkout steps + narration script
Result: MP4 demo video auto‑generated, saved to S3

无需手动录制 5 分钟的屏幕录像，您的代理可以在约 30 秒内完成。

示例 3 – PDF 报告自动化

User: "Generate a PDF report of all product pages"
Agent:
  1. Inspect each product page with inspect_page()
  2. Collect relevant data (titles, prices, images)
  3. Build an HTML template
  4. Call generate_pdf() on the template
Result: Consolidated PDF report

示例 4 – 自动化网页测试

User: “Test if our checkout flow works on mobile and desktop”

Agent:

在 iPhone 预设上运行结账流程
在桌面预设上运行结账流程
对比截图以进行视觉回归检测

Result: 通过/失败并附带证据（截图）

实际案例：演示产品的 AI 代理

User: "Record a demo of the new dashboard feature"

Agent:
1. Calls inspect_page() on staging dashboard
2. Gets CSS selectors for "Add Widget" button, filter controls, etc.
3. Calls record_video() with step‑by‑step interactions
   - Navigate to dashboard
   - Click "Add Widget"
   - Select "Sales Chart"
   - Configure chart options
   - Click "Save"
4. Adds narration: "Adding a sales chart widget to your dashboard..."
5. Returns MP4 file

Result: Professional demo video, auto‑generated, ready to ship

结果：专业的演示视频，自动生成，随时可用。

无需手动录屏。无需等待视频编辑。约 30 秒即可完成。

成本比较：手动 vs. 代理驱动

任务	手动	AI 代理 (PageBolt MCP)
截图 10 个 URL	2 分钟	10 秒
录制 5 分钟演示	20 分钟	1 分钟
生成 PDF 报告	15 分钟	2 分钟
测试结账流程	10 分钟	30 秒

每周节省的总时间： ≈ 10 小时

入门指南

安装
```
npm install -g pagebolt-mcp
```
获取 API 密钥 – 注册于
配置 – 将密钥添加到 Claude Desktop / Cursor 配置
使用 – 你的代理现在原生拥有浏览器工具

无需基础设施。无需设置。你的 AI 代理现在已成为网络的高级用户。 🚀

Limits and Caveats

Authentication: 如有需要，传递 cookies/headers
JavaScript rendering: 完整 Chromium，等待网络空闲
Localhost: 无法访问（我们是托管服务）
Rate limits: 免费层 = 每月 100 次请求；付费层可扩展

下一步

您的代理现在可以：

✅ 截图任意网站
✅ 按需生成 PDF
✅ 录制并配音视频
✅ 检查页面结构
✅ 运行复杂的浏览器序列

使用这些工具自动化先前需要手动操作或脆弱的 Python 脚本才能完成的任务。

免费开始 — 每月 100 次请求，无需信用卡。5 分钟内将浏览器自动化添加到您的 MCP 服务器。

如何使用 PageBolt 为任何 MCP 服务器添加浏览器自动化

Introduction

什么是 PageBolt MCP？

安装（2 分钟）

步骤 1 – 全局安装 PageBolt MCP

步骤 2 – 获取您的 API 密钥

步骤 3 – 配置 Claude Desktop

步骤 4 – 配置 Cursor（可选）

可用工具

`take_screenshot(url, options)`

`generate_pdf(url, options)`

`record_video(steps, narration)`

`inspect_page(url)`

`run_sequence(steps, options)`

实际示例

示例 1 – 截图代理

示例 2 – 演示视频生成器

示例 3 – PDF 报告自动化

示例 4 – 自动化网页测试

实际案例：演示产品的 AI 代理

成本比较：手动 vs. 代理驱动

入门指南

Limits and Caveats

下一步

相关文章

当工作成为心理健康风险时

最难的部分不是隐形——而是被压平成一维

近视、外斜视与代码：为近视专业人士开发视觉训练工具

你的下一个数字产品有 89% 的几率恰好赚到 $0

Introduction

什么是 PageBolt MCP？

安装（2 分钟）

步骤 1 – 全局安装 PageBolt MCP

步骤 2 – 获取您的 API 密钥

步骤 3 – 配置 Claude Desktop

步骤 4 – 配置 Cursor（可选）

可用工具

take_screenshot(url, options)

generate_pdf(url, options)

record_video(steps, narration)

inspect_page(url)

run_sequence(steps, options)

实际示例

示例 1 – 截图代理

示例 2 – 演示视频生成器

示例 3 – PDF 报告自动化

示例 4 – 自动化网页测试

实际案例：演示产品的 AI 代理

成本比较：手动 vs. 代理驱动

入门指南

Limits and Caveats

下一步

相关文章

当工作成为心理健康风险时

最难的部分不是隐形——而是被压平成一维

近视、外斜视与代码：为近视专业人士开发视觉训练工具

你的下一个数字产品有 89% 的几率恰好赚到 $0

安装（2 分钟）

步骤 1 – 全局安装 PageBolt MCP

步骤 2 – 获取您的 API 密钥

步骤 3 – 配置 Claude Desktop

步骤 4 – 配置 Cursor（可选）

`take_screenshot(url, options)`

`generate_pdf(url, options)`

`record_video(steps, narration)`

`inspect_page(url)`

`run_sequence(steps, options)`

示例 1 – 截图代理

示例 2 – 演示视频生成器

示例 3 – PDF 报告自动化

示例 4 – 自动化网页测试