RenderLens

Visual verification MCP server — render code to screenshots, run WCAG accessibility audits, and pixel-diff UI changes. Free, no API key.

MCP Server for Claude, Cursor & AI agents

Give your AI agent

eyes to verify what it builds

RenderLens renders, audits, and diffs UI code in real time. Your AI sees exactly what users will see — pixel by pixel.

Get Started Free See How It Works

100 free calls/month — no signup needed. Just point your AI agent and go.

📸

render()

Screenshot of your HTML/React code. See what users will see.

audit()

Lighthouse + WCAG accessibility scores in one call.

🔀

diff()

Pixel-level visual diff between two code versions.

Three tools. Complete visual verification.

Each tool is designed for a specific step in the AI coding workflow.

Render

Takes HTML or React code and returns a JPEG screenshot. Supports custom viewports, full-page capture, and quality settings.

  • ✓ Auto-detects HTML vs React
  • ✓ npm packages via CDN
  • ✓ Console errors captured
// AI agent calls render tool
{
  "code": "<div class='card'>...</div>",
  "viewport": { "width": 1280 },
  "quality": 80
}
// Returns: JPEG screenshot + metadata

Audit

Runs Lighthouse and axe-core accessibility audit. Returns scores, WCAG violations with severity and remediation hints.

  • ✓ WCAG 2.1 A/AA/AAA
  • ✓ Lighthouse categories
  • ✓ Actionable fix suggestions
// Audit response
{
  "lighthouse": { "accessibility": 100 },
  "wcag": {
    "violationsCount": 0,
    "passesCount": 12
  },
  "summary": "PASS: No violations"
}

Diff

Compares two code versions pixel by pixel. Returns a diff image highlighting changes and a percentage metric.

  • ✓ Pixel-level precision
  • ✓ Configurable threshold
  • ✓ Visual regression detection
// Diff response
{
  "diffPercentage": 3.2,
  "diffPixels": 29491,
  "verdict": "CHANGED: 3.2% differ"
}
// + diff image overlay

Get started in 3 steps

1

Add the config

Copy the snippet below into your MCP client. No API key needed for trial.

2

Try 100 free calls

Render, audit, and diff immediately. No signup, no credit card.

3

Build with confidence

100 calls/month free during beta. Paid plans coming soon.

MCP config

Add to Claude Code, Cursor, or any MCP client — no signup needed

{
  "mcpServers": {
    "renderlens": {
      "type": "streamable-http",
      "url": "https://app.renderlens.dev/mcp"
    }
  }
}

Free during beta

Try RenderLens free. Paid plans coming soon.

Free Beta

Beta

Free

100 calls/month

  • ✓ 100 free calls/month — no signup needed
  • ✓ All 3 tools included (render, audit, diff)
  • ✓ No API key required
  • ✓ No credit card required Get Started

Paid plans with higher limits coming soon.

Related Servers