How to add browser automation to any MCP server using PageBolt

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.

You could:

1. Write Python scripts to call Puppeteer (fragile, maintenance burden)


2. Manage your own headless browser pool (infrastructure overhead)


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

What is PageBolt MCP?

MCP (Model Context Protocol) is a standard for AI agents to call external tools. PageBolt implements the MCP spec so AI agents can:

• Take screenshots of any URL


• Generate PDFs from HTML or web pages


• Record browser interactions as narrated videos


• Inspect page structure (CSS selectors, element text)


• Run multi-step browser sequences


• All via direct function calls in Claude Code, Cursor IDE, Windsurf

PageBolt MCP translates these function calls into hosted API requests. No infrastructure on your end.

Installation: 2 minutes

Step 1: Install PageBolt MCP globally

npm install -g pagebolt-mcp

Step 2: Get your API key

Sign up at pagebolt.dev. Free tier: 100 requests/month.

Copy your API key.

Step 3: Configure Claude Desktop

Edit ~/.claude/claude_desktop_config.json:

{

  "mcpServers": {

    "pagebolt": {

      "command": "pagebolt-mcp",

      "env": {

        "PAGEBOLT_API_KEY": "YOUR_API_KEY_HERE"

      }

    }

  }

}

Restart Claude Desktop. Done.

Step 4: Configure Cursor (optional)

Edit .cursor/mcp.json in your project root (or global Cursor settings):

{

  "mcpServers": {

    "pagebolt": {

      "command": "pagebolt-mcp",

      "env": {

        "PAGEBOLT_API_KEY": "YOUR_API_KEY_HERE"

      }

    }

  }

}

Restart Cursor. Now your agent can call PageBolt tools.

Tools available

Once installed, your agent can call:

take_screenshot(url, options)

Capture a screenshot of any 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)

Generate a PDF from a URL or HTML.

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)

Record a browser interaction as an MP4 with narration.

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)

Get structured map of page elements — buttons, inputs, links with CSS selectors.

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)

Execute a multi-step browser automation sequence.

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": "[email protected]"},

  {"action": "click", "selector": "button[type=submit]"},

  {"action": "wait_for", "selector": ".order-confirmation", "timeout": 5000}

], {

  "captureScreenshots": true

})

Result: success/failure + screenshot evidence

Practical examples

Example 1: Screenshot-taking agent

User: "Take a screenshot of each competitor's pricing page"

Agent: Calls take_screenshot() for each URL

Result: PNG images for comparison analysis

Your agent can now autonomously capture and analyze screenshots without you writing any Puppeteer code.

Example 2: Demo video generator

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

Instead of manually recording a 5-minute screencast, your agent does it in 30 seconds.

Example 3: PDF report automation

User: "Generate a PDF report of all product pages"

Agent: 

  1. Inspect each product page (using inspect_page)

  2. Take screenshot

  3. Generate PDF (using generate_pdf)

  4. Combine into report

Result: Multi-page PDF report, no manual work

Example 4: Automated web testing

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

Agent:

  1. Run checkout sequence on iPhone preset

  2. Run checkout sequence on desktop preset

  3. Compare screenshots for visual regression

Result: Pass/fail with evidence (screenshots)

Real-world use case: AI agent that demos products

Here's a practical agent workflow:

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

No manual screencast. No waiting for video editor. Done in 30 seconds.

Cost comparison: Manual vs agent-driven

Getting started

1. 
   Install: npm install -g pagebolt-mcp
   


2. 
   Get API key: Sign up at pagebolt.dev
   


3. 
   Configure: Add to Claude Desktop / Cursor config


4. 
   Use: Your agent now has browser tools natively

No infrastructure. No setup. Your AI agent is now a power user of the web.

Limits and caveats

• Authentication: Pass cookies/headers if needed


• JavaScript rendering: Full Chromium, waits for network idle


• Localhost: Not accessible (we're a hosted service)


• Rate limits: Free tier 100 requests/month, paid tiers scale

Next steps

Your agent can now:

• ✅ Screenshot any website


• ✅ Generate PDFs on demand


• ✅ Record and narrate videos


• ✅ Inspect page structure


• ✅ Run complex browser sequences

Use these tools to automate tasks that previously required manual work or fragile Python scripts.

Start free — 100 requests/month, no credit card. Add browser automation to your MCP server in 5 minutes.