### Install and Run VUDA with NPM

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Installs VUDA globally using NPM and then starts the server. Requires Node.js and npm to be installed.

```bash
npm install -g visual-ui-debug-agent-mcp
vuda
```

```bash
npm install -g visual-ui-debug-agent-mcp
visual-ui-debug-agent
```

--------------------------------

### Run Project Scripts with Smithery Integration

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/SETUP-INSTRUCTIONS.md

Collection of npm scripts for interacting with Smithery. These scripts handle starting the MCP server, registering it with Smithery, and running it with compatible configurations, all using the configured Smithery API key.

```bash
npm run smithery:key
```

```bash
npm run smithery:install
```

```bash
npm run smithery:run
```

--------------------------------

### Install VUDA with Quick Script

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Installs VUDA globally using a one-line curl and bash script. This is a command-line operation.

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

--------------------------------

### Direct CLI Installation to Smithery

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Installs the package directly to Smithery using its command-line interface. Requires a Smithery API key and specifies the client and ID for registration.

```bash
npx @smithery/cli install . --id mcp-ai-vision-debug-ui-automation --client claude --key YOUR_SMITHERY_API_KEY
```

--------------------------------

### Smithery Configuration for MCP

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Provides an example of a smithery.yaml configuration file for integrating with the MCP. It specifies the start command type and configuration schema, including port and debug options.

```yaml
startCommand:
  type: stdio
  configSchema:
    type: object
    properties:
      port:
        type: number
        description: Port number for the MCP server
      debug:
        type: boolean
        description: Enable debug mode
```

--------------------------------

### Install MCP AI Vision Debug UI Automation from Smithery Registry

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/smithery-publishing.md

Installs the MCP AI Vision Debug UI Automation package directly from the Smithery registry. This requires the package to be published to the registry and uses the Smithery CLI with client and API key for installation.

```bash
npx @smithery/cli install mcp-ai-vision-debug-ui-automation --client claude --key YOUR_SMITHERY_API_KEY
```

--------------------------------

### Install VUDA with Smithery

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Installs VUDA using the Smithery package manager. An alternative command allows running with a specific API key.

```bash
smithery install visual-ui-debug-agent-mcp
```

```bash
npm run smithery:key YOUR_SMITHERY_API_KEY
```

--------------------------------

### Create MCP Configuration Directory

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/mcp-connection-troubleshooting.md

Creates the necessary directory structure for MCP configuration files. Ensures the ~/.mcp directory exists, creating it if it doesn't.

```bash
mkdir -p ~/.mcp
```

--------------------------------

### Local Development Commands (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/ci-cd-migration.md

Commands for local development, including building, testing, and deploying to Smithery. These are executed directly in the terminal.

```bash
# Local build and test
npm run build
npm run test

# Local Smithery testing
npm run smithery
```

--------------------------------

### Install VUDA with Claude Gateway

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Installs the VUDA agent using a Claude-compatible gateway. This is a command-line operation.

```bash
claude-gateway install visual-ui-debug-agent-mcp
```

--------------------------------

### Create MCP Configuration File

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/mcp-connection-troubleshooting.md

Creates a JSON configuration file named config.json within the ~/.mcp directory. This file defines server host, port, and authentication settings.

```bash
cat > ~/.mcp/config.json << EOF
{
  "server": {
    "port": 8080,
    "host": "localhost"
  },
  "auth": {
    "enabled": false
  }
}
EOF
```

--------------------------------

### Install VUDA Platform-Specific Packages (Windows)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Installs VUDA for Windows (32-bit x64) using NPM.

```bash
npm install -g visual-ui-debug-agent-mcp-win32-x64
```

--------------------------------

### Install VUDA with Docker

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Pulls the latest VUDA Docker image and runs it, exposing port 8080. Requires Docker to be installed.

```bash
docker pull luigi1234/visual-ui-debug-agent:latest
docker run -p 8080:8080 luigi1234/visual-ui-debug-agent:latest
```

--------------------------------

### Configure Smithery API Key

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/SETUP-INSTRUCTIONS.md

Saves the Smithery API key to a .env file for project scripts. The key is used for authentication when interacting with the Smithery service.

