How to use the PageBolt MCP server in Claude Desktop

Source: Dev.to

Overview

Claude Desktop can browse the web, write code, and analyze files, but it cannot capture screenshots, generate PDFs, or record browser videos out‑of‑the‑box. Adding the PageBolt MCP server gives Claude these capabilities.

Quick Setup (≈2 minutes)

1. Sign up at . The free tier includes 100 requests per month and requires no credit card.

2. Configure Claude Desktop by editing (or creating) ~/.claude/claude_desktop_config.json:

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

3. Quit and reopen Claude Desktop. The PageBolt tools will appear in the tools panel. No separate npm install is needed—npx -y pagebolt-mcp downloads and runs the server automatically.

Using the PageBolt Tools

Screenshot

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

## Hello World

The screenshot appears inline in the chat.

PDF Generation

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 files are saved to the specified path.

DOM Inspection

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

Claude returns a structured map of every interactive element with CSS selectors, useful for automation.

Multi‑step Automation (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 Image Creation

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 images appear inline in the chat.

Example Interactions

Pricing table check

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 navigation test

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).

Checkout flow

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.

Batch screenshots

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)

Configuration for Cursor

The same ~/.cursor/mcp.json pattern works in Cursor:

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

In Cursor, you can ask the AI to screenshot your running dev server, inspect the DOM for automation selectors, or generate a PDF of the page you’re editing—without leaving the editor.

Available PageBolt Tools

Screenshots and OG images appear inline in the chat. PDFs and videos are saved to the path you specify.

Get Started

Try it free—100 requests per month, no credit card required. → Get started in 2 minutes