Capture website screenshots from any MCP client via the ScreenshotRender API.
Capture website screenshots from inside Claude, Cursor, VS Code, Windsurf, or any Model Context Protocol client. This server wraps the ScreenshotRender API so your AI assistant can render any public web page on request.
Ask your assistant: "Take a full-page screenshot of stripe.com" and the image appears right in the chat.
| Tool | Description |
|---|---|
take_screenshot | Capture a screenshot of any public URL. Returns the image inline plus a hosted URL and page metadata (title, description). |
Parameters
url (string, required) — page to capture, including https://.fullPage (boolean, optional) — capture the entire scrollable page instead of the viewport.wait (number, optional) — milliseconds to wait before capturing (for animations / lazy content).timeout (number, optional) — max milliseconds to wait for load.sr-).Edit claude_desktop_config.json (Settings → Developer → Edit Config):
{
"mcpServers": {
"screenshotrender": {
"command": "npx",
"args": ["-y", "screenshotrender-mcp"],
"env": {
"SCREENSHOTRENDER_API_KEY": "sr-your-key-here"
}
}
}
}
Add the same block under the editor's MCP settings (mcp.json or the MCP
settings UI). Restart the client and the take_screenshot tool will be
available.
| Variable | Required | Description |
|---|---|---|
SCREENSHOTRENDER_API_KEY | yes | Your ScreenshotRender key (sr-...). |
SCREENSHOTRENDER_BASE_URL | no | Override the API base URL. Defaults to https://screenshotrender.com. |
npm install
SCREENSHOTRENDER_API_KEY=sr-your-key npm run inspect # opens MCP Inspector
The Inspector lets you call take_screenshot and view the result before
shipping.
MIT
Source-derived launch command. Check the maintainer’s required arguments and credentials before running:
npx -y screenshotrender-mcpMerge this template into ~/Library/Application Support/Claude/claude_desktop_config.json. Keep existing servers. Add any arguments, credentials, and permissions required by the maintainer; this template has not been install-tested.
{
"mcpServers": {
"io-github-faridmth-screenshotrender-mcp": {
"command": "npx",
"args": [
"-y",
"screenshotrender-mcp"
]
}
}
}Restart Claude Desktop completely for changes to take effect. Confirm the server appears connected in the client’s tool list, then try a read-only example from its documentation.
Claude Desktop setup referencescreenshotrender-mcpnpmio.github.faridmth/screenshotrender-mcp works with any MCP-compatible client. Copy the config snippet from the Configuration section above and add it to the file shown for your client, then restart the application.
~/Library/Application Support/Claude/claude_desktop_config.jsonRestart Claude Desktop completely for changes to take effect.~/.cursor/mcp.jsonRestart Cursor for changes to take effect..vscode/mcp.jsonReload VS Code window for changes to take effect.~/.codeium/windsurf/mcp_config.jsonRestart Windsurf for changes to take effect..mcp.jsonSave at the project root, then start Claude Code in that project and review the MCP server approval prompt. Keep real credentials out of shared files.