# visual-ui-debug-agent-mcp

> Use this tool when you need to automate visual UI testing and debugging of web interfaces using AI models. It solves problems such as detecting UI bugs, validating workflows, and measuring performance, and provides inputs such as webpage URLs and outputs like screenshots and test results. Use VUDA in contexts where autonomous testing and debugging are required, such as in CI/CD pipelines or automated QA workflows.

Canonical page: https://skillsregistry.net/skills/samihalawa-visual-ui-debug-agent-mcp  
JSON: https://api.skillsregistry.net/v1/skills/samihalawa-visual-ui-debug-agent-mcp

## Description

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.

## Trust

- **Trust score (0–1):** 0.74
- **Verification tier:** verified
- **Last scanned:** 2026-09-02

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** container
- **Runtime environment:** vm
- **Category:** version-control
- **Updated:** 2026-09-02

## Source

- **Source listing:** [Smithery](https://smithery.ai/server/samihalawa/visual-ui-debug-agent-mcp)
- **Repository:** <https://github.com/samihalawa/visual-ui-debug-agent-mcp>

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "samihalawa-visual-ui-debug-agent-mcp"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/samihalawa-visual-ui-debug-agent-mcp` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/samihalawa-visual-ui-debug-agent-mcp/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt