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
Scout Monitoring MCP
sponsorPut performance and error data directly in the hands of your AI assistant.
Alpha Vantage MCP Server
sponsorAccess financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
Remote MCP Server on Cloudflare
An MCP server deployable on Cloudflare Workers with OAuth login support.
MCP MiniMax Music Server
AI-powered audio generation using the MiniMax Music API.
Makefile MCP Server
Exposes Makefile targets as callable tools for AI assistants.
MCP Builder
A Python-based server to install and configure other MCP servers from PyPI, npm, or local directories.
Remote MCP Server (Authless)
An example of a remote MCP server deployable on Cloudflare Workers without authentication.
Model Context Protocol (MCP)
Interact with Gibson projects to create/update projects, explain database/API interactions, and write code within your IDE.
Kubeshark
MCP access to cluster-wide L4 and L7 network traffic, packets, APIs, and complete payloads.
Frappe MCP Server
An MCP server for the Frappe Framework, enabling AI assistants to interact with Frappe's REST API for document management and schema operations.
Apple Doc MCP
Search Apple's Developer Documentation with smart search and wildcard support.
Codelogic
Utilize Codelogic's rich software dependency data in your AI programming assistant.