```env
SMITHERY_API_KEY=4bd20974-88a7-456d-94ec-3d45b005cae2
```

--------------------------------

### Verify MCP Server Status

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/mcp-connection-troubleshooting.md

Checks if the MCP server is actively listening on port 8080. If the server is not running, it provides a command to start it.

```bash
lsof -i :8080
```

```bash
mcp serve
```

--------------------------------

### Install VUDA Platform-Specific Packages (Linux)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Installs VUDA for Linux on both 64-bit (x64) and ARM64 architectures using NPM.

```bash
npm install -g visual-ui-debug-agent-mcp-linux-x64
npm install -g visual-ui-debug-agent-mcp-linux-arm64
```

--------------------------------

### Install to Local MCP Dockmaster using npm script

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Copies built files to the MCP Dockmaster directory and configures the server in the Dockmaster registry using an npm script. Intended for local development or testing.

```bash
npm run install:local
```

--------------------------------

### Manage Cloudflare Tunnels

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Facilitates the setup and management of Cloudflare tunnels for exposing local ports for remote debugging. Supports guiding setup, storing tunnel URLs, and retrieving them.

```javascript
// Guide the user through tunnel setup
const guide = await mcp.callTool("tunnel_helper", {
  action: "guide",
  port: 3000
});

// Store a tunnel URL for later use
await mcp.callTool("tunnel_helper", {
  action: "store",
  port: 3000,
  url: "https://example.trycloudflare.com"
});

// Retrieve stored tunnel URLs
const tunnels = await mcp.callTool("tunnel_helper", {
  action: "retrieve"
});
```

--------------------------------

### Install MCP AI Vision Debug UI Automation Globally

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/smithery-publishing.md

Installs the MCP AI Vision Debug UI Automation package globally using npm. This is a prerequisite for running the package directly or with certain Smithery configurations.

```bash
npm install -g mcp-ai-vision-debug-ui-automation
```

--------------------------------

### Install VUDA Platform-Specific Packages (macOS)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Installs VUDA for macOS on both Intel (x64) and Apple Silicon (arm64) architectures using NPM.

```bash
npm install -g visual-ui-debug-agent-mcp-darwin-x64
npm install -g visual-ui-debug-agent-mcp-darwin-arm64
```

--------------------------------

### Entry Points and Main Files Discovery (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/iterative-debug-loop.md

Identifies potential entry points and main files for the project by looking for common filenames in the 'src' directory and checking 'package.json' for 'main', 'start', or 'entry' scripts.

```bash
ls -la src/ | grep -E "(index|main|app)\.(js|ts|jsx|tsx)"
```

```bash
find . -name "package.json" -exec grep -H "main\|start\|entry" {} \;
```

--------------------------------

### Publish to NPM using npm CLI

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Updates the version number and publishes the package to the NPM registry. Requires prior setup and authentication with NPM.

```bash
# Update version number
npm version patch  # or minor, major

# Publish to npm
npm run deploy:npm
```

--------------------------------

### Set up Remote Access with Cloudflare Tunnel

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/visual-debugging.md

This command initiates a Cloudflare tunnel to expose a local web server to the internet, enabling remote debugging. It requires the 'cloudflare' CLI tool to be installed and configured.

```bash
cloudflare tunnel --url http://localhost:{port}
```

--------------------------------

### Set up Claude Alias in Zshrc

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/SETUP-INSTRUCTIONS.md

Adds a bash alias to the .zshrc file for simplified Claude command execution, bypassing permission checks. Requires sourcing the .zshrc file to activate in the current session.

```bash
# Claude alias with dangerously-skip-permissions
alias claude="claude --dangerously-skip-permissions"

```

```bash
source ~/.zshrc
```

--------------------------------

### Test MCP Connection

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/mcp-connection-troubleshooting.md

Tests the connection to the MCP server using the 'mcp status' command. A successful connection will return a confirmation status.

```bash
mcp status
```

--------------------------------

### Direct API Publishing to Smithery using npm script

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Executes an npm script to build, package, and send a direct API request to Smithery's server registration endpoint if CLI installation fails. Reports results.

```bash
npm run smithery:api-publish
```

--------------------------------

