How to add ScreenshotOne MCP Server to Windsurf

Render screenshots of any website and return them as images, via the ScreenshotOne API. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 14, 2026 · 36★ · stdio · apikey

Windsurf config for ScreenshotOne MCP Server

npm install && npm run build

{
  "mcpServers": {
    "screenshotone-mcp-server": {
      "command": "node",
      "args": [
        "path/to/screenshotone/mcp/build/index.js"
      ],
      "env": {
        "SCREENSHOTONE_API_KEY": "<your api key>"
      }
    }
  }
}

Setup steps

1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
2Paste the ScreenshotOne MCP Server config below.
3Fill in placeholder secrets, then save.
4Click Refresh in the MCP panel.
5ScreenshotOne MCP Server's tools become available to Cascade.

Before you start

Node.js (to run the compiled build/index.js)
A ScreenshotOne account and API key (set as SCREENSHOTONE_API_KEY)
Build the project locally with `npm install && npm run build`

What ScreenshotOne MCP Server can do in Windsurf

render-website-screenshot

Render a screenshot of a website and return it as an image.

Security

Requires a ScreenshotOne API key, supplied via the SCREENSHOTONE_API_KEY environment variable in the MCP client config. Keep this key secret; anyone with it can consume your ScreenshotOne quota.

ScreenshotOne MCP Server + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the ScreenshotOne MCP Server config there under the "mcpServers" key and restart the client.

Is ScreenshotOne MCP Server safe to use with Windsurf?

Requires a ScreenshotOne API key, supplied via the SCREENSHOTONE_API_KEY environment variable in the MCP client config. Keep this key secret; anyone with it can consume your ScreenshotOne quota.

How do I authenticate?

Sign up at ScreenshotOne to get an API key, then provide it via the SCREENSHOTONE_API_KEY environment variable in your MCP client config.

Is there an npm package to run it directly?

The README does not document an npm package or npx command. You clone/build the repo locally with `npm install && npm run build` and point your client at build/index.js.

What tools does the server expose?

A single tool, render-website-screenshot, which renders a website screenshot and returns it as an image.

View repo Full ScreenshotOne MCP Server page