How to add screenshot and PDF tools to Cursor and Windsurf via MCP

Source: Dev.to

Introduction

Cursor and Windsurf are AI code editors that support MCP (Model Context Protocol) plugins, which give the AI new tools. The PageBolt MCP server adds web capture capabilities: screenshots, PDFs, video recording, and page inspection. Once installed, you can ask your editor’s AI to:

• “Screenshot my localhost:3000 and tell me if the layout looks right.”
• “Inspect the login page at staging and find the selectors I need to write the E2E test.”
• “Take a full‑page screenshot of my PR preview and attach it to the PR description.”
• “Generate a PDF of this invoice HTML and save it to ./output/invoice.pdf.”

Setup (≈ 2 minutes)

Cursor configuration

Create or edit .cursor/mcp.json in your project root:

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

Alternatively, add the same block to your global Cursor MCP config (~/.cursor/mcp.json) to use it across all projects.

Restart Cursor. The PageBolt tools will appear in the tools panel.

Windsurf configuration

Add the same block to your Windsurf MCP settings:

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

Restart Windsurf.

Using the tools

Screenshots

Screenshot http://localhost:3000 — does the hero section look right?
Take a mobile screenshot of localhost:3000/pricing — check if the table is responsive
Full‑page screenshot of localhost:3000/dashboard

The AI sees the screenshot inline and can give you specific visual feedback.

Inspection

Inspect https://staging.myapp.com/login — give me the selectors for the email field, password field, and submit button. I need to write a Playwright test.
Inspect https://staging.myapp.com/checkout and give me all the interactive element selectors. I'm writing a Playwright test for the checkout flow.

The inspect tool returns a structured map of every interactive element with unique CSS selectors, eliminating guesswork.

PDF generation

Here's my invoice template. Generate a PDF and save it to ./test-output/invoice.pdf
Generate a PDF of https://staging.myapp.com/invoices/1 and tell me if the page breaks look right

Video recording

Record a demo video of the signup flow on localhost:3000 — use a spotlight cursor, dramatic pace, save as demo.mp4

Available PageBolt tools

Why PageBolt stands out

• Localhost support – screenshot pages running on your development server without exposing them publicly.
• Rapid visual debugging – preview changes before committing.
• Responsive layout checks – capture mobile, tablet, or desktop viewports directly from the editor.
• Test fixture generation – create PDFs or screenshots for automated tests.

Reusable configuration pattern

The same JSON block works for any MCP‑compatible client:

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

The npx -y command ensures no global install is required; the package downloads on first use and caches automatically.

Try it free

PageBolt offers 100 free requests per month with no credit card required.
Get started in 2 minutes →