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.
相关服务器
Scout Monitoring MCP
赞助Put performance and error data directly in the hands of your AI assistant.
Alpha Vantage MCP Server
赞助Access financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
gopls-mcp
The essential MCP server for Go language: Exposing compiler-grade semantics to AI Agents and LLM for deterministic code analysis and minimal token usage.
TLS MCP Server
Analyze TLS certificates using OpenSSL and zlint.
kintone
An MCP server for integrating with the kintone REST API. Supports CRUD operations, file management, comments, and status updates.
Deno Gemini Grounding MCP Server
A Model Context Protocol server that provides access to the connpass users API v2, utilizing Gemini for grounding.
NPM Sentinel MCP
An AI-powered MCP server for analyzing NPM package security, dependencies, and performance.
DocsFetcher
Fetches package documentation from various language ecosystems without requiring API keys.
ASKME-CLI
A command-line interface to prompt users for their next plan or confirmation.
MCP Crash Course
A simple demonstration of the MCP Python SDK.
MCP WordPress Server
A server for integrating with the WordPress REST API.
Whistle MCP Server
Manage local Whistle proxy servers through AI assistants, simplifying network debugging, API testing, and rule management.