Dev.to AI 🤖 Ai Fri, 25 Sep 2026 19:49:41 +0000 👁 0 📖 5 min read

Add Screenshot and PDF Tools to Claude Desktop via MCP

Add Screenshot and PDF Tools to Claude Desktop via MCP Claude Desktop can read local files and run tools, but it cannot open a browser tab and see what a live page actually looks like. The Model Context Protocol fixes

Add Screenshot and PDF Tools to Claude Desktop via MCP

Claude Desktop can read local files and run tools, but it cannot open a browser tab and see what a live page actually looks like. The Model Context Protocol fixes that gap. Connect the Rendex MCP server and Claude gains three tools it can call on its own: rendex_screenshot for capturing URLs, HTML, or Markdown as PNG, JPEG, WebP, or PDF; rendex_extract for pulling reader-mode text from any page; and render_artifact for turning Markdown or HTML into a branded PDF plus a hosted share page in one call.

Prerequisites

Claude Desktop installed (any recent version with MCP support).
A Rendex API key. The free tier includes 100 renders per month with no credit card required.
For the remote server approach: nothing else. For the local server approach: Node.js 18+ on your PATH.

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 free plan gives you 100 renders per month. Cookie and header injection require Starter or above; geo-targeting requires Pro or Enterprise.

Step 2: Add the remote server

The recommended setup connects Claude Desktop to mcp.rendex.dev over HTTP. No Node.js needed, no package to install. Find your config file:

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

Open the file (create it if it does not exist) and add the rendex block:

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

Replace rdx_YOUR_KEY with your actual key from the dashboard. If the file already has other servers, add the rendex entry inside the existing mcpServers object.

Step 3: Or run a local server

If you prefer to keep your key in a local environment variable and avoid the remote HTTP connection, run the package locally via npx. Use this config instead:

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

The -y flag downloads and runs @copperline/rendex-mcp on first launch without a confirmation prompt. Node.js must be on the PATH that Claude Desktop sees. Run node --version in a terminal to confirm.

Step 4: Restart and verify

Quit Claude Desktop completely and reopen it. A partial close is not enough: Claude reads the config file only at startup. After restart, open the Connected Tools panel (the plug icon in the sidebar) and confirm that rendex appears with a green active indicator. Ask Claude: What MCP tools do you have? It should list rendex_screenshot, rendex_extract, and render_artifact.

Step 5: Capture a screenshot

Once the tools are registered, describe what you want in plain language. Claude translates the request into a tool call and returns the captured image inline:

Screenshot https://github.com and tell me about the hero section.

Capture https://example.com/pricing at 1440px wide and flag any layout issues.

Take a full-page screenshot of https://docs.example.com/guide.

Claude calls rendex_screenshot with the URL and any parameters it infers from context. The default viewport is 1280x800. The captured image comes back inline, and Claude can describe, compare, or analyze it from what it actually sees.

Step 6: Generate a PDF

Ask Claude to render a URL or HTML content as a PDF. Specify the page format in your prompt and Claude passes format: "pdf" to the tool:

Save https://example.com/report as a PDF using A4 paper size.

Convert this HTML invoice to a PDF and download it:
<html>...</html>

Render https://blog.example.com/post as a full-page PDF.

Supported PDF page sizes: A4, Letter, Legal, Tabloid, A3. Claude returns the rendered PDF for download. For templated documents where you pass data into placeholders, the render_artifact tool combines the render with a hosted share link in one step. See the MCP docs for the full parameter list.

Step 7: Extract text from a page

rendex_extract runs a full browser render pass and returns the page content in reader mode, stripping navigation, ads, and boilerplate. Useful when you want Claude to summarize, quote, or fact-check an article:

Extract the main article text from https://techcrunch.com/2026/08/01/example and summarize the key points.

Pull the content from https://docs.example.com/api as Markdown and list every endpoint it mentions.

Get the JSON structure from https://example.com/data-page.

The extractFormat parameter controls the output shape: markdown (default), json, or html. Claude picks the right format automatically or you can specify it in your prompt.

Troubleshooting

Tools not listed after restart. The config file must be valid JSON. A trailing comma after the last key or a missing brace causes Claude to skip loading MCP servers entirely, with no error message. Paste the file contents into a JSON validator before restarting. Then quit Claude fully (check the system tray on Windows and macOS menu bar) before reopening.

401 Unauthorized. The Authorization header is missing the Bearer prefix (with a space), or the key value is wrong. Keys start with rdx_ and contain no spaces. Copy the key directly from the Rendex dashboard and paste it without modification. If you are using the local npx config, check that RENDEX_API_KEY is spelled exactly as shown.

Blank or cut-off screenshot. The page renders content via JavaScript after the initial load. Ask Claude to add a wait condition: for example, "wait for the main content to load before capturing." Claude will pass waitForSelector or delay to the tool. For SPAs, waitForSelector targeting a main content element is more reliable than a fixed delay.

npx fails or server not found. Confirm Node.js is accessible from the terminal Claude Desktop uses. Run node --version in a new terminal window. If the command is not found, install Node.js from nodejs.org and restart Claude Desktop. On macOS, shell PATH in GUI apps sometimes differs from the terminal: add Node.js to /etc/paths or use the remote server config (Step 2) to avoid the dependency entirely.

Next steps

The MCP docs cover the full parameter reference for all three tools, including async capture, cookie and header injection for authenticated pages, device emulation, and batch options. If you are evaluating whether a hosted rendering API fits your agent architecture versus self-hosted Puppeteer or Playwright, the screenshot API for AI agents comparison breaks down the tradeoffs. To test any URL before adding it to a Claude workflow, the free screenshot tool gives you instant output with no config.

To get started, get your free API key (100 renders/month, no credit card) and add one of the config blocks above to claude_desktop_config.json. The tools appear on the next restart.

📰 Read the original article on Dev.to AI

Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.

← News 🤖 Ai 🏠 Home