MCP Tools for Web Rendering: A Developer Guide

Browser automation is one of the most useful capabilities you can add to an AI agent. Rather than guessing how a page looks or reasoning from stale cached data, the agent captures the current state of any URL or HTML snippet and passes the result directly to the model. An MCP rendering tool gives the agent that capability as a first-class function call.

Rendex exposes one MCP tool, rendex_screenshot, that handles screenshots, PDFs, full-page captures, HTML rendering, and element-level selector extraction. This guide covers setup for Claude Desktop and Cursor, how the tool parameters map to common use cases, and how to debug the most common failure modes.

Prerequisites

A Rendex API key: get one free (100 calls/month, no credit card).
Claude Desktop (any recent version) or Cursor 0.44+ with MCP support enabled.
Node.js 18+ on your PATH (required for the local stdio transport in Cursor).

Step 1: Connect Claude Desktop

Claude Desktop connects to mcp.rendex.dev over HTTP. No local package to install. Find your config file and add the rendex server block:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "rendex": {
      "url": "https://mcp.rendex.dev/mcp",
      "headers": {
        "Authorization": "Bearer rdx_your_key"
      }
    }
  }
}

Replace rdx_your_key with your actual key from the Rendex dashboard. Restart Claude Desktop fully after saving. The Connected Tools panel should list "rendex" with an active indicator. If you already have other servers configured, add the rendex entry alongside them inside the existing mcpServers object.

Step 2: Connect Cursor

Cursor uses a local stdio transport. Create .cursor/mcp.json in your project root, or open Settings > MCP and paste the same JSON:

.cursor/mcp.json

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

The -y flag installs @copperline/rendex-mcp on first run without a confirmation prompt. Cursor does not currently support remote URL connections, so this local path is required. Restart Cursor after saving. See the MCP docs for Claude Code and Windsurf config formats.

Step 3: Capture a page

Ask the agent to screenshot any URL. The tool call that fires behind the scenes:

basic-screenshot.json

{
  "url": "https://example.com",
  "format": "png",
  "width": 1280,
  "height": 800
}

The agent receives the image inline and can describe it, extract data, or compare it against a reference. For a full-page capture of a long document, or a PDF of any URL, adjust two parameters:

full-page-and-pdf.json

// Full-page screenshot (scrolls the entire page)
{
  "url": "https://docs.example.com/guide",
  "format": "png",
  "fullPage": true
}

// PDF with A4 page size
{
  "url": "https://dashboard.example.com/report",
  "format": "pdf",
  "pdfFormat": "A4",
  "pdfPrintBackground": true
}

Supported output formats are png, jpeg, webp, and pdf. The default viewport is 1280x800 at 2x device scale (retina).

Step 4: Render raw HTML

Pass raw HTML instead of a URL to render templates, OG images, invoice layouts, or any dynamic content without hosting it. The html and url parameters are mutually exclusive.

html-render.json

{
  "html": "<html><body style='background:#0f172a;color:#e2e8f0;padding:48px;font-family:system-ui'><h1 style='font-size:2rem'>Invoice #1042</h1><p>Total due: $420.00</p><p style='color:#94a3b8'>Due 2026-04-30</p></body></html>",
  "format": "png",
  "width": 800,
  "height": 400
}

HTML rendering is useful for agents that generate structured content and need a visual output: social cards, report covers, status snapshots. The free screenshot tool lets you test HTML rendering interactively before wiring it into an agent pipeline.

Step 5: Selector capture and geo-targeting

The selectorparameter restricts the capture to a single DOM element. Pass any valid CSS selector and the tool crops to that element's bounding box. Useful for extracting a pricing table, hero section, or chart component without capturing the full page.

selector-and-geo.json

// Capture only the pricing table
{
  "url": "https://example.com/pricing",
  "selector": "#pricing-table",
  "format": "png"
}

// Render as seen from Germany (Pro/Enterprise only)
{
  "url": "https://example.com",
  "geo": "DE",
  "format": "png"
}

Geo-targeting routes the request through a proxy in the specified country, letting agents verify locale-specific content, regional pricing, or geo-restricted pages. Pass any ISO 3166-1 alpha-2 code (DE, JP, BR). The geo parameter requires a Pro or Enterprise plan. Note that CSS injection, JavaScript injection, cookies, and selector capture are not available when geo is set.

Other parameters worth knowing for agent workflows: waitForSelector holds capture until a CSS selector appears in the DOM, which is critical for React and Vue apps that hydrate after the initial page load. darkMode emulates prefers-color-scheme: dark. delay adds a fixed millisecond wait after the load event fires. Bothcss and js accept strings to inject custom code before capture, up to 50KB each.

Troubleshooting

Tool not listed in Claude Desktop. The config file must be valid JSON. A trailing comma after the last key or a missing closing brace silently prevents Claude from loading any MCP servers. Quit and reopen Claude Desktop fully after each config edit. Check the Connected Tools panel after restart.

401 Unauthorized. The API key is invalid or the Authorization header is missing the Bearer prefix. Keys start with rdx_, a single segment with no environment prefix. Get one from the Rendex dashboard. The free web tools run on a separate server-side key, so there is no "demo key" to paste anywhere.

Blank or partial screenshot. The page likely renders content via JavaScript after the initial load event. The default waitUntil: "networkidle2" handles most sites, but SPAs with delayed hydration need waitForSelector. Pass the selector for a main content element, for example "waitForSelector": "#app-loaded".

Cursor shows "server not found." Check that Node.js is accessible from the shell Cursor uses: run node --versionin the Cursor integrated terminal. If it returns "command not found," add Node.js to your PATH. Confirm that .cursor/mcp.json is in the project root, not a subdirectory.

Next steps

The MCP docs have the full parameter reference, including async capture with webhook delivery, cookie and header injection for authenticated pages, and batch options. If you are comparing approaches for agent architectures, the screenshot API for AI agents comparison covers where a hosted rendering API fits versus self-hosted Puppeteer or Playwright. For a worked example of an agent using its own captures to decide what to check next, see how AI agents can screenshot and analyze web pages, which pairs the same tool with a vision model in a Python loop.

To get started, get your free API key (100 calls/month, no credit card) and add the config block above to Claude Desktop or Cursor. The rendex_screenshot tool appears on the next restart.