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

Source: Dev.to

Introduction

AI agents need web access, but running Chromium locally is expensive: large deployment size, cold starts, and memory spikes. Most agents can’t handle it.

Model Context Protocol (MCP) solves this by letting AI assistants call external tools natively—without installing anything. PageBolt’s MCP server gives your AI agent two super‑powers:

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

All without a local Chromium instance or extra infrastructure—just one API call.

Install PageBolt MCP in Claude Desktop

Claude Desktop auto‑discovers MCP servers from a config file.

Step 1: Create the config file

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

Save it as ~/.claude/mcp-servers.json.

Step 2: Get your API key

Visit and copy your API key.

Step 3: Restart Claude Desktop

After the restart Claude Desktop can call PageBolt’s screenshot and video tools natively.

Using PageBolt in Claude Desktop

Open Claude Desktop and ask, for example:

“Take a screenshot of https://example.com and tell me what’s on the page”

Claude will automatically:

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

No extra prompting required.

Example: AI Agent Workflow

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

Install PageBolt MCP in Cursor

Cursor uses the same MCP protocol and config file.

Step 1: Create the config file

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

Save it as ~/.cursor/mcp-servers.json.

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 the entire checkout flow
  5. Saves MP4 to outputs/

Developer receives video proof that checkout works.

Install PageBolt MCP in Windsurf

Windsurf is a Cursor fork and uses the same setup.

Step 1: Create the config file

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

Save it as ~/.windsurf/mcp-servers.json (or reuse the Cursor config).

Step 2: Restart Windsurf

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

Why This Matters

Before MCP, AI agents could:

• Analyze code but not see the resulting UI
• Write tests but not visually verify them
• Deploy code but not confirm the deployment succeeded

With PageBolt MCP, agents can:

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

Pricing

• Free tier: 100 requests/month
• Paid tier: Starting at $29/month for 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. Observe the results—no extra infrastructure needed.

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