RenderLens

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.

Why RenderLens?

Your AI writes UI code but can't see the result. RenderLens fixes that.

⚡

Zero setup

One command and you're live. No Playwright to install, no browser to manage, no Docker to configure.

⏳

2-second renders

Fast enough for iterative loops. Write code, render, fix, re-render — all in a single conversation.

♻

Tailwind built-in

Tailwind CSS classes work out of the box. Inject your project's CSS variables and Google Fonts too.

🔒

Code never stored

Your code is processed in memory and discarded immediately. Nothing is logged or persisted.

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.

One command — no signup needed

$ claude mcp add renderlens --transport http https://app.renderlens.dev/mcp

Or add to Cursor, Windsurf, or any MCP client config:

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