AI Vision Debug MCP Server

Visueller UI-Debug-Agent MCP

Ein autonomer MCP-Debugging-Server, der KI-Modellen die Analyse, Fehlerbehebung und Interaktion mit Weboberflächen über Playwright ermöglicht. Dieser Server ermöglicht es jedem KI-Modell (auch solchen ohne integrierte Bildverarbeitungsfunktionen), Webseiten visuell zu prüfen, UI-Fehler zu finden, Benutzer-Workflows zu testen und die Anwendungsleistung zu validieren – alles ohne menschliches Eingreifen.

Autonomer UI-Debugging-Agent

Dieser MCP-Server fungiert als KI-gestützter autonomer Debugging-Agent, der Folgendes kann:

Führen Sie eine umfassende visuelle Analyse von Webanwendungen durch
Erkennen Sie UI-Probleme durch die Überprüfung visueller Elemente und ihrer Eigenschaften
Automatisches Testen gängiger Benutzer-Workflows ohne manuelles Erstellen von Testskripten
Validieren Sie API-Endpunkte und verifizieren Sie Backend-Antworten
Visuelle Änderungen zwischen Anwendungsversionen verfolgen
Überwachen Sie Konsolenprotokolle auf Fehler und Warnungen
Analysieren Sie Leistungsmetriken, um Engpässe zu identifizieren
Erstellen Sie detaillierte Berichte mit Screenshots und Empfehlungen

Der Server ist auf intelligente Arbeitsweise ausgelegt, indem er Browsersitzungen wiederverwendet, die Erstellung unnötiger Dateien vermeidet und sich auf die wichtigsten Aspekte Ihrer Anwendung konzentriert.

Installationsoptionen

Verwendung eines MCP-Gateways (empfohlen)

Die einfachste Möglichkeit, diesen MCP-Server zu installieren, ist über ein beliebiges MCP-kompatibles Gateway:

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

Schnellinstallationsskript

Verwenden Sie unser einzeiliges Installationsskript:

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

NPM-Installation

Für die globale Installation über npm:

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

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

Docker Hub-Installation

Für die containerisierte Bereitstellung:

# 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

Smithery Integration

Dieses Paket ist mithilfe der enthaltenen Konfigurationsdatei vollständig Smithery-kompatibel:

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

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

Vollständige Installations- und Verwendungsanweisungen finden Sie im Smithery Integration Guide .

Vollständige Werkzeugreferenz

Primäre visuelle Analysetools

1. `enhanced_page_analyzer` 🔍

Bietet umfassende Analyse von Webseiten mit Zuordnung interaktiver Elemente, Leistungsmetriken und visueller Überprüfung.

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

2. `ui_workflow_validator` 🔄

Testet automatisch vollständige Benutzerreisen, indem eine Abfolge von UI-Interaktionen ausgeführt und validiert wird.

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` 👁️

Vergleicht zwei Webseiten oder UI-Zustände, um visuelle Unterschiede zu erkennen.

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

4. `screenshot_url` 📸

Erfasst qualitativ hochwertige Screenshots jeder URL mit Optionen für die ganze Seite oder bestimmte Elemente.

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

5. `batch_screenshot_urls` 📷

Erstellt in einem einzigen Vorgang Screenshots von mehreren URLs für einen effizienten Vergleich.

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

Tools zum Testen des Benutzerflusses

6. `navigation_flow_validator` 🧭

Testet mehrstufige Navigationssequenzen mit Validierung.

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` 🔌

Testet mehrere API-Endpunkte und überprüft Antworten zur Backend-Validierung.

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 und Leistungsanalyse

8. `dom_inspector` 🔬

Untersucht DOM-Elemente und ihre Eigenschaften im Detail.

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

9. `console_monitor` 📟

Überwacht und erfasst Konsolenprotokolle zur Fehlererkennung.

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

10. `performance_analysis` ⚡

Misst und analysiert Leistungsmetriken beim Seitenladen.

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

Einfache Playwright-Steuerelemente

11. `screenshot_local_files` 📁

Macht Screenshots von lokalen HTML-Dateien.

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

12. Direkte Aktionen des Dramatikers

Vollständiger Satz Low-Level-Playwright-Steuerelemente für präzise Automatisierung:

playwright_navigate : Navigieren Sie zu bestimmten URLs
playwright_click : Klicken Sie auf Elemente
playwright_iframe_click : Klicken Sie auf Elemente innerhalb von Iframes
playwright_fill : Formularfelder ausfüllen
playwright_select : Dropdown-Optionen auswählen
playwright_hover : Bewegen Sie den Mauszeiger über die Elemente
playwright_evaluate : Führen Sie JavaScript im Seitenkontext aus
playwright_console_logs : Konsolenprotokolle abrufen
playwright_get_visible_text : Sichtbaren Text extrahieren
playwright_get_visible_html : Sichtbares HTML abrufen
playwright_go_back : Zurück navigieren
playwright_go_forward : Vorwärts navigieren
playwright_press_key : Drücken Sie die Tastaturtasten
playwright_drag : Elemente per Drag & Drop verschieben
playwright_screenshot : Machen Sie benutzerdefinierte Screenshots

Autonome Debugging-Workflows

Der MCP-Server kann durch die Kombination von Tools komplette Debugging-Workflows autonom durchführen. Zum Beispiel:

Visuelle Regressionstests

// 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", {...});

End-to-End-Benutzerflussvalidierung

// 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", {...});

Leistungsoptimierung

// 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", {...});

Beispiele für visuelle Analysen

Elementzuordnung

Der MCP-Server ordnet alle interaktiven Elemente einer Seite automatisch zu, sodass ein KI-Modell die UI-Struktur leicht verstehen kann.

Visueller Vergleich

Das visuelle Vergleichstool hebt Unterschiede zwischen UI-Zuständen hervor und ist perfekt geeignet, um unerwartete visuelle Änderungen zu erkennen.

Integrationsoptionen

Integration mit 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

Integration mit GLAMA

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

Integration mit Nicht-Vision-Modellen

Der MCP-Server wandelt visuelle Informationen in strukturierte Daten um, die von jedem KI-Modell verwendet werden können, auch von solchen ohne visuelle Fähigkeiten:

// 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...
  ]
}

CI/CD-Integration

Dieser MCP-Server umfasst GitHub Actions-Workflows für kontinuierliche Integration und Bereitstellung:

Erstellen und Testen : Validiert die Codequalität
NPM Publishing : Automatisiert die Paketveröffentlichung
Docker-Publishing : Erstellt und pusht Docker-Images
Smithery Publishing : Bereitstellung auf der Smithery-Plattform

Lizenz

Dieses Projekt ist unter der ISC-Lizenz lizenziert.

Visueller UI-Debug-Agent MCP

Autonomer UI-Debugging-Agent

Installationsoptionen

Verwendung eines MCP-Gateways (empfohlen)

Schnellinstallationsskript

NPM-Installation

Docker Hub-Installation

Smithery Integration

Vollständige Werkzeugreferenz

Primäre visuelle Analysetools

1. enhanced_page_analyzer 🔍

2. ui_workflow_validator 🔄

3. visual_comparison 👁️

4. screenshot_url 📸

5. batch_screenshot_urls 📷

Tools zum Testen des Benutzerflusses

6. navigation_flow_validator 🧭

7. api_endpoint_tester 🔌

DOM und Leistungsanalyse

8. dom_inspector 🔬

9. console_monitor 📟

10. performance_analysis ⚡