loading…
en/
Browse all
visual-ui-debug-agent-mcp
FreeMaintainedVUDA - 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)
About
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.
README
Smithery CLI connects your agents to thousands of skills and MCP servers directly from the command line. To get started, simply run npx skills add smithery/cli.
Installation
npm install -g smithery@latest
Requires Node.js 20+.
Commands
MCP Servers
smithery mcp search [term] # Search the Smithery registry
smithery mcp add <url> # Add an MCP server connection
smithery mcp list # List your connections
smithery mcp remove <ids...> # Remove connections
Tools
Interact with tools from MCP servers connected via smithery mcp.
smithery tool list [connection] # List tools from your connected MCP servers
smithery tool find [query] # Search tools by name or intent
smithery tool get <connection> <tool> # Show full details for one tool
smithery tool call <connection> <tool> [args] # Call a tool
Skills
Browse skills on the Smithery Skills Registry and install them with the upstream installer:
npx skills add <skill> # e.g. npx skills add smithery-ai/cli
Auth
smithery auth login # Login with Smithery (OAuth)
smithery auth logout # Log out
smithery auth whoami # Check current user
smithery auth token # Mint a service token
smithery auth token --policy '<json>' # Mint a restricted token
Namespaces
smithery namespace list # List your namespaces
smithery namespace use <name> # Set current namespace
Publishing
smithery mcp publish <url> -n <org/server> # Publish an MCP server URL
smithery mcp publish <bundle.mcpb> -n <org/server> # Publish an MCP bundle
Examples
# Search and connect to an MCP server
smithery mcp search "github"
smithery mcp add github --id github
# Find and call tools from your connected MCP servers
smithery tool find "create issue"
smithery tool call github create_issue '{"title":"Bug fix","body":"..."}'
# Browse and install skills
smithery skill search "frontend" --json --page 2
smithery skill add anthropics/frontend-design --agent claude-code
# Publish your MCP server URL
smithery mcp publish https://my-mcp-server.com -n myorg/my-server
# Publish a built MCP bundle
smithery mcp publish ./server.mcpb -n myorg/my-server
Development
git clone https://github.com/smithery-ai/cli
cd cli && pnpm install && pnpm run build
npx . --help
Contributing
Contributions welcome! Please submit a Pull Request.
How to install
Run in your terminal:
claude mcp add visual-ui-debug-agent-mcp -- npx -y @smithery/cli run samihalawa/visual-ui-debug-agent-mcpRelated MCPs
Compare visual-ui-debug-agent-mcp with
Not sure what to pick?
Find your stack in 60 seconds
Author?
Embed badge for your README
Browse similar
All development MCPs