Visual UI Debug Agent MCP
An autonomous debugging MCP server that empowers AI models to analyze, debug, and interact with web interfaces through Playwright. This server enables any AI model (even those without built-in vision capabilities) to visually inspect web pages, find UI bugs, test user workflows, and validate application performance - all without human intervention.
Autonomous UI Debugging Agent
This MCP server functions as an AI-powered autonomous debugging agent that can:
- Perform comprehensive visual analysis of web applications
- Detect UI issues by inspecting visual elements and their properties
- Automatically test common user workflows without manual test script creation
- Validate API endpoints and verify backend responses
- Track visual changes between application versions
- Monitor console logs for errors and warnings
- Analyze performance metrics to identify bottlenecks
- Generate detailed reports with screenshots and recommendations
The server is designed to work intelligently, reusing browser sessions, avoiding unnecessary file creation, and focusing on the most important aspects of your application.
Installation Options
Using an MCP Gateway (Recommended)
The easiest way to install this MCP server is through any MCP-compatible gateway:
Quick Installation Script
Use our one-line installation script:
NPM Installation
For global installation via npm:
Docker Hub Installation
For containerized deployment:
Smithery Integration
This package is fully Smithery-compatible using the included configuration file:
For full installation and usage instructions, see the Smithery Integration Guide.
Complete Tool Reference
Primary Visual Analysis Tools
1. enhanced_page_analyzer
🔍
Provides comprehensive analysis of web pages with interactive elements mapping, performance metrics, and visual inspection.
2. ui_workflow_validator
🔄
Automatically tests full user journeys by executing and validating a sequence of UI interactions.
3. visual_comparison
👁️
Compares two web pages or UI states to identify visual differences.
4. screenshot_url
📸
Captures high-quality screenshots of any URL with options for full page or specific elements.
5. batch_screenshot_urls
📷
Takes screenshots of multiple URLs in a single operation for efficient comparison.
User Flow Testing Tools
6. navigation_flow_validator
🧭
Tests multi-step navigation sequences with validation.
7. api_endpoint_tester
🔌
Tests multiple API endpoints and verifies responses for backend validation.
DOM and Performance Analysis
8. dom_inspector
🔬
Inspects DOM elements and their properties in detail.
9. console_monitor
📟
Monitors and captures console logs for error detection.
10. performance_analysis
⚡
Measures and analyzes page load performance metrics.
Low-Level Playwright Controls
11. screenshot_local_files
📁
Takes screenshots of local HTML files.
12. Direct Playwright Actions
Complete set of low-level Playwright controls for precise automation:
playwright_navigate
: Navigate to specific URLsplaywright_click
: Click on elementsplaywright_iframe_click
: Click elements inside iframesplaywright_fill
: Fill form fieldsplaywright_select
: Select dropdown optionsplaywright_hover
: Hover over elementsplaywright_evaluate
: Run JavaScript in the page contextplaywright_console_logs
: Get console logsplaywright_get_visible_text
: Extract visible textplaywright_get_visible_html
: Get visible HTMLplaywright_go_back
: Navigate backplaywright_go_forward
: Navigate forwardplaywright_press_key
: Press keyboard keysplaywright_drag
: Drag and drop elementsplaywright_screenshot
: Take custom screenshots
Autonomous Debugging Workflows
The MCP server can autonomously perform complete debugging workflows by combining tools. For example:
Visual Regression Testing
End-to-End User Flow Validation
Performance Optimization
Visual Analysis Examples
Element Mapping
The MCP server automatically maps all interactive elements on a page, making it easy for an AI model to understand the UI structure.
Visual Comparison
The visual comparison tool highlights differences between UI states, perfect for catching unexpected visual changes.
Integration Options
Integration with Smithery
Integration with GLAMA
Integration with Non-Vision Models
The MCP server converts visual information into structured data that can be used by any AI model, even those without vision capabilities:
CI/CD Integration
This MCP server includes GitHub Actions workflows for continuous integration and deployment:
- Build and Test: Validates code quality
- NPM Publishing: Automates package publishing
- Docker Publishing: Creates and pushes Docker images
- Smithery Publishing: Deploys to Smithery platform
License
This project is licensed under the ISC License.
You must be authenticated.
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
Tools
A Model Context Protocol server that provides AI vision capabilities for analyzing UI screenshots, offering tools for screen analysis, file operations, and UI/UX report generation.
- Autonomous UI Debugging Agent
- Installation Options
- Complete Tool Reference
- Autonomous Debugging Workflows
- Visual Analysis Examples
- Integration Options
- CI/CD Integration
- License
Related Resources
Related MCP Servers
- AsecurityAlicenseAqualityA Model Context Protocol server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.Last updated -135,5973,440TypeScriptMIT License
- AsecurityAlicenseAqualityAn official MCP server implementation that allows AI assistants to capture website screenshots through the ScreenshotOne API, enabling visual context from web pages during conversations.Last updated -16TypeScriptMIT License
- -securityFlicense-qualityA server that provides rich UI context and interaction capabilities to AI models, enabling deep understanding of user interfaces through visual analysis and precise interaction via Model Context Protocol.Last updated -24Python
- -security-license-qualityA Model Context Protocol server enabling AI assistants to generate images through OpenAI's DALL-E API with full support for all available options and fine-grained control.Last updated -JavaScriptMIT License