Add Screenshot Capability to Windsurf via MCP

Windsurf's Cascade AI can read every file in your project and run terminal commands, but it cannot see a rendered web page. The Model Context Protocol (MCP) changes that: connect the Rendex MCP server and Cascade gains a tool it can call on its own to capture any URL and describe what it sees.

Prerequisites

• Windsurf installed (any recent version with MCP support)
• Node.js on your machine (for npx)
• A Rendex API key. Get one free (100 renders/month, no credit card)

Step 1: Get a Rendex API key

Sign in at rendex.dev/login, open the dashboard, and copy your key. It starts with rdx_.

Step 2: Open the MCP Servers panel

In Windsurf, click the gear icon in the status bar and select MCP Servers. This opens mcp_config.json, the file Cascade reads at startup.

Step 3: Add the Rendex server

{
  "mcpServers": {
    "rendex": {
      "command": "npx",
      "args": ["-y", "@copperline/rendex-mcp"],
      "env": {
        "RENDEX_API_KEY": "rdx_your_key_here"
      }
    }
  }
}

Replace rdx_your_key_here with your actual key and save the file.

Step 4: Restart Cascade

Click Restart Cascade in the MCP Servers panel, or close and reopen Windsurf.

Step 5: Verify the tool is available

In a Cascade chat, ask: What MCP tools do you have? Cascade should list rendex_screenshot.

Step 6: Capture a page

Screenshot https://rendex.dev and describe the hero section.

Capture https://example.com/checkout as a full-page PNG and check for layout issues.

Cascade calls rendex_screenshot, gets the rendered page back, and answers from what it sees:

Troubleshooting

rendex_screenshot does not appear. Run npx @copperline/rendex-mcp --version in a terminal to confirm Node.js is installed.

Authentication error. Check that RENDEX_API_KEY in mcp_config.json matches your dashboard key exactly, including the rdx_ prefix.

Cascade times out. Ask Cascade to add blockResourceTypes: ["media", "font"] or use waitUntil: "domcontentloaded" for faster captures.

Next steps

• MCP documentation — hosted OAuth server config and full tool schema
• Cursor MCP guide — same setup for Cursor (.cursor/mcp.json)
• Free screenshot tool — test URLs before adding to Cascade

Get a free API key and start with 100 captures per month.