OpenViSTAI · Agents · Blockchain · Crypto
Menu
MCP & Tooling

Visual UI Debug Agent

Visual UI Debug Agent is an open-source Model Context Protocol server implemented with Playwright that lets an MCP-compatible AI client inspect and test web interfaces through browser automation and diagnostics. It runs locally over standard input/output and can use a local browser, Browserbase, Anchor Browser or an existing CDP endpoint. Its toolset covers screenshots, DOM and computed-style inspection, interactive-

Independent OpenViST project profile, based on linked sources.

Visual UI Debug Agent — OpenViST project profile in MCP & Tooling.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use it when an MCP-compatible AI client needs direct browser-based evidence for UI inspection, workflow checks, console diagnostics, API checks or visual comparison. Choose the local browser for a self-contained setup, a named provider for a remote browser runtime, or CDP when an existing browser session is the target.

Who it is for

  • Developers investigating web-interface behavior and layout issues.
  • QA and testing teams validating browser workflows and rendered states.
  • Teams using MCP-compatible AI clients that want browser diagnostics through tool calls.

Documented uses

  • Capture screenshots of URLs, local HTML files, elements or multiple pages.
  • Inspect rendered DOM, computed styles and interactive elements.
  • Validate navigation sequences and multi-step user journeys while preserving browser state.
  • Capture console messages and analyze page performance.
  • Exercise API endpoints and inspect pages discovered from a sitemap.
Before you choose

Requirements & limits

The repository and npm package are publicly identified, and the project is licensed under ISC. Local mode does not require a provider account; Browserbase and Anchor Browser configurations use provider credentials. The documented deployment options include npx, Docker and a local MCP server.

  • MCP compatibility is required because the project exposes its capabilities through an MCP server.
  • Local mode requires a Chromium-compatible browser, with Playwright installation documented when one is unavailable.
  • Browser selection affects configuration: local, Browserbase, Anchor Browser and existing CDP each use different environment variables or state inputs.
  • Authenticated website testing may require cookies, storage state, a provider profile or an existing browser context.
  • The server supports standard-input/output transport, including a Docker configuration.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Connect Visual UI Debug Agent to an MCP client in local mode

Set up the local MCP server with a Chromium-compatible browser and add it to an MCP client.

Before you start

  • Node.js 20 or newer.
  • An MCP-compatible AI client.
  • A Chromium-compatible browser, or permission to install Chromium with Playwright.
  • The npm package visual-ui-debug-agent-mcp.

Steps

  1. Run npx -y visual-ui-debug-agent-mcp.

  2. If a compatible browser is unavailable, run npx playwright install chromium.

  3. Add the server to the MCP client configuration with command npx and arguments -y and visual-ui-debug-agent-mcp.

  4. Restart the MCP client after changing its configuration.

Expected outcome

The MCP client can connect to the locally running server and use its browser inspection and testing tools.

Guide limitations

  • This recipe covers local server and client setup, not a complete test execution or result verification.
  • Authenticated browser state may require a storage-state file, cookie JSON or cookie file.
  • The server writes protocol messages to stdout and diagnostics to a temporary log file.
Source-based practical guide

Configure a remote or existing browser backend

Select Browserbase, Anchor Browser or an existing CDP browser as the browser runtime.

Before you start

  • An MCP client configured to run Visual UI Debug Agent.
  • For Browserbase, VUDA_BROWSER_PROVIDER=browserbase and BROWSERBASE_API_KEY.
  • For Anchor Browser, VUDA_BROWSER_PROVIDER=anchor and ANCHOR_API_KEY.
  • For an existing browser, VUDA_BROWSER_PROVIDER=cdp and VUDA_CDP_URL.
  • Optional authenticated state through a Browserbase context, Anchor profile, injected cookies or the existing browser context.

Steps

  1. Set the browser provider environment variable to browserbase, anchor or cdp.

  2. Add the corresponding provider credential or CDP URL configuration.

  3. For authenticated sessions, reuse the documented context or profile, inject cookies, or use the existing browser context.

  4. Start the MCP server through the client configuration.

Expected outcome

The server is configured to direct its Playwright tools to the selected remote or existing browser runtime.

Guide limitations

  • The evidence does not specify authentication or endpoint configuration details beyond the named variables and state options.
  • The availability or pricing of Browserbase and Anchor Browser is not established here.
  • This recipe documents configuration, not successful connection or test execution.
Evidence and transparency

Sources & review

Source record details
Source availability
Active
Sources checked
4 October 2026
Original website title
samihalawa/visual-ui-debug-agent-mcp · Official homepage title · retained in its source language

Related options

Browserbase — A supported remote browser backend that Visual UI Debug Agent can use instead of a local browser.

Explore project →

Anchor Browser — A supported remote browser backend that Visual UI Debug Agent can use instead of a local browser.

Existing CDP browser — A supported browser connection mode for inspecting and testing an already available browser context.