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.

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

Add the config

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

Try 100 free calls

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

Build with confidence

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

Claude Code

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"
    }
  }
}

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.

Give your AI agent eyes to verify what it builds