Servidor MCP de AI Vision

Agente de depuración de interfaz de usuario visual (MCP)

Un servidor MCP de depuración autónomo que permite a los modelos de IA analizar, depurar e interactuar con interfaces web a través de Playwright. Este servidor permite a cualquier modelo de IA (incluso aquellos sin visión integrada) inspeccionar visualmente páginas web, detectar errores de interfaz de usuario, probar flujos de trabajo de usuario y validar el rendimiento de las aplicaciones, todo ello sin intervención humana.

Captura de pantalla de automatización de la interfaz de usuario

Agente de depuración de interfaz de usuario autónomo

Este servidor MCP funciona como un agente de depuración autónomo impulsado por IA que puede:

Realizar un análisis visual completo de aplicaciones web
Detectar problemas de interfaz de usuario inspeccionando los elementos visuales y sus propiedades
Pruebe automáticamente flujos de trabajo de usuarios comunes sin necesidad de crear scripts de prueba manualmente
Validar los puntos finales de la API y verificar las respuestas del backend
Realizar un seguimiento de los cambios visuales entre las versiones de la aplicación
Supervisar los registros de la consola para detectar errores y advertencias
Analizar métricas de rendimiento para identificar cuellos de botella
Genere informes detallados con capturas de pantalla y recomendaciones.

El servidor está diseñado para funcionar de forma inteligente, reutilizando sesiones del navegador, evitando la creación de archivos innecesarios y centrándose en los aspectos más importantes de su aplicación.

Opciones de instalación

Uso de una puerta de enlace MCP (recomendado)

La forma más sencilla de instalar este servidor MCP es a través de cualquier puerta de enlace compatible con MCP:

# Example with Claude gateway
claude-gateway install visual-ui-debug-agent-mcp

Script de instalación rápida

Utilice nuestro script de instalación de una sola línea:

curl -s https://raw.githubusercontent.com/samihalawa/visual-ui-debug-agent-mcp/main/scripts/install-global.sh | bash

Instalación de NPM

Para la instalación global a través de npm:

# Install globally
npm install -g visual-ui-debug-agent-mcp

# Start the server
visual-ui-debug-agent-mcp

Instalación de Docker Hub

Para implementación en contenedores:

# Pull the image from Docker Hub
docker pull samihalawa/visual-ui-debug-agent-mcp:latest

# Run the container
docker run -p 8080:8080 samihalawa/visual-ui-debug-agent-mcp:latest

Integración de herrería

Este paquete es totalmente compatible con Smithery utilizando el archivo de configuración incluido:

# Install with Smithery
smithery install visual-ui-debug-agent-mcp

# Or run with your API key
npm run smithery:key YOUR_SMITHERY_API_KEY

Para obtener instrucciones completas de instalación y uso, consulte la Guía de integración de Smithery .

Referencia completa de herramientas

Herramientas primarias de análisis visual

1. `enhanced_page_analyzer` 🔍

Proporciona un análisis completo de páginas web con mapeo de elementos interactivos, métricas de rendimiento e inspección visual.

const analysis = await mcp.callTool("enhanced_page_analyzer", {
  url: "https://example.com/dashboard",
  includeConsole: true,
  mapElements: true,
  fullPage: true
});

2. `ui_workflow_validator` 🔄

Prueba automáticamente recorridos de usuario completos ejecutando y validando una secuencia de interacciones de UI.

const result = await mcp.callTool("ui_workflow_validator", {
  startUrl: "https://example.com/login",
  taskDescription: "User login flow",
  steps: [
    { description: "Enter username", action: "fill", selector: "#username", value: "test" },
    { description: "Enter password", action: "fill", selector: "#password", value: "pass" },
    { description: "Click login", action: "click", selector: "button[type='submit']" },
    { description: "Verify dashboard loads", action: "verifyElementVisible", selector: ".dashboard" }
  ],
  captureScreenshots: "all"
});

3. `visual_comparison` 👁️

Compara dos páginas web o estados de interfaz de usuario para identificar diferencias visuales.

const diff = await mcp.callTool("visual_comparison", {
  url1: "https://example.com/before",
  url2: "https://example.com/after",
  threshold: 0.05
});

