RenderLens

Servidor MCP de verificação visual — renderiza código em capturas de tela, executa auditorias de acessibilidade WCAG e faz diff de pixels em mudanças de UI. Gratuito, sem chave de API.

Ver em renderlens.devExperimente este MCPPatrocinado

Documentação

Servidor MCP para Claude, Cursor e agentes de IA

Dê olhos ao seu agente de IA para verificar o que ele constrói

O RenderLens renderiza, audita e compara código de UI em tempo real. Sua IA vê exatamente o que os usuários verão — pixel por pixel.

Comece Grátis Veja Como Funciona

100 chamadas gratuitas/mês — sem necessidade de cadastro. Basta apontar seu agente de IA e pronto.

📸

render()

Captura de tela do seu código HTML/React. Veja o que os usuários verão.

♿

audit()

Pontuações de acessibilidade Lighthouse + WCAG em uma única chamada.

🔀

diff()

Comparação visual em nível de pixel entre duas versões de código.

Por que o RenderLens?

Sua IA escreve código de UI, mas não consegue ver o resultado. O RenderLens resolve isso.

⚡

Configuração zero

Um comando e você está no ar. Sem Playwright para instalar, sem navegador para gerenciar, sem Docker para configurar.

⏳

Renderizações em 2 segundos

Rápido o suficiente para loops iterativos. Escreva código, renderize, corrija, re-renderize — tudo em uma única conversa.

♻

Tailwind integrado

As classes Tailwind CSS funcionam de imediato. Injete também as variáveis CSS e Google Fonts do seu projeto.

🔒

Código nunca armazenado

Seu código é processado em memória e descartado imediatamente. Nada é registrado ou persistido.

Três ferramentas. Verificação visual completa.

Cada ferramenta é projetada para uma etapa específica do fluxo de trabalho de codificação com IA.

Render

Recebe código HTML ou React e retorna uma captura de tela JPEG. Suporta viewports personalizados, captura de página inteira e configurações de qualidade.

  • ✓ Detecta automaticamente HTML vs React
  • ✓ Pacotes npm via CDN
  • ✓ Erros de console capturados
// AI agent calls render tool
{
  "code": "<div class='card'>...</div>",
  "viewport": { "width": 1280 },
  "quality": 80
}
// Returns: JPEG screenshot + metadata

Audit

Executa auditoria de acessibilidade Lighthouse e axe-core. Retorna pontuações, violações WCAG com gravidade e dicas de correção.

  • ✓ WCAG 2.1 A/AA/AAA
  • ✓ Categorias Lighthouse
  • ✓ Sugestões de correção acionáveis
// Audit response
{
  "lighthouse": { "accessibility": 100 },
  "wcag": {
    "violationsCount": 0,
    "passesCount": 12
  },
  "summary": "PASS: No violations"
}

Diff

Compara duas versões de código pixel por pixel. Retorna uma imagem de diff destacando as mudanças e uma métrica percentual.

  • ✓ Precisão em nível de pixel
  • ✓ Limiar configurável
  • ✓ Detecção de regressão visual
// Diff response
{
  "diffPercentage": 3.2,
  "diffPixels": 29491,
  "verdict": "CHANGED: 3.2% differ"
}
// + diff image overlay

Comece em 3 etapas

1

Adicione a configuração

Copie o trecho abaixo para o seu cliente MCP. Nenhuma chave de API necessária para teste.

2

Experimente 100 chamadas gratuitas

Renderize, audite e compare imediatamente. Sem cadastro, sem cartão de crédito.

3

Construa com confiança

100 chamadas/mês gratuitas durante o beta. Planos pagos em breve.

Um comando — sem necessidade de cadastro

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

Ou adicione ao Cursor, Windsurf ou qualquer configuração de cliente MCP:

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