### Publish Docker Image using npm script

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Builds the Docker image with appropriate tags and pushes it to Docker Hub using a predefined npm script. Assumes Docker is installed and configured.

```bash
npm run deploy:docker
```

--------------------------------

### Configure VUDA for Fast Local Testing (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/TIMEOUT_CONFIGURATION.md

This example shows how to reduce timeout values for faster local development and testing. It lowers default, navigation, selector, and stability wait times to speed up the feedback loop.

```bash
# Reduced timeouts for fast local development
export VUDA_DEFAULT_TIMEOUT=10000
export VUDA_NAVIGATION_TIMEOUT=8000
export VUDA_SELECTOR_TIMEOUT=6000
export VUDA_STABILITY_WAIT=2000

node build/index.js
```

--------------------------------

### Run MCP AI Vision Debug UI Automation via Smithery CLI

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/smithery-publishing.md

Executes the registered MCP AI Vision Debug UI Automation package using the Smithery CLI. This command requires the package to be installed or registered with Smithery and uses the API key for authentication.

```bash
npx @smithery/cli run mcp-ai-vision-debug-ui-automation --key YOUR_SMITHERY_API_KEY
```

--------------------------------

### Run MCP AI Vision Debug UI Automation with Environment Variables

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/smithery-publishing.md

Runs the MCP AI Vision Debug UI Automation package directly after global installation, configuring its behavior through environment variables. This method bypasses Smithery registration for execution.

```bash
PORT=9090 DEBUG=true HEADLESS=false mcp-ai-vision-debug-ui-automation
```

--------------------------------

### Register MCP AI Vision Debug UI Automation with Smithery CLI

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/smithery-publishing.md

Registers the MCP AI Vision Debug UI Automation package with the Smithery CLI. This command assumes the package is available for local installation and specifies the client and API key for authentication.

```bash
npx @smithery/cli install local:mcp-ai-vision-debug-ui-automation --client claude --key YOUR_SMITHERY_API_KEY
```

--------------------------------

### Configure VUDA for Slow Applications (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/TIMEOUT_CONFIGURATION.md

This example demonstrates how to increase specific timeout values using environment variables for applications that load slowly or require more time for element interactions. It sets extended durations for default, navigation, and selector timeouts.

```bash
# Increase timeouts for slow applications
export VUDA_DEFAULT_TIMEOUT=30000
export VUDA_NAVIGATION_TIMEOUT=30000
export VUDA_SELECTOR_TIMEOUT=20000
export VUDA_STABILITY_WAIT=10000

node build/index.js
```

--------------------------------

### VUDA: UI Workflow Validator Tool (JavaScript)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Employs the 'ui_workflow_validator' tool to automatically test user journeys. It takes a starting URL, a task description, and a sequence of steps, including actions like 'fill' and 'click', and assertions like 'verifyElementVisible'. Screenshots can be captured for all steps.

```javascript
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"
});
```

--------------------------------

### Manual Smithery Packaging and Upload

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Creates a tarball archive of the project, excluding specific directories and files, for manual upload to the Smithery dashboard. Requires manual navigation and input on the dashboard.

```bash
# Create package.tar.gz
tar -czf package.tar.gz \
  --exclude="node_modules" \
  --exclude=".git" \
  --exclude="temp" \
  build publicresources scripts smithery.yaml package.json README.md LICENSE
```

--------------------------------

### Publish to Smithery using npm script

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Executes an npm script that builds the project, creates a temporary package, attempts various publishing methods to Smithery, and cleans up temporary files.

```bash
npm run smithery:publish
```

--------------------------------

### GLAMA Configuration for MCP

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Illustrates a glama.json configuration file for the visual-ui-debug-agent-mcp. It includes project name, version, and settings for port, headless mode, and concurrent sessions.

```json
{
  "name": "visual-ui-debug-agent-mcp",
  "version": "1.0.0",
  "settings": {
    "port": 8080,
    "headless": true,
    "maxConcurrentSessions": 5
  }
}
```

--------------------------------

### Complete Publishing to All Platforms using npm script

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Combines all publishing methods into a single operation, allowing for publishing to all available platforms at once. Requires specifying a version number as an argument.

```bash
npm run deploy:all -- --version X.Y.Z
```

