visual-ui-debug-agent-mcp

VUDA - Visual UI Debug Agent

Autonomous MCP Server for AI-Powered Visual UI Testing & Debugging

VUDA (Visual UI Debug Agent) is an MCP (Model Context Protocol) server that empowers AI models to visually analyze, test, and debug web interfaces using Playwright. Any AI model, even without native vision, can inspect web pages, detect UI bugs, validate workflows, and measure performance automatically.

---

Key Features

Visual Analysis: Capture screenshots, map interactive elements, analyze page structure.
Workflow Testing: Validate user journeys with step-by-step screenshots.
Performance Monitoring: Measure load times, Core Web Vitals, and identify bottlenecks.
API Testing: Validate backend endpoints and responses.
Visual Comparison: Highlight UI changes between versions.
Console Monitoring: Capture and log errors, warnings, and console output in real-time.

---

Quick Start

Install globally via npm:
npm install -g visual-ui-debug-agent-mcp
Or run directly:
npx visual-ui-debug-agent-mcp

Configure for Claude Desktop:
{
"mcpServers": {
"vuda": {
"command": "npx",
"args": ["-y", "visual-ui-debug-agent-mcp"]
}
}
}

Supported Environments
Node.js 18+
macOS, Linux, Windows

---

Core Tools (Selection)

Category
Examples
Visual Analysis
enhanced_page_analyzer, screenshot_url, visual_comparison
Workflow & Testing
ui_workflow_validator, navigation_flow_validator, api_endpoint_tester
Performance & Monitoring
performance_analysis, console_monitor, sitemap_crawler
Playwright Controls
playwright_click, playwright_fill, playwright_screenshot
Utility
tunnel_helper, debug_memory

---

Example Commands

Screenshot: "Take a screenshot of https://example.com"
Analyze Page: "Analyze the UI of https://myapp.com/dashboard"
Test Login Flow: Navigate, fill credentials, submit, verify, and capture.
Compare Versions: Highlight visual differences between two page states.
Monitor Performance: Measure load times and identify bottlenecks.

---

Why VUDA?

Feature
VUDA Advantage
MCP Native
Built for AI integration
Comprehensive Toolset
30 specialized tools
Works Without Vision
Enables AI without native vision
Autonomous Testing
AI-driven, self-contained workflows
Cross-Browser Support
Playwright-powered
Zero Config
Works out of the box

---

Contributing

Fork the repo & create a branch.
Commit and push your feature.
Open a Pull Request.

Licensed under ISC.

Built with Playwright + Model Context Protocol by @samihalawa.