DEV Community

Custodia-Admin
Custodia-Admin

Posted on • Originally published at pagebolt.dev

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

#mcp #cursor #ai #devtools

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"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Try it free — 100 requests/month, no credit card. → Get started in 2 minutes

Top comments (0)