Rendex
Get API key
Recipe

Give Your AI Agent a Live Screenshot Tool

Point Claude, Cursor, or Windsurf at the Rendex MCP server and rendex_screenshot appears as a tool. When the agent needs to see a page — a live URL, a staging deploy, or the HTML it just wrote — it captures the image in one call and gets it back inline, no browser to install and nothing to run locally.

Last updated 2026-07-21

Get Free API KeyMCP setupSetup Guide

The Problem

AI agents are blind to the visual web. They can fetch a page's HTML, but they can't see how it actually renders — whether a layout broke, an image loaded, a chart drew, or a deploy looks right. The usual fix is to bolt a headless browser (Puppeteer/Playwright) onto the agent's environment, which means shipping Chromium, managing memory and timeouts, and writing capture code — exactly the infrastructure an MCP client exists to avoid.

The Solution

The Rendex MCP server exposes rendex_screenshot: the agent passes a URL — or raw HTML/Markdown it generated — plus a few options (fullPage, a device preset like iphone_15, darkMode, or a selector to isolate one element) and Rendex renders it on the edge and returns the image inline, alongside metadata (dimensions, format, load time). No Chromium in the agent's sandbox, no capture code. bestAttempt is on by default, so a slow page returns a partial render instead of a hard failure. It costs one render credit per call and runs on the free 100-a-month tier.

How the Workflow Runs

Agent needs to see a page

Mid-task, the model wants a visual — a live URL, or the HTML it just generated.

rendex_screenshot

One MCP tool call: url (or html/markdown), fullPage, device preset, dark mode — Rendex renders on the edge.

Image + metadata back

The tool returns the image inline plus JSON (width, height, format, loadTimeMs) the agent can act on.

Input → Rendered Output

Left: a compact rendex_screenshot MCP tool call with url, fullPage, and device set. Right: the captured page rendered by Rendex inside a browser frame, with a metadata chip showing 1280×3200 PNG and a load time — the image the agent sees inline.

Rendered by Rendex

What You Need

  • A Rendex API key — the free tier includes 100 renders/month, no card required.
  • An MCP client: Claude Desktop, Claude Code, Cursor, or Windsurf.
  • The Rendex MCP server configured with your key (remote at mcp.rendex.dev, or the stdio server via npx) — see /docs/mcp.
  • Optional: a paid plan for cookie/header injection (Basic+) or geo-targeting (Pro+).

What This Recipe Uses

URL, HTML, or Markdown — one tool

rendex_screenshot captures a live URL or renders raw HTML/Markdown the agent wrote. Send exactly one source; the agent screenshots the web and its own output through the same call.

Image returned inline

The tool returns the capture as an inline image (PNG/JPEG/WebP) plus a JSON metadata block — width, height, format, load time — so the model can both see and reason over the result.

No headless browser

Rendering happens on Rendex's edge, not in the agent's sandbox. No Chromium to ship, no memory limits to tune, no capture code — the visual capability is just a tool.

Degrades, never dead-ends

bestAttempt is on by default, so a slow or heavy page returns a partial render instead of failing the task. Add waitForSelector for SPAs that hydrate late.

Build It

rendex_screenshot.json
// The agent invokes the Rendex MCP tool to see a page.
{
  "tool": "rendex_screenshot",
  "arguments": {
    "url": "rendex.dev/pricing",
    "fullPage": true,
    "device": "iphone_15",
    "blockCookieBanners": true
  }
}
// Returns two content items: the image inline, plus a metadata block:
// { "url": "...", "width": 393, "height": 3210, "format": "png",
//   "loadTimeMs": 1840, "capturedAt": "..." }
screenshot-own-output.json
// No URL needed — render the HTML the model just generated and look at it.
{
  "tool": "rendex_screenshot",
  "arguments": {
    "html": "<div style=\"font:600 40px system-ui;padding:60px\">Q2 recap ✅</div>",
    "format": "png",
    "width": 1200,
    "height": 630
  }
}
// One of url / html / markdown — never more than one.
what-the-tool-sends.sh
# rendex_screenshot wraps POST /v1/screenshot under the hood.
curl -X POST https://api.rendex.dev/v1/screenshot \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "url": "https://rendex.dev/pricing", "fullPage": true, "format": "png" }'
# -> { "data": { "url": "...", "width": 1280, "height": 3200, "format": "png" } }

100 free API calls/month — no credit card required. Get your API key and start building.

Reach for this whenever an agent's task has a visual checkpoint the model otherwise can't reach: confirming a Vercel preview rendered before it comments on a PR, capturing a competitor's pricing page to compare, or — the tightest loop — screenshotting the HTML it just authored to check its own work. The friction it removes is the whole headless-browser tax: no Chromium in the agent's environment, no memory tuning, no capture boilerplate, just a tool call that hands back an image the model can look at and reason over. Because the same tool takes a live url or raw html/markdown, the agent can screenshot the outside web and its own output through one interface, and options like a device preset, darkMode, selector, or blockCookieBanners let it frame the shot without writing CSS. Note the MCP capture is synchronous by design — there's no async job to poll — so the agent gets pixels back in the same turn, and bestAttempt means a heavy page degrades to a partial render rather than breaking the task.

Frequently Asked Questions

Related Resources

Documentation

Free Tools