How to Add Screenshot and PDF Tools to Cursor and Windsurf via MCP

Cursor and Windsurf are AI code editors that support MCP servers — Model Context Protocol plugins that give the AI new tools. The PageBolt MCP server adds web capture: screenshots, PDFs, video recording, and page inspection.

Once installed, you can ask your editor's AI:

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

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

Or add to your global Cursor MCP config (~/.cursor/mcp.json) to use across all projects.

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

Windsurf

Add to your Windsurf MCP settings:

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

Restart Windsurf.

What your AI can now do

Screenshot your running dev server

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

Inspect a page before writing selectors

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

The AI gets a structured map of every interactive element with CSS selectors — no more guessing .btn-primary and being wrong.

Verify your UI changes visually

"I just changed the nav component. Screenshot localhost:3000 on mobile
and tell me if the hamburger menu still works."

Instant visual feedback without switching to a browser.

Generate PDFs from your templates

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

Record a demo video of your app

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

Write E2E tests faster

"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 every button, input, link, and form with a unique CSS selector — the exact input you need to write reliable E2E tests.

All available tools

Tool	Example prompt
take_screenshot	"Screenshot localhost:3000 on iPhone 14 Pro in dark mode"
generate_pdf	"PDF of https://myapp.com/report, save to ./report.pdf"
create_og_image	"OG image for 'How to Build a SaaS', dark gradient"
run_sequence	"Navigate to /login, fill email, click submit, screenshot result"
record_video	"Record the onboarding flow, spotlight cursor, save demo.mp4"
inspect_page	"Inspect /checkout — find selectors for the payment form"
list_devices	"What iPhone viewport sizes are available?"
check_usage	"How many API requests have I used this month?"

Works with localhost

Unlike most web capture tools, PageBolt can screenshot localhost — useful for:

• Previewing your work before committing
• Visual debugging during development
• Checking responsive layouts without a browser
• Generating test fixtures from your dev server

"Screenshot http://localhost:3000/components/button — show me all the button variants"

Works with Cline and other MCP clients

Same config pattern for any MCP-compatible client:

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

The PageBolt MCP server uses npx -y so no global install is required — it downloads on first use and caches automatically.