--------------------------------

### List Available Smithery Servers

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/smithery-publishing.md

Lists the servers registered with the Smithery CLI, authenticated using the provided API key. This command helps verify successful registration or check available services.

```bash
npx @smithery/cli list servers --key YOUR_SMITHERY_API_KEY
```

--------------------------------

### Performance Optimization using MCP Tools

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Shows how to analyze and optimize application performance using MCP tools. Includes steps for initial analysis, identifying slow elements, and monitoring console errors.

```javascript
const initialPerformance = await mcp.callTool("performance_analysis", {...});
const elementPerformance = await mcp.callTool("dom_inspector", {...});
const consoleErrors = await mcp.callTool("console_monitor", {...});
```

--------------------------------

### Run Smithery Configuration Locally

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/smithery-publishing.md

Executes the MCP AI Vision Debug UI Automation package using the Smithery configuration defined in the local `smithery.yaml` file. This is useful for local testing without explicit Smithery registration.

```bash
npm run smithery
```

--------------------------------

### Publish Platform-Specific Versions using npm script

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/PUBLISHING.md

Creates and publishes separate packages for various platform architectures (macOS, Linux, Windows) using a dedicated npm script. Facilitates cross-platform distribution.

```bash
npm run deploy:cross-platform
```

--------------------------------

### Playwright Performance Analysis

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/src/prompt-templates/ui-debug-prompt.md

Explains how to leverage Playwright's `performance_analysis` capabilities to pinpoint performance bottlenecks in a web application.

```python
# Example: Measuring load time and identifying potential bottlenecks
start_time = page.evaluate("() => performance.now()")
page.goto("https://example.com")
end_time = page.evaluate("() => performance.now()")
print(f"Page load time: {end_time - start_time:.2f} ms")
# performance_analysis.analyze_load_times(page)
```

--------------------------------

### Configuration Discovery (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/iterative-debug-loop.md

Locates configuration files within the project, including JSON, environment files (.env*), and other configuration formats.

```bash
find . -name "*.json" -o -name "*.env*" -o -name "*.config.*" -not -path "*/node_modules/*" | head -20
```

--------------------------------

### Playwright Batch Screenshotting

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/src/prompt-templates/ui-debug-prompt.md

Details how to use Playwright's `batch_screenshot_urls` to efficiently capture screenshots for multiple URLs, useful for visual regression testing.

```python
# Example: Batch screenshotting a list of URLs
# urls_to_screenshot = ["https://example.com", "https://example.com/about"]
# batch_screenshot_urls(urls_to_screenshot, "screenshots/")
```

--------------------------------

### Playwright Visual Comparison

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/src/prompt-templates/ui-debug-prompt.md

Demonstrates using Playwright's `visual_comparison` functionality to compare the visual state of pages across different states or versions.

```python
# Example: Taking a screenshot for visual comparison
# visual_comparison.compare_screenshots(page, "initial_state.png", "final_state.png")
page.screenshot(path="homepage_screenshot.png")
```

--------------------------------

### Playwright Navigation and State Maintenance

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/src/prompt-templates/ui-debug-prompt.md

Demonstrates how to use Playwright to navigate web pages while maintaining browser state, crucial for debugging multi-page workflows.

```python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    # Use playwright_navigate to load pages and maintain browser state
    page.goto("https://example.com") 
    # ... further interactions and assertions ...
    browser.close()
```

--------------------------------

### Configure MCP AI Vision Debug UI Automation Runtime with Smithery CLI

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/docs/smithery-publishing.md

Runs the MCP AI Vision Debug UI Automation package with custom configuration options provided as a JSON string. This allows setting parameters like port and debug mode during execution.

```bash
npx @smithery/cli run mcp-ai-vision-debug-ui-automation --config '{"port":9090,"debug":true}' --key YOUR_SMITHERY_API_KEY
```

--------------------------------

### Batch Screenshot Capture for Multiple URLs

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Efficiently captures screenshots for a list of URLs in a single operation, useful for comparing different pages.

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

--------------------------------

### Capture Screenshot of Local File

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Takes a screenshot of a local HTML file specified by its file path.

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

--------------------------------

### Project Structure Analysis (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/iterative-debug-loop.md

