Browser Connect MCP

A Model Context Protocol (MCP) server that enables AI assistants to connect to browser DevTools and backend debuggers for comprehensive full-stack debugging. Works with any MCP-compatible tool including Claude Desktop, Claude Code, Cursor, Cline, Roo-Cline, and more!

What is this?

Browser Connect MCP gives AI assistants the ability to:

Frontend Debugging:

• 🚀 Launch Chrome with debugging enabled automatically
• 🔍 Read console logs and errors from your web pages
• 🌐 Monitor network requests and API calls
• 📊 Analyze performance issues
• 🔒 Scan for security vulnerabilities

Backend Debugging (NEW!):

• 📝 Stream and analyze backend logs in real-time
• 🐛 Attach to Node.js debuggers for breakpoint debugging
• 🐳 Monitor Docker container logs
• 📁 Parse structured and unstructured log files
• 🔍 Search and filter logs with pattern matching

AI-Powered Analysis:

• 🤖 Intelligent error correlation between frontend and backend
• 💡 Root cause analysis across the full stack
• 🎯 Performance bottleneck detection
• 🛡️ Security vulnerability scanning

All through natural conversation - no coding required!

Quick Start

1. Install via npx (Recommended - No Installation Required!)

Add to your AI assistant's MCP configuration. Here are examples for popular tools:

IMPORTANT: Due to how MCP clients handle spawning commands, you MUST use the following configuration format with npx as the command and the package name as an argument:

Claude Desktop (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json):

{
  "mcpServers": {
    "browser-connect": {
      "command": "npx",
      "args": ["-y", "browser-connect-mcp"],
      "env": {
        "LOG_LEVEL": "info"
      }
    }
  }
}

Note: The -y flag ensures npx runs without prompting. NPM will automatically use the latest version.

Cursor/Cline/Other MCP Tools: Check your tool's documentation for MCP server configuration location.

2. Restart Your AI Assistant

After saving the configuration, restart your AI assistant application to load the browser debugging capabilities.

3. Start Debugging!

Just talk to your AI assistant naturally:

You: "Help me debug my website at localhost:3000"

AI: I'll help you debug your website. Let me launch Chrome with debugging enabled 
and connect to it.

[AI launches Chrome and connects automatically]

Now I'm connected to your browser. I can see the console messages and network traffic. 
What specific issues are you experiencing?

You: "The page is loading slowly"

AI: Let me analyze the performance of your page...

[AI automatically runs performance analysis]

I found several performance issues:
1. Large uncompressed images (3.2MB total)
2. Render-blocking JavaScript in the header
3. Multiple API calls that could be batched

Would you like me to investigate any of these issues in detail?

Compatible AI Assistants

This MCP server works with any tool that supports the Model Context Protocol:

• Claude Desktop - Anthropic's official desktop app
• Claude Code - Anthropic's CLI for developers
• Cursor - AI-powered code editor
• Cline - Command-line AI assistant
• Roo-Cline - Enhanced version of Cline
• Any MCP-compatible IDE or platform

What Can You Ask Your AI Assistant?

Debugging Requests

• "Launch Chrome and help me debug my website"
• "Debug my app running on localhost:3000" - Automatically launches

... View full README on GitHub