RenderLens

Servidor MCP para Claude, Cursor y agentes de IA

Dale ojos a tu agente de IA para verificar lo que construye

RenderLens renderiza, audita y compara código de UI en tiempo real. Tu IA ve exactamente lo que verán los usuarios — píxel por píxel.

Comenzar gratis Ver cómo funciona

100 llamadas gratuitas al mes — sin necesidad de registro. Solo apunta tu agente de IA y listo.

📸

render()

Captura de pantalla de tu código HTML/React. Ve lo que verán los usuarios.

♿

audit()

Puntuaciones de accesibilidad Lighthouse + WCAG en una sola llamada.

🔀

diff()

Diferencia visual a nivel de píxel entre dos versiones de código.

¿Por qué RenderLens?

Tu IA escribe código de UI pero no puede ver el resultado. RenderLens lo soluciona.

⚡

Configuración cero

Un comando y estás en marcha. Sin Playwright que instalar, sin navegador que gestionar, sin Docker que configurar.

⏳

Renderizados en 2 segundos

Lo suficientemente rápido para bucles iterativos. Escribe código, renderiza, corrige, vuelve a renderizar — todo en una sola conversación.

♻

Tailwind integrado

Las clases CSS de Tailwind funcionan sin configuración adicional. También inyecta las variables CSS de tu proyecto y Google Fonts.

🔒

El código nunca se almacena

Tu código se procesa en memoria y se descarta inmediatamente. Nada se registra ni se persiste.

Tres herramientas. Verificación visual completa.

Cada herramienta está diseñada para un paso específico en el flujo de trabajo de codificación con IA.

Render

Toma código HTML o React y devuelve una captura JPEG. Admite viewports personalizados, captura de página completa y ajustes de calidad.

• ✓ Detecta automáticamente HTML vs React
• ✓ Paquetes npm vía CDN
• ✓ Errores de consola capturados

// AI agent calls render tool
{
  "code": "<div class='card'>...</div>",
  "viewport": { "width": 1280 },
  "quality": 80
}
// Returns: JPEG screenshot + metadata

Audit

Ejecuta auditoría de accesibilidad Lighthouse y axe-core. Devuelve puntuaciones, violaciones WCAG con severidad y sugerencias de remediación.

• ✓ WCAG 2.1 A/AA/AAA
• ✓ Categorías Lighthouse
• ✓ Sugerencias de corrección accionables

// Audit response
{
  "lighthouse": { "accessibility": 100 },
  "wcag": {
    "violationsCount": 0,
    "passesCount": 12
  },
  "summary": "PASS: No violations"
}

Diff

Compara dos versiones de código píxel por píxel. Devuelve una imagen de diferencia que resalta los cambios y una métrica de porcentaje.

• ✓ Precisión a nivel de píxel
• ✓ Umbral configurable
• ✓ Detección de regresión visual

// Diff response
{
  "diffPercentage": 3.2,
  "diffPixels": 29491,
  "verdict": "CHANGED: 3.2% differ"
}
// + diff image overlay

Comienza en 3 pasos

1

Añade la configuración

Copia el fragmento de abajo en tu cliente MCP. No se necesita clave API para la prueba.

2

Prueba 100 llamadas gratuitas

Renderiza, audita y compara inmediatamente. Sin registro, sin tarjeta de crédito.

3

Construye con confianza

100 llamadas al mes gratis durante la beta. Planes de pago próximamente.

Un comando — sin necesidad de registro

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

O añádelo a Cursor, Windsurf o cualquier configuración de cliente MCP:

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