render-mcp

Take a screenshot of a web page as it actually renders in a real browser, after JavaScript has run. Use this when you need to see a page rather than read it — checking a layout, confirming a site is up and looks right, or capturing what a user would actually see. Returns a PNG image.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "The absolute URL to capture, including https://"
    },
    "full_page": {
      "type": "boolean",
      "description": "Capture the entire scrollable page rather than just the viewport. Defaults to false.",
      "default": false
    },
    "width": {
      "type": "number",
      "description": "Viewport width in pixels. 320-2560. Defaults to 1280.",
      "default": 1280
    },
    "height": {
      "type": "number",
      "description": "Viewport height in pixels. 240-2000. Defaults to 800.",
      "default": 800
    }
  },
  "required": [
    "url"
  ]
}

Fetch a page's HTML *after* JavaScript has executed. Use this when a plain HTTP fetch returns an empty shell or a loading spinner — single-page apps, sites that build their content client-side, or anything behind a framework. Returns the final DOM as HTML text.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "The absolute URL to load, including https://"
    },
    "wait_for": {
      "type": "string",
      "description": "Optional CSS selector to wait for before capturing, for pages that load content late."
    },
    "max_chars": {
      "type": "number",
      "description": "Truncate the returned HTML to this many characters. Defaults to 100000.",
      "default": 100000
    }
  },
  "required": [
    "url"
  ]
}

Load a page in a real browser and report what went wrong: JavaScript console errors and warnings, network requests that failed, and the HTTP status of the page itself. Use this when a site looks broken, a deployment might have shipped a bug, or a page loads blank and you need to know why. An agent cannot see a browser's console any other way.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "The absolute URL to load, including https://"
    },
    "include_warnings": {
      "type": "boolean",
      "description": "Include console warnings and info messages, not just errors. Defaults to false.",
      "default": false
    },
    "width": {
      "type": "number",
      "description": "Viewport width in pixels. 320-2560. Defaults to 1280.",
      "default": 1280
    },
    "height": {
      "type": "number",
      "description": "Viewport height in pixels. 240-2000. Defaults to 800.",
      "default": 800
    }
  },
  "required": [
    "url"
  ]
}

Run a WCAG accessibility audit on a page using axe-core in a real browser, and report the violations with the elements responsible. Because it runs against a genuinely rendered page, colour-contrast and other rules that depend on layout and computed colour actually fire — these are silently skipped by audits that parse HTML without a layout engine. Use this to check a page meets WCAG before shipping.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "The absolute URL to audit, including https://"
    },
    "standard": {
      "type": "string",
      "description": "Which ruleset to run. 'wcag2aa' is the usual legal benchmark but is a narrow filter — it excludes best-practice checks such as landmarks and heading order, so a page can return zero violations and still have real problems. Use 'all' when the question is \"is this page accessible?\" rather than \"does it meet WCAG AA?\". Defaults to wcag2aa.",
      "enum": [
        "wcag2a",
        "wcag2aa",
        "wcag21aa",
        "all"
      ],
      "default": "wcag2aa"
    },
    "max_violations": {
      "type": "number",
      "description": "Maximum violation types to report in detail. 1-50. Defaults to 20.",
      "default": 20
    }
  },
  "required": [
    "url"
  ]
}

Answer 'why isn't this element showing where I expect?' for a CSS selector on a live page. Returns the resolved box model, computed display/visibility/opacity/position/z-index, colours, whether the element is inside the viewport, and — crucially — whether another element is covering it. These are the values a browser computes after the full cascade and layout; they cannot be derived from reading HTML and CSS.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "The absolute URL to load, including https://"
    },
    "selector": {
      "type": "string",
      "description": "CSS selector for the element to inspect, for example '.buy-button' or '#header nav a'"
    },
    "max_matches": {
      "type": "number",
      "description": "How many matching elements to report. 1-10. Defaults to 3.",
      "default": 3
    },
    "width": {
      "type": "number",
      "description": "Viewport width in pixels. 320-2560. Defaults to 1280.",
      "default": 1280
    },
    "height": {
      "type": "number",
      "description": "Viewport height in pixels. 240-2000. Defaults to 800.",
      "default": 800
    }
  },
  "required": [
    "url",
    "selector"
  ]
}

Render a web page to PDF exactly as a browser would print it. Use this to archive a page, produce a document from a rendered report, or capture something for a record. Returns a PDF file.

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string",
      "description": "The absolute URL to render, including https://"
    },
    "landscape": {
      "type": "boolean",
      "description": "Landscape orientation. Defaults to false.",
      "default": false
    }
  },
  "required": [
    "url"
  ]
}