Analyzes the project's directory structure to understand its organization. It excludes common development directories like node_modules, .git, dist, and coverage.

```bash
tree -I 'node_modules|.git|dist|build|coverage' | head -50
```

--------------------------------

### Structured Data for Non-Vision Models

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Shows the format of structured data that VUDA provides for AI models without vision capabilities. This includes details about interactive elements like tag name, text, bounds, and visibility.

```javascript
{
  "interactiveElements": [
    {
      "tagName": "button",
      "text": "Submit",
      "bounds": {"x": 120, "y": 240, "width": 100, "height": 40},
      "visible": true
    }
  ]
}
```

--------------------------------

### Manage Debugging Memory Context

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Provides utilities for saving, retrieving, listing, and clearing debugging context, environment variables, and findings using key-value storage.

```javascript
// Save debugging context
await mcp.callTool("debug_memory", {
  action: "save",
  key: "api_config",
  data: {
    baseUrl: "https://api.example.com",
    apiKey: "sk-123...",
    endpoints: ["/users", "/products"]
  }
});

// Retrieve saved context
const config = await mcp.callTool("debug_memory", {
  action: "retrieve",
  key: "api_config"
});

// List all saved items
const allItems = await mcp.callTool("debug_memory", {
  action: "list"
});

// Clear all saved data
await mcp.callTool("debug_memory", {
  action: "clear"
});
```

--------------------------------

### Run VUDA with Default Timeouts (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/TIMEOUT_CONFIGURATION.md

This command executes the VUDA agent using its default timeout configurations. No specific environment variables are set, relying on the pre-defined values within the application.

```bash
# Run with default timeout values
node build/index.js
```

--------------------------------

### Analyze Page Performance

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Measures and analyzes key page load performance metrics over multiple iterations.

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

--------------------------------

### VUDA: Visual Comparison Tool (JavaScript)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Leverages the 'visual_comparison' tool to compare two web pages or UI states for visual differences. It accepts two URLs and a threshold for detecting changes. The function returns a diff object.

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

--------------------------------

### Playwright DOM Structure Verification

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/src/prompt-templates/ui-debug-prompt.md

Shows how to use Playwright's `dom_inspector` (or similar methods) to verify the Document Object Model structure before performing interactions.

```python
# Example of checking DOM element existence before interaction:
if page.is_visible("button#submit-form"):
    # dom_inspector.verify_element_exists(page, "button#submit-form")
    page.click("button#submit-form")
else:
    print("Submit button not found or not visible.")
```

--------------------------------

### Validate Navigation Flow

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Tests a sequence of navigation steps on a website, including clicks and waits, with options to capture screenshots at each step for visual validation.

```javascript
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
});
```

--------------------------------

### Execute Autonomous Debugging Workflows

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Demonstrates how to combine multiple VUDA tools to create autonomous debugging workflows, such as visual regression testing.

