UI Debugger MCP

A Model Context Protocol (MCP) server that provides debugging capabilities for UI applications. This tool gives coding agents access to UI debugging features like capturing screenshots and collecting console logs and network requests from web applications.

Features

• UI Screenshot Capture: Get base64-encoded screenshots of UI applications
• Console Logs Collection: Retrieve console logs, errors, and network requests from web pages
• Multiple Transport Options: Supports both stdio and HTTP transport modes
• YAML/JSON Output: Configurable output format for integration with different tools

Installation

npm install ui-debugger-mcp

Or run directly with npx:

npx ui-debugger-mcp

Usage

As a Standalone Server

Start the MCP server in stdio mode:

npm run dev

Or start the HTTP server:

NODE_ENV=http npm run dev

Development

npm run dev

Build

npm run build

MCP Tools

This server provides the following MCP tools:

get_ui_base64

Captures a screenshot of a UI application and returns it as a base64-encoded image.

Parameters:

• appUrl (string): The URL of the UI application to capture

Example:

{
  "appUrl": "https://example.com/app"
}

get_ui_logs

Collects console logs, errors, and network requests from a UI application.

Parameters:

• appUrl (string): The URL of the UI application to analyze

Returns:

• consoleLogs: Array of console log messages
• errors: Array of JavaScript errors
• networkRequests: Array of network request details

Example:

{
  "appUrl": "https://example.com/app"
}

Configuration

The server can be configured with different output formats:

• YAML (default): Human-readable YAML format
• JSON: Structured JSON format

Requirements

• Node.js >= 18.0.0
• Modern web browsers support via Playwright

Architecture

This MCP server is built with:

• TypeScript: Type-safe development
• Express: HTTP server for web transport
• Playwright: Browser automation for UI interaction
• MCP SDK: Model Context Protocol implementation
• ESLint + Prettier: Code quality and formatting

License

MIT

Report

If you encounter bugs or have feature requests, open an issue. Feel free to start a discussion — whether it’s feedback, a question, or an idea!

Support