Browser MCP

A Model Context Protocol (MCP) server implementation for browser interactions with advanced DevTools integration.

Features

Core Browser Automation

• Navigation: Navigate, go back, go forward
• Element Interaction: Click, hover, type, drag & drop
• Screenshots: Capture page screenshots
• Page Analysis: Accessibility tree snapshots
• Keyboard Input: Key press simulation
• Form Handling: Dropdown selection, text input with submit

Advanced DevTools Integration

Console Monitoring

• browser_get_console_logs - Get all console output (log, warn, info)
• browser_get_console_errors - Get console errors and exceptions specifically

Network Analysis

• browser_get_network_logs - Monitor all network requests and responses
• browser_get_network_errors - Get failed network requests and errors

Performance & Auditing

• browser_run_performance_audit - Run comprehensive performance analysis
• browser_run_seo_audit - SEO optimization recommendations
• browser_run_best_practices_audit - Web development best practices check
• browser_run_nextjs_audit - Next.js specific optimizations
• browser_run_audit_mode - Complete audit for SEO, accessibility, and performance

Debugging Tools

• browser_run_debugger_mode - Advanced debugging with error detection
• browser_get_selected_element - Get DevTools selected element information
• browser_wipe_logs - Clear all browser logs from memory
• browser_take_screenshot - Enhanced screenshot capture

MCP Server Inspector

The MCP Server Inspector provides a development interface for testing and debugging the MCP server.

Configuration

• Client UI: Runs on port 9001 (the default port 5173 conflicts with the extension's Vite development server)
• MCP Proxy Server: Runs on port 9002 (the default port 3000 conflicts with the marketing application)

Getting Started

1. Build the server

   pnpm build

   Or for continuous development with watch mode:

   pnpm watch

   This will generate the compiled output in dist/index.js

2. Start the inspector

   pnpm inspector

3. Access the inspector UI

   Navigate to http://localhost:9001?proxyPort=9002

4. Connect to the MCP server

   Click the Connect button in the UI to execute dist/index.js and establish connection with the MCP server

Chrome Extension Integration

This MCP server works seamlessly with the AI Chrome Browser MCP extension for enhanced browser automation:

Prerequisites

1. Install the Chrome extension from the chrome-plugin directory
2. Enable Developer mode in Chrome extensions
3. Load the extension as unpacked

DevTools Features

The Chrome extension provides advanced DevTools integration:

• Console Monitoring: Real-time console log capture
• Network Traffic: Request/response monitoring with headers and body
• Performance Metrics: Core Web Vitals and loading performance
• Element Selection: DevTools element inspector integration
• Error Detection: JavaScript and network error monitoring

Usage Example

// Basic browser automation
await mcpClient.call("browser_navigate", { url: "https://example.com" });
await mcpClient.call("browser_screenshot", {});

// Advanced DevTools features
await mcpClient.call("browser_get_console_errors", {});
await mcpClient.call("browser_run_performance_audit", {});
await mcpClient.call("browser_get_network_logs", {});

Available MCP Tools

| Tool | Description | Chrome Extension Required | |------|-------------|---------------------------| | browser_navigate | Navigate to URL | No | | browser_go_back | Browser back | No | | browser_go_forward | Browser forward | No | | browser_click | Click element | No | | browser_hover | Hover element | No | | browser_type | Type text | No | | browser_select_option | Select dropdown | No | | browser_screenshot | Take screenshot | No | | browser_snapshot | Page accessibility tree | No | | browser_wait | Wait specified time | No | | browser_press_key | Press keyboard key | No | | browser_get_console_logs | Get console output | Yes | | browser_get_console_errors | Get console errors | Yes | | browser_get_network_logs | Get network requests | Yes | | browser_get_network_errors | Get network errors | Yes | | browser_run_performance_audit | Performance analysis | Yes | | browser_run_seo_audit | SEO analysis | Yes | | browser_run_nextjs_audit | Next.js analysis | Yes | | browser_run_debugger_mode | Debug mode | Yes | | browser_run_audit_mode | Full audit | Yes | | browser_run_best_practices_audit | Best practices | Yes | | browser_get_selected_element | DevTools selection | Yes | | browser_wipe_logs | Clear logs | Yes | | browser_take_screenshot | Enhanced screenshot | Yes |

Development

Build Commands

# Build the project
pnpm build

# Watch mode for development
pnpm watch

# Run MCP inspector
pnpm inspector

TypeScript Support

The project is fully typed with TypeScript, providing excellent IDE support and type safety for all browser automation tools.

Architecture

The MCP server communicates with the Chrome extension via WebSocket on port 9009. The extension handles:

• Chrome DevTools Protocol integration
• Page instrumentation and monitoring
• Network traffic interception
• Performance metrics collection
• Console log aggregation

This architecture provides a powerful combination of MCP's standardized tool interface with Chrome's native browser automation capabilities.