npm package: @onlyvisioncode/browser-mcp
Description: MCP server for browser automation using Browser MCP
Author: Browser MCP
Latest version: 0.1.1

# 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**
   ```bash
   pnpm build
   ```
   
   Or for continuous development with watch mode:
   ```bash
   pnpm watch
   ```
   
   This will generate the compiled output in `dist/index.js`

2. **Start the inspector**
   ```bash
   pnpm inspector
   ```

3. **Access the inspector UI**
   
   Navigate to [http://localhost:9001?proxyPort=9002](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

```typescript
// 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
```bash
# 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.