How to Use the PageBolt MCP Server in Claude Desktop

Claude Desktop can browse the web, write code, and analyze files. But it can't capture screenshots, generate PDFs, or record browser videos — until you add the PageBolt MCP server.

Once it's installed, you can ask Claude things like:

"Screenshot my landing page on mobile and tell me what looks off"
"Generate a PDF invoice from this HTML template and save it to my Desktop"
"Record a demo video of the signup flow on staging"
"Inspect the login page and find the CSS selector for the email field"

Setup takes about 2 minutes.

Install

1. Get a free API key

2. Add to Claude Desktop config

Open (or create) ~/.claude/claude_desktop_config.json and add:

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

3. Restart Claude Desktop

Quit and reopen. The PageBolt tools will appear in the tools panel.

That's it. No npm install needed — npx -y pagebolt-mcp downloads and runs the server automatically.

What you can ask Claude to do

Take a 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 like:
  <h1 style='color:blue'>Hello World</h1>"

The screenshot appears inline in your chat.

Generate a 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"

Inspect a page (before automating it)

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

Claude gets back a structured map of every interactive element with CSS selectors. Use this before asking Claude to automate something — it finds the right selectors so the sequence doesn't guess.

Run a multi-step 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

"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 images on demand

"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"

Real workflows

Review a design in context

Ask Claude to screenshot your staging URL, then give feedback:

You: "Screenshot https://staging.yourapp.com/pricing — does the pricing table look
right on mobile?"

Claude: [takes mobile screenshot, displays inline]
"The table is overflowing on mobile — the third column is getting cut off at the
right edge. The pricing toggle button also looks quite small at this viewport.
Want me to screenshot the desktop version for comparison?"

Debug a layout issue

You: "Here's my HTML. Screenshot it on mobile and tell me if the nav collapses correctly."

Claude: [screenshots the HTML]
"The hamburger menu appears but the dropdown isn't visible — looks like it might
be hidden behind the hero section. The z-index could be the issue."

Automate a manual QA step

You: "Go to https://yourapp.com/checkout, add the first product to cart, proceed
to checkout, and screenshot each step."

Claude: [runs sequence, returns screenshots of each step]
"Here are screenshots of: the product page, cart, checkout form, and confirmation
page. The checkout form is missing the CVV field label on step 3."

Generate docs with 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: [captures all three, saves to disk]
"Screenshots saved: dashboard.png (1280×900), settings.png (1280×1240), billing.png (1280×680)"

Works in Cursor and Windsurf too

Same config pattern for Cursor (.cursor/mcp.json):

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

In Cursor, this means 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 working on — all without leaving your editor.

Available tools

Once installed, Claude has access to:

Tool	What it does
`take_screenshot`	Screenshot any URL, HTML, or Markdown — 30+ parameters
`generate_pdf`	PDF from URL or HTML — save to disk
`create_og_image`	Social card images from templates or custom HTML
`run_sequence`	Multi-step browser automation (navigate, click, fill, screenshot)
`record_video`	Browser demo video as MP4/WebM/GIF with cursor effects
`inspect_page`	Structured map of page elements with CSS selectors
`list_devices`	25+ device presets (iPhone, iPad, MacBook, Galaxy, etc.)
`check_usage`	Monitor your API quota

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