如何在 Claude Desktop 中使用 PageBolt MCP 服务器

Source: Dev.to

请提供您希望翻译的完整文本内容，我将按照要求保留源链接、格式和代码块，仅翻译正文部分为简体中文。

概述

Claude Desktop 可以浏览网页、编写代码和分析文件，但它默认无法截取屏幕截图、生成 PDF 或录制浏览器视频。添加 PageBolt MCP server 可为 Claude 提供这些功能。

快速设置（≈2 分钟）

1. 注册 于 . 免费套餐每月包含 100 次请求，且无需信用卡。

2. 配置 Claude Desktop，通过编辑（或创建）~/.claude/claude_desktop_config.json：

   {
     "mcpServers": {
       "pagebolt": {
         "command": "npx",
         "args": ["-y", "pagebolt-mcp"],
         "env": {
           "PAGEBOLT_API_KEY": "pf_live_your_key_here"
         }
       }
     }
   }

3. 退出并重新打开 Claude Desktop。PageBolt 工具将出现在工具面板中。无需单独执行 npm install——npx -y pagebolt-mcp 会自动下载并运行服务器。

使用 PageBolt 工具

截图

Screenshot https://example.com in dark mode at full page width
Take a screenshot of my staging site on an iPhone 14 Pro
Capture this HTML and show me what it looks

你好，世界

The screenshot appears inline in the chat.

PDF 生成

Generate a PDF of https://news.ycombinator.com and save it to ~/Desktop/hn.pdf
Create a PDF from this invoice HTML in Letter format
PDF this URL: https://yourapp.com/invoices/123

PDF 文件会保存到指定路径。

DOM 检查

Inspect https://example.com/login — what's the CSS selector for the email field and submit button?

Claude 返回每个交互元素的结构化映射及其 CSS 选择器，便于自动化。

多步骤自动化 (run_sequence)

Go to https://yourapp.com, click the 'Sign up' button, fill in the email field with test@example.com, click submit, and screenshot the result
Record a demo video of the login flow at https://yourapp.com — use a spotlight cursor and save as demo.mp4
Make a narrated walkthrough of the onboarding flow. Voice: nova. Pace: dramatic.

OG 图像创建

Create an OG image for a blog post titled 'How to build a SaaS in a weekend' — dark gradient, white text, save to og-image.png

OG 图像会内嵌显示在聊天中。

示例交互

定价表检查

You: Screenshot https://staging.yourapp.com/pricing — does the pricing table look right on mobile?
Claude: [mobile screenshot] The table overflows on mobile; the third column is cut off.

HTML 导航测试

You: Here's my HTML. Screenshot it on mobile and tell me if the nav collapses correctly.
Claude: [screenshot] The hamburger menu appears but the dropdown is hidden behind the hero section (z-index issue).

结账流程

You: Go to https://yourapp.com/checkout, add the first product to cart, proceed to checkout, and screenshot each step.
Claude: [screenshots] The checkout form is missing the CVV field label on step 3.

批量截图

You: Screenshot every page in this list and save them to ./docs/screenshots/:
https://yourapp.com/dashboard
https://yourapp.com/settings
https://yourapp.com/billing
Claude: Screenshots saved:
- dashboard.png (1280×900)
- settings.png (1280×1240)
- billing.png (1280×680)

Cursor 的配置

相同的 ~/.cursor/mcp.json 模式在 Cursor 中同样适用：

{
  "mcpServers": {
    "pagebolt": {
      "command": "npx",
      "args": ["-y", "pagebolt-mcp"],
      "env": {
        "PAGEBOLT_API_KEY": "pf_live_your_key_here"
      }
    }
  }
}

在 Cursor 中，你可以让 AI 截取正在运行的开发服务器的屏幕截图，检查 DOM 以获取自动化选择器，或生成你正在编辑的页面的 PDF——无需离开编辑器。

可用的 PageBolt 工具

截图和 OG 图像会直接显示在聊天中。PDF 和视频会保存到您指定的路径。

开始使用

免费试用——每月 100 次请求，无需信用卡。 → 2 分钟快速开始