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

# 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: ```json { "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: ```json { "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: ```json { "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. --- Try it free — 100 requests/month, no credit card. → [Get started in 2 minutes](https://pagebolt.dev/docs)