UI Verify

npx add-mcp 'https://uiverify.ai/api/mcp'

Revisa una compilación de UI Verify sin salir de tu terminal. El MCP de UI Verify permite que Claude Code, Cursor o cualquier cliente MCP lean los cambios de una compilación y acepten líneas base.

Si un agente escribió la solicitud de extracción, un agente puede revisar los cambios visuales. UI Verify expone compilaciones a través del Protocolo de Contexto de Modelo, por lo que un agente de codificación (Claude Code, Cursor o cualquier cliente MCP) puede incorporar los cambios de una compilación a la conversación, observar cada diferencia, leer el razonamiento del juez de IA y aceptar los cambios previstos.

Lo que el agente puede hacer

• Listar las historias modificadas de una compilación y, en una compilación aprobada, también las que no cambiaron.
• Obtener una imagen de diferencia y el veredicto del juez de IA para cualquier historia.
• Obtener un antes y un después recortados al cambio: un recorte por región modificada cuando se movió en varios lugares.
• Ver una historia que no cambió en esta compilación (idéntica a su línea base).
• Clasificar los cambios en regresiones reales frente a reflujo cosmético frente a ruido de renderizado.
• Resumir las regresiones reales en un comentario de la solicitud de extracción con imágenes de antes y después.
• Aceptar líneas base en bloque una vez que hayas aprobado la dirección.

¿Acabas de agregar el MCP con claude mcp add? Reinicia la sesión de tu agente (o recarga la ventana) para que se carguen las nuevas herramientas; un agente no puede detectar un servidor MCP recién agregado a mitad de sesión e informará que las herramientas de revisión no están disponibles hasta que lo haga.

URLs o píxeles: get_diff vs render_diff_image

Dos herramientas devuelven las imágenes de una historia, para dos trabajos diferentes. get_diff devuelve URLs prefirmadas para los PNG de línea base, candidato y diferencia; úsalas para descargar una imagen a un archivo o enlazarla en un comentario de la solicitud de extracción. render_diff_image devuelve los píxeles reales en línea, para que un modelo de visión pueda verlos directamente.

render_diff_image necesita un cliente MCP nativo que renderice contenido de imagen (Claude Code, Cursor). Canalizado a través de un curl sin procesar, es inútil: la respuesta es un bloque de imagen en línea, no una URL, por lo que un script que busca un enlace no encuentra nada. Para una canalización de shell, usa las URLs de get_diff en su lugar.

Antes y después en una sola imagen

Llama a render_diff_image con which: "before_after" para una historia modificada y obtén la línea base y el candidato lado a lado, recortados a la región modificada más un poco de margen, de modo que para un cambio de una línea el agente vea qué se movió, no una captura de pantalla de página completa que tenga que escanear. Cuando una historia cambió en varios lugares muy separados (un encabezado y un pie de página, por ejemplo), se devuelve como un recorte por región apilado de arriba a abajo, en lugar de una imagen alta que abarque el espacio entre ellos.

Ver una historia que no cambió

En una compilación aprobada, cada historia coincidió con su línea base, por lo que no hay diferencia que obtener. list_build_stories con status: unchanged lista esas historias, y render_diff_image con un selector de compilación y un storyId devuelve la imagen actual de cualquier historia: el candidato si cambió, o la línea base con la que coincidió si no. Así es como un agente confirma "este componente se ve bien, idéntico a la línea base" incluso cuando nada cambió. Consulta Líneas base y ramas.

Publica el veredicto en la solicitud de extracción

Cierra el ciclo donde están los humanos. Una vez que el agente haya clasificado los cambios, haz que escriba un comentario en la solicitud de extracción con las regresiones reales, una imagen de antes y después para cada una (enlaza las URLs de línea base y candidato de get_diff) y un enlace a la compilación completa en el panel. Un revisor hojea el comentario en lugar de hacer clic en cada historia.

El ciclo

1. El agente abre la solicitud de extracción y la verificación de UI Verify se ejecuta.
2. El agente lista los cambios de la compilación a través de MCP.
3. Lee cada diferencia y el veredicto del juez.
4. Acepta los cambios previstos y marca cualquier cosa que no pueda atribuir a la diferencia para que la revises.

La habilidad de clasificar cambios visuales empaqueta todo este ciclo en un solo comando que tu agente puede ejecutar.

Por qué esto importa para la interfaz de usuario escrita por agentes

El cuello de botella en la solicitud de extracción de un agente es la verificación, no la autoría. Poner la diferencia y un veredicto donde el agente ya trabaja cierra el ciclo: el mismo lugar donde se escribió el código es donde se verifican sus píxeles, sin cambiar de contexto a un panel en el medio.

Continúa

Habilidad relacionada

Clasifica una compilación desde tu agente

Clasifica regresiones reales frente a ruido y acepta líneas base, a través de MCP.

Pruebas visuales para agentes

UI Verify captura tu interfaz de usuario en cada solicitud de extracción y un juez de IA distingue un cambio previsto de una regresión real. Mira cómo funciona.

Comienza