```javascript
// 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 User Flow Validation with MCP

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Demonstrates how to validate user flows by calling different tools within the MCP. It covers login, core features, and API endpoint testing.

```javascript
const loginResult = await mcp.callTool("ui_workflow_validator", {...});
const featureResults = await mcp.callTool("navigation_flow_validator", {...});
const apiResults = await mcp.callTool("api_endpoint_tester", {...});
```

--------------------------------

### UI/UX Testing Scenarios (JavaScript)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/iterative-debug-loop.md

Defines a series of automated tests for UI/UX interactions, covering actions like clicking, filling forms, navigating links, and hovering over elements, along with expected validation criteria.

```javascript
const uiTests = [
  { action: "click", target: "all buttons", validate: "proper response" },
  { action: "fill", target: "all forms", validate: "submission works" },
  { action: "navigate", target: "all links", validate: "no 404s" },
  { action: "hover", target: "dropdowns", validate: "menus appear" }
];
```

--------------------------------

### Function and Class Mapping (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/iterative-debug-loop.md

Identifies function, class, and export declarations in JavaScript and TypeScript files to map the codebase's structure and components.

```bash
grep -r "function\|const.*=.*=>\|class\|export" --include="*.js" --include="*.ts" | head -30
```

--------------------------------

### Capture Screenshot of URL

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Captures a high-quality screenshot of a given URL, with options to capture the full page or specific elements. Supports specifying a device for the screenshot.

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

--------------------------------

### Test API Endpoints

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Verifies the responses of multiple API endpoints to ensure backend functionality. Supports authentication via Bearer tokens.

```javascript
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"
});
```

--------------------------------

### Playwright UI Workflow Validation

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/src/prompt-templates/ui-debug-prompt.md

Illustrates using Playwright's `ui_workflow_validator` to test end-to-end user journeys within a web application.

```python
# Assuming ui_workflow_validator is a custom or integrated Playwright function
# Example of a hypothetical workflow validation:
page.fill("#username", "testuser")
page.fill("#password", "password123")
page.click("#login-button")
# ui_workflow_validator(page, "successful_login_flow")
```

--------------------------------

### Endpoint and Route Discovery (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/iterative-debug-loop.md

Discovers API endpoints and routes defined in JavaScript and TypeScript files. It searches for common patterns used in frameworks like Express and NestJS.

```bash
grep -r "app\.get\|app\.post\|router\." --include="*.js" --include="*.ts" | head -20
```

```bash
grep -r "@Get\|@Post\|@Put\|@Delete" --include="*.ts" | head -20
```

--------------------------------

### Comprehensive Validation (JavaScript)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/iterative-debug-loop.md

Initiates a full application validation workflow, including executing defined test steps, capturing all screenshots, and ensuring a complete end-to-end test coverage.

```javascript
await ui_workflow_validator({
  startUrl: baseUrl,
  taskDescription: "Complete application validation",
  steps: comprehensiveTestSteps,
  captureScreenshots: "all"
});
```

--------------------------------

### Playwright Visible Text Validation

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/src/prompt-templates/ui-debug-prompt.md

Illustrates how to validate visible text content on a page using Playwright to ensure proper rendering and data display.

```python
# Example: Asserting that specific text is visible on the page
expected_text = "Welcome to our application!"
assert page.locator("h1").text_content() == expected_text
# Or checking for the presence of text anywhere on the page:
# assert page.content().find(expected_text) != -1
```

--------------------------------

### Playwright Console Log Monitoring

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/src/prompt-templates/ui-debug-prompt.md

Details the use of Playwright's `console_monitor` to continuously track and analyze console logs during testing.

```python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    
    page.on("console", lambda msg: print(f"CONSOLE: {msg.text}"))
    
    page.evaluate("console.log('This is a test log message.')")
    page.goto("https://example.com")
    # ... further interactions ...
    browser.close()
```

--------------------------------

### Configure VUDA for High-Latency Environments (Bash)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/TIMEOUT_CONFIGURATION.md

This configuration sets significantly longer timeouts for environments with high network latency or slow connections. It increases default, navigation, selector, and UI update waits to ensure stability during testing.

```bash
# Configuration for high-latency/slow networks
export VUDA_DEFAULT_TIMEOUT=60000
export VUDA_NAVIGATION_TIMEOUT=60000
export VUDA_SELECTOR_TIMEOUT=45000
export VUDA_STABILITY_WAIT=15000
export VUDA_UI_UPDATE_WAIT=5000

node build/index.js
```

--------------------------------

### VUDA: Enhanced Page Analyzer Tool (JavaScript)

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Utilizes the 'enhanced_page_analyzer' tool to perform comprehensive analysis of a web page. It can include console logs, map interactive elements, and capture the full page. The function returns an analysis object.

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

--------------------------------

### Monitor Console Logs

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Captures console logs from a web page during a specified duration, with options to filter logs by type (e.g., errors, warnings).

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

--------------------------------

### Inspect DOM Element

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/README.md

Provides detailed inspection of DOM elements, including their properties, children, and CSS styles.

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

--------------------------------

### Reload Active Tab in Chrome using AppleScript

Source: https://github.com/blacksiders/visual-ui-debug-agent-mcp/blob/main/prompts/visual-debugging.md

This AppleScript command reloads the active tab in the Google Chrome browser. It serves as a fallback mechanism for browser automation when primary methods like BrowserMCP are unavailable.

```applescript
osascript -e 'tell application "Chrome" to reload active tab'
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.