DEV Community

Dan E
Dan E

Posted on • Originally published at rendex.dev

Add a Cursor MCP Screenshot Tool in Minutes

#cursor #ai #tutorial

Cursor's AI can read every file in your project, but it cannot see a live web page. Ask it about a layout bug or an OG image and it is working blind. The Model Context Protocol (MCP) fixes that: wire in a screenshot server and Cursor gains a tool it can call on its own to capture any URL and reason about the result.

This guide sets up a Cursor MCP screenshot tool with Rendex in about five minutes. You get one tool, rendex_screenshot, that turns a URL, raw HTML, or Markdown into a PNG, JPEG, WebP, or PDF, with options like full-page capture and dark mode.

Cursor MCP screenshot config on the left and the captured rendex.dev pricing page on the right

Prerequisites

You need three things before you start:

  • Cursor installed (any recent version with MCP support).
  • Node.js on your machine, so Cursor can run the server with npx.
  • A Rendex API key. The free tier gives you 100 renders a month with no credit card, which is plenty for editor use.

Step 1: Get a Rendex API key

Sign in at rendex.dev/login, open the dashboard, and copy your key. It looks like rdx_ followed by a short string. Keep it out of version control. If you want the exact key format and rate limits, the quickstart covers them.

Step 2: Add Rendex to .cursor/mcp.json

Cursor reads MCP servers from .cursor/mcp.json in your project root, or from Settings then MCP for a global setup. Create the file and add the Rendex server. The npx command downloads and runs the published package, so there is nothing to install by hand.

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

Add .cursor/mcp.json to your .gitignore. It holds your key, so it should never land in a commit.

Step 3: Or connect the hosted server (no install)

If you would rather skip the local process, point Cursor at the hosted server instead. It is fronted by OAuth 2.1, so you sign in with a one-time email code and never paste a key into a config file. Each caller bills against their own plan and credit pool.

{
  "mcpServers": {
    "rendex": {
      "url": "https://mcp.rendex.dev/mcp"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Clients that prefer a static key can still pass one in an Authorization header. The MCP docs show both the OAuth flow and the header form.

Step 4: Restart Cursor and confirm the tool

Fully quit and reopen Cursor so it reloads the config. Open the MCP settings and check that the rendex server shows a green status with rendex_screenshot listed under it. If the server is red, the JSON is almost always the cause. See troubleshooting below.

Step 5: Ask Cursor to capture a page

Now you can prompt Cursor in plain language and it will call the tool on its own. Try something like:

Screenshot https://rendex.dev/pricing in dark mode,
full page, and tell me if the plan prices are readable.
Enter fullscreen mode Exit fullscreen mode

Cursor calls rendex_screenshot with the arguments it parsed from your request, gets the image back, and reasons about it. The tool accepts the same options the API does, so you can be specific:

{
  "url": "https://rendex.dev/pricing",
  "format": "png",
  "fullPage": true,
  "darkMode": true,
  "device": "iphone_15"
}
Enter fullscreen mode Exit fullscreen mode

Useful parameters to know: format switches between png, jpeg, webp, and pdf; fullPage captures the whole scroll height; selector crops to a single element like a pricing card; and blockAds removes ad and cookie clutter before the shot.

Troubleshooting

The server shows red or the tool never appears. Validate the JSON. A trailing comma or a missing brace stops Cursor from parsing the file. Paste it into a JSON linter, fix the error, then restart Cursor.

Every call returns an auth error. The key is wrong or missing. Confirm RENDEX_API_KEY is set in the env block and that you copied the full rdx_ key from the dashboard.

npx cannot find the package. Check that Node.js is on your PATH and run npx -y @copperline/rendex-mcp once in a terminal to prime the download, then reopen Cursor.

You want the same setup in another editor. The config is nearly identical for Claude Desktop, Claude Code, and Windsurf. The MCP rendering guide walks through each client and the full tool set.

Where to go next

That is the whole setup. Cursor can now capture live pages while it works, which is handy for reviewing a deploy, checking an OG image, or grabbing a reference shot without leaving the editor. To try the same engine outside Cursor first, the browser-based screenshot tool runs a capture with no code.

When you are ready to wire it into Cursor, grab a free API key and drop it into your config. One hundred renders a month is enough to keep the tool on hand all day.

Top comments (0)