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.

This guide configures rendex_screenshot in Windsurf in about five minutes. You get full-page PNG, JPEG, WebP, and PDF capture from inside Cascade, with no browser to manage.

Prerequisites

Windsurf installed (any recent version with MCP support).
Node.js on your machine so Windsurf can run the server with npx.
A Rendex API key. The free tier includes 100 renders per month with no credit card required.

Step 1: Get a Rendex API key

Sign in at rendex.dev/login, open the dashboard, and copy your key. It starts with rdx_. Keep it out of version control. The quickstart covers rate limits and key rotation if you need those details.

Step 2: Open the MCP Servers panel

In Windsurf, click the gear icon in the status bar (or open the Command Palette and search for MCP Servers). This opens mcp_config.json, the file Cascade reads at startup to discover which MCP servers to connect to.

Step 3: Add the Rendex server

Paste the block below into mcp_config.json. Replace rdx_your_key_here with your actual key. The npx command downloads and runs the published package, so there is nothing to install separately.

mcp_config.json

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

Save the file. If mcp_config.json already has other servers, add the "rendex" block inside the existing mcpServers object.

Step 4: Restart Cascade

Click Restart Cascade in the MCP Servers panel, or close and reopen Windsurf. Cascade will start the Rendex server in the background and register its tools.

Step 5: Verify the tool is available

In a Cascade chat, ask: What MCP tools do you have? Cascade should list rendex_screenshot along with a short description of its inputs. If it does not appear, check Troubleshooting below.

Step 6: Capture a page

Once the tool is registered, you can ask Cascade to capture any URL in natural language:

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

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

Render https://example.com/dashboard and tell me if the loading spinner is still visible.

Cascade calls rendex_screenshot, waits for the render, and returns the image URL along with its analysis of the captured page. You can then ask follow-up questions about what it sees.

Example: Cascade captures and reads a page

Ask Cascade to screenshot a URL and it calls rendex_screenshot, gets the rendered page back, and answers from what it actually sees. Here it captures stripe.com and summarizes the hero.

Windsurf Cascade chat: the user asks to screenshot stripe.com, Cascade calls rendex_screenshot, and returns the captured Stripe hero in a browser frame with a written summary of the headline and CTA — Cascade calls rendex_screenshot, gets the captured page back, and summarizes it from what it sees

Using the hosted OAuth server

If you prefer not to store the API key in a config file, the Rendex MCP server also runs at mcp.rendex.dev with OAuth authentication. The MCP documentation has the exact config block for the remote server variant.

Troubleshooting

rendex_screenshot does not appear in Cascade. Confirm that Node.js is installed by running npx @copperline/rendex-mcp --version in a terminal. If the command fails, install Node.js from nodejs.org and restart Windsurf.

Authentication error. The value of RENDEX_API_KEY in mcp_config.json does not match a valid key. Copy the key again from your dashboard and paste it exactly, including the rdx_ prefix.

Cascade times out on capture. Large pages with many assets can take longer than the default timeout. Ask Cascade to add blockResourceTypes: ["media", "font"] to skip heavy assets, or use waitUntil: "domcontentloaded" for a faster load signal.

The Cursor config looks different. Yes, Cursor reads MCP servers from .cursor/mcp.json in the project root rather than a global file. See the Cursor MCP guide for the exact steps.

Next steps

Try the free screenshot tool to test any URL before adding it to your Cascade workflow. When you are ready to automate, get a free API key and start with 100 captures per month.