4. `screenshot_url` 📸

Captura capturas de pantalla de alta calidad de cualquier URL con opciones para página completa o elementos específicos.

const screenshot = await mcp.callTool("screenshot_url", {
  url: "https://example.com/profile",
  fullPage: true,
  device: "iPhone 13"
});

5. `batch_screenshot_urls` 📷

Toma capturas de pantalla de múltiples URL en una sola operación para una comparación eficiente.

const screenshots = await mcp.callTool("batch_screenshot_urls", {
  urls: ["https://example.com/page1", "https://example.com/page2"],
  fullPage: true
});

Herramientas de prueba de flujo de usuario

6. `navigation_flow_validator` 🧭

Prueba secuencias de navegación de varios pasos con validación.

const navResult = await mcp.callTool("navigation_flow_validator", {
  startUrl: "https://example.com",
  steps: [
    { action: "click", selector: "a.products" },
    { action: "wait", waitTime: 1000 },
    { action: "click", selector: ".product-item" }
  ],
  captureScreenshots: true
});

7. `api_endpoint_tester` 🔌

Prueba múltiples puntos finales de API y verifica las respuestas para la validación del backend.

const apiTest = await mcp.callTool("api_endpoint_tester", {
  url: "https://api.example.com/v1",
  endpoints: [
    { path: "/users", method: "GET" },
    { path: "/products", method: "GET" }
  ],
  authToken: "Bearer token123"
});

DOM y análisis de rendimiento

8. `dom_inspector` 🔬

Inspecciona los elementos DOM y sus propiedades en detalle.

const elementInfo = await mcp.callTool("dom_inspector", {
  url: "https://example.com",
  selector: "nav.main-menu",
  includeChildren: true,
  includeStyles: true
});

9. `console_monitor` 📟

Supervisa y captura registros de la consola para detectar errores.

const logs = await mcp.callTool("console_monitor", {
  url: "https://example.com/app",
  filterTypes: ["error", "warning"],
  duration: 5000
});

10. `performance_analysis` ⚡

Mide y analiza las métricas de rendimiento de carga de la página.

const perfMetrics = await mcp.callTool("performance_analysis", {
  url: "https://example.com/dashboard",
  iterations: 3
});

Controles de dramaturgo de bajo nivel

11. `screenshot_local_files` 📁

Toma capturas de pantalla de archivos HTML locales.

const localScreenshot = await mcp.callTool("screenshot_local_files", {
  filePath: "/path/to/local/file.html"
});

12. Acciones directas del dramaturgo

Conjunto completo de controles Playwright de bajo nivel para una automatización precisa:

playwright_navigate : Navegar a URL específicas
playwright_click : Haz clic en los elementos
playwright_iframe_click : Haga clic en elementos dentro de iframes
playwright_fill : Rellenar campos del formulario
playwright_select : Seleccionar opciones desplegables
playwright_hover : Pase el cursor sobre los elementos
playwright_evaluate : Ejecutar JavaScript en el contexto de la página
playwright_console_logs : Obtener registros de la consola
playwright_get_visible_text : Extraer texto visible
playwright_get_visible_html : Obtener HTML visible
playwright_go_back : Navegar hacia atrás
playwright_go_forward : Navegar hacia adelante
playwright_press_key : Presionar teclas del teclado
playwright_drag : Arrastrar y soltar elementos
playwright_screenshot : Toma capturas de pantalla personalizadas

Flujos de trabajo de depuración autónoma

El servidor MCP puede ejecutar flujos de trabajo de depuración completos de forma autónoma mediante la combinación de herramientas. Por ejemplo:

Prueba de regresión visual

// 1. Analyze the current version
const currentAnalysis = await mcp.callTool("enhanced_page_analyzer", {...});

// 2. Compare with previous version
const comparisonResult = await mcp.callTool("visual_comparison", {...});

// 3. Generate visual difference report
const report = await mcp.callTool("ui_workflow_validator", {...});

Validación del flujo de usuario de extremo a extremo

// 1. Start with login flow
const loginResult = await mcp.callTool("ui_workflow_validator", {...});

// 2. Validate core features
const featureResults = await mcp.callTool("navigation_flow_validator", {...});

// 3. Test API endpoints
const apiResults = await mcp.callTool("api_endpoint_tester", {...});

Optimización del rendimiento

// 1. Analyze initial performance
const initialPerformance = await mcp.callTool("performance_analysis", {...});

// 2. Identify slow-loading elements
const elementPerformance = await mcp.callTool("dom_inspector", {...});

// 3. Monitor console for errors
const consoleErrors = await mcp.callTool("console_monitor", {...});

Ejemplos de análisis visual

Mapeo de elementos

El servidor MCP asigna automáticamente todos los elementos interactivos en una página, lo que facilita que un modelo de IA comprenda la estructura de la interfaz de usuario.

Comparación visual

La herramienta de comparación visual resalta las diferencias entre los estados de la interfaz de usuario, lo que resulta perfecto para detectar cambios visuales inesperados.

Opciones de integración

Integración con Smithery

# smithery.yaml configuration
startCommand:
  type: stdio
  configSchema:
    type: object
    properties:
      port:
        type: number
        description: Port number for the MCP server
      debug:
        type: boolean
        description: Enable debug mode

Integración con GLAMA

// glama.json configuration
{
  "name": "visual-ui-debug-agent-mcp",
  "version": "1.0.2",
  "settings": {
    "port": 8080,
    "headless": true,
    "maxConcurrentSessions": 5
  }
}

Integración con modelos sin visión

El servidor MCP convierte la información visual en datos estructurados que pueden ser utilizados por cualquier modelo de IA, incluso aquellos sin capacidades de visión:

// The model receives structured data about visual elements
{
  "interactiveElements": [
    {
      "tagName": "button",
      "text": "Submit",
      "bounds": {"x": 120, "y": 240, "width": 100, "height": 40},
      "visible": true
    },
    // More elements...
  ]
}

Integración CI/CD

Este servidor MCP incluye flujos de trabajo de GitHub Actions para integración e implementación continuas:

Construir y probar : valida la calidad del código
NPM Publishing : automatiza la publicación de paquetes
Docker Publishing : crea y envía imágenes de Docker
Smithery Publishing : Implementación en la plataforma Smithery

Licencia

Este proyecto está licenciado bajo la Licencia ISC .

This server cannot be installed

security - not tested

license - not found

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Proporciona capacidades de análisis visual impulsadas por IA para Claude y otros asistentes de IA compatibles con MCP, lo que les permite capturar y analizar capturas de pantalla, realizar operaciones de archivos y generar informes de UI/UX.

Related MCP Servers

Perplexity Tool for Claude Desktop
letsbuildagent
A
security
A
license
A
quality
A custom MCP tool that integrates Perplexity AI's API with Claude Desktop, allowing Claude to perform web-based research and provide answers with citations.
Last updated -
1
2
JavaScript
MIT License
Screenshot MCP Server
codingthefuturewithai
-
security
F
license
-
quality
Enables AI tools to capture and process screenshots of a user's screen, allowing AI assistants to see and analyze what the user is looking at through a simple MCP interface.
Last updated -
1
Python
PyMCPAutoGUI
kitfactory
-
security
A
license
-
quality
An MCP server that bridges AI agents with GUI automation capabilities, allowing them to control mouse, keyboard, windows, and take screenshots to interact with desktop applications.
Last updated -
Python
MIT License
Vibe Coder MCP
freshtechbro
A
security
F
license
A
quality
An MCP server that supercharges AI assistants with powerful tools for software development, enabling research, planning, code generation, and project scaffolding through natural language interaction.
Last updated -
11
40
TypeScript

View all related MCP servers

Agente de depuración de interfaz de usuario visual (MCP)

Agente de depuración de interfaz de usuario autónomo

Opciones de instalación

Uso de una puerta de enlace MCP (recomendado)

Script de instalación rápida

Instalación de NPM

Instalación de Docker Hub

Integración de herrería

Referencia completa de herramientas

Herramientas primarias de análisis visual

1. enhanced_page_analyzer 🔍

2. ui_workflow_validator 🔄

3. visual_comparison 👁️

4. screenshot_url 📸

5. batch_screenshot_urls 📷