RenderLens

Servidor MCP para Claude, Cursor y agentes de IA

Dale a tu agente de IA

ojos 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.

Comienza 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()

Comparación 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 solo 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 de inmediato. 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 guarda.

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 de pantalla 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 a continuación en tu cliente MCP. No se necesita clave API para la prueba.

2

Prueba 100 llamadas gratuitas

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

3

Construye con confianza

100 llamadas/mes gratuitas durante la beta. Planes de pago próximamente.

Claude Code

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

Gratis durante la beta

Prueba RenderLens gratis. Planes de pago próximamente.

Beta Gratuita

Beta

Gratis

100 llamadas/mes

• ✓ 100 llamadas gratuitas/mes, sin necesidad de registro
• ✓ Las 3 herramientas incluidas (render, audit, diff)
• ✓ Sin clave API requerida
• ✓ Sin tarjeta de crédito requerida Comienza

Planes de pago con límites más altos próximamente.