DEV Community

Custodia-Admin
Custodia-Admin

Posted on

How to use PageBolt's MCP server in Claude Desktop, Cursor, and Windsurf

How to use PageBolt's MCP server in Claude Desktop, Cursor, and Windsurf

AI agents need web access. But running Chromium locally is expensive: 300MB per deployment, cold starts, memory spikes. Most agents can't do it.

MCP (Model Context Protocol) solves this. It's a standard that lets AI assistants call external tools natively—without installing anything.

PageBolt's MCP server gives your AI agent two superpowers:

  1. screenshot — Take screenshots of any URL
  2. record_video — Record browser workflows as MP4s with AI narration

No local Chromium. No infrastructure. One API call.

Install PageBolt MCP in Claude Desktop

Claude Desktop auto-discovers MCP servers from a config file. Here's how:

Step 1: Create ~/.claude/mcp-servers.json:

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Get your API key at pagebolt.dev

Step 3: Restart Claude Desktop

That's it. Claude Desktop now has native access to PageBolt's screenshot and video tools.

Using PageBolt in Claude Desktop

Open Claude Desktop and ask:

"Take a screenshot of https://example.com and tell me what's on the page"

Claude will:

  1. Call PageBolt's screenshot tool automatically
  2. Download the image
  3. Analyze it
  4. Report back to you

No prompting needed. It just works.

Example: AI Agent Workflow

Here's how an AI agent uses PageBolt to debug a deployment:

User: "Check if our landing page is live"

Agent (thinks): I need to screenshot the landing page URL
Agent: Calls PageBolt screenshot tool → gets image
Agent: Analyzes image → sees "404 Not Found"
Agent: Reports: "The landing page is returning 404. The deployment may have failed."
Enter fullscreen mode Exit fullscreen mode

Install PageBolt MCP in Cursor

Cursor uses the same MCP protocol. Same config file:

Step 1: Create ~/.cursor/mcp-servers.json:

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Restart Cursor

Now Cursor's AI agent has native access to screenshot and video recording.

Real Example: Cursor Agent Testing

Developer: "Use an agent to test the checkout flow"

Agent:
  1. Screenshots the homepage
  2. Sees "Add to Cart" button
  3. Clicks it (via PageBolt record_video)
  4. Records video of entire checkout flow
  5. Saves MP4 to outputs/

Developer gets video proof that checkout works.
Enter fullscreen mode Exit fullscreen mode

Install PageBolt MCP in Windsurf

Windsurf is a Cursor fork. Same setup:

Step 1: Create ~/.windsurf/mcp-servers.json (or use Cursor's config):

{
  "pagebolt": {
    "command": "npx",
    "args": ["@pagebolt/mcp", "--api-key", "YOUR_API_KEY"]
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Restart Windsurf

Windsurf's AI agent now has native screenshot and video tools.

Why This Matters

Before MCP, AI agents were limited:

  • They could analyze code, but not see what the code produced
  • They could write tests, but not visually verify them
  • They could deploy code, but not verify the deployment worked

With PageBolt MCP, agents can:

  • Screenshot any URL instantly
  • Record videos of workflows
  • Verify their own work
  • Debug without leaving the IDE

Pricing

PageBolt MCP uses the same API:

  • Free tier: 100 requests/month
  • Paid: From $29/month (500 requests)
  • No setup fees, no infrastructure costs

Next Steps

  1. Install PageBolt MCP in your IDE (Claude Desktop, Cursor, or Windsurf)
  2. Ask your agent to screenshot a URL
  3. Ask it to record a video of a workflow
  4. Watch it work natively without any infrastructure setup

Your AI agent just got superpowers.


PageBolt is the MCP server for web automation. Use it in Claude Desktop, Cursor, Windsurf, or any IDE that supports MCP.

Top comments (0)