devtools-bridge-mcp

AI-powered debugging assistant with real-time DevTools integration

GitHub

GitHub Stars

User Rating

Not Rated

Forks

Issues

Views

Favorites

README

🌉 DevTools Bridge MCP

Bridge Chrome DevTools with AI assistants for real-time debugging intelligence

🚀 Install Extension • 📖 Documentation • 🎥 Demo Video • 🐛 Report Issues

✨ What is DevTools Bridge MCP?

DevTools Bridge MCP revolutionizes web debugging by creating a real-time bridge between Chrome DevTools and AI assistants. Instead of manually copying errors and switching between tools, get instant AI-powered analysis of console errors, network issues, and performance bottlenecks—all within your familiar DevTools environment.

🔥 The Problem We Solve

Traditional debugging wastes 2+ hours per day on context switching:

1. 🐛 Error occurs in browser
2. 📋 Copy error message manually  
3. 🔄 Switch to AI chat interface
4. ⌨️  Paste and explain context
5. 🤔 Wait for response
6. 🔄 Switch back to DevTools
7. 🔧 Try suggested solution
8. 🔁 Repeat if unsuccessful

DevTools Bridge MCP eliminates context switching:

1. 🐛 Error occurs in browser
2. 🤖 AI analyzes automatically with full context
3. 💡 Instant solution appears in DevTools
4. 🔧 Apply fix immediately

🥊 Why Choose DevTools Bridge MCP?

Advantage	DevTools Bridge MCP	GitHub Copilot Chat	Cursor/Codeium
Context-Native	✅ Browser DOM, console, network	❌ VS Code only	❌ IDE dependent
Real-time Debugging	✅ Live error capture	❌ Manual copy-paste	❌ Static analysis
Privacy-First	✅ 3-level filtering + on-premises	⚠️ Cloud dependent	⚠️ Data upload
Multi-AI Support	✅ Claude, GPT, Gemini, Local	❌ GPT only	❌ Proprietary models
No IDE Lock-in	✅ Universal browser tool	❌ VS Code required	❌ IDE specific

🎯 Key Features

🤖 Multi-AI Support

Claude (Anthropic): Advanced reasoning for complex debugging
OpenAI GPT-4: Comprehensive code analysis and suggestions
Google Gemini: Fast responses for quick fixes
Local LLM: Privacy-focused, on-premises deployment

⚡ Real-time Analysis

Console Errors: Automatic error capture and AI analysis
Network Issues: API debugging with intelligent suggestions
Performance Bottlenecks: AI-powered optimization recommendations
DOM Mutations: Track and analyze dynamic content changes

🔒 Privacy-First Design

3-Level Privacy Control: Basic → Strict → Paranoid
Data Filtering: Automatic removal of sensitive information
Self-Hosted Option: Deploy your own MCP server
Zero Data Retention: No persistent storage of debugging data

🏢 Enterprise Ready

Audit Logging: Complete debugging session history
Cost Tracking: Monitor AI API usage and costs
Team Settings: Centralized configuration management
SSO Integration: Enterprise authentication support

💰 Pricing & Plans

Choose Your Debugging Intelligence Level

Feature	Free	Starter	Growth	Enterprise
Monthly Price	$0	$15/user	$29/user	Custom
Seats	1 user	Unlimited	Unlimited	Unlimited
AI Queries	25/month hosted	200/month hosted	1,000/month + overage	Unlimited
BYOK Support	✅ Unlimited	✅ Unlimited	✅ Unlimited	✅ Unlimited
Team Features	❌	✅ Basic	✅ Advanced	✅ Enterprise
Support	Community	Email	Priority	Dedicated AM
Security	Basic	Standard	Advanced	Enterprise
SLA	None	None	99.5%	99.9%

🎯 Perfect For

Free: Individual developers, open-source contributors, students
Starter: Freelancers, small teams, personal projects
Growth: Growing teams, scale-ups, commercial projects
Enterprise: Large organizations, security-conscious teams

🔄 Usage-Based Growth

Smart Upgrade Triggers: 75% quota alerts, contextual upgrade prompts
14-Day Growth Trial: Experience advanced features risk-free
Overage Billing: $4 per extra 100 queries (Growth tier)
Annual Discounts: Save 20% with annual billing
No Lock-in: Cancel anytime, export your data

💡 Value Proposition

"Your debugger now thinks with you—without moving to a cloud IDE."

Transform the traditional debugging workflow:

❌ Before: Copy error → Switch tools → Wait for analysis → Switch back
✅ After: Error occurs → AI analyzes instantly → Solution appears in DevTools

🚀 Start Free Trial • 💼 Enterprise Demo • 🎯 14-Day Growth Trial

🎥 Demo

Coming Soon: Watch DevTools Bridge MCP in action

[Demo video will be embedded here once production is complete]

Quick Preview:

🔧 Install the extension
🌐 Open any website with console errors
🤖 Watch AI analyze issues in real-time
💡 Get instant, actionable solutions

🚀 Quick Start

1. Install Extension

Option A: Chrome Web Store (Recommended)

1. Visit Chrome Web Store
2. Search "DevTools Bridge MCP"  
3. Click "Add to Chrome"
4. Pin extension to toolbar

Option B: Developer Mode

# Clone repository
git clone https://github.com/daideguchi/devtools-bridge-mcp.git
cd devtools-bridge-mcp

# Install dependencies
npm install

# Build extension
npm run build:extension

# Load in Chrome
1. Open chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select dist/extension/ folder

2. Start MCP Server

# Install server dependencies
npm install

# Start the MCP server
npm run dev:server

# Server will start on http://localhost:3001

3. Configure AI Provider

Open Extension Settings: Click the DevTools Bridge icon in your Chrome toolbar
Choose AI Provider: Select Claude, OpenAI, Gemini, or Local LLM
Add API Key: Enter your API key for the chosen provider
Test Connection: Verify the connection is working

4. Start Debugging!

Open DevTools: Press F12 or Ctrl+Shift+I
Find DevTools Bridge Tab: Look for the 🌉 tab in DevTools
Enable Data Collection: Toggle the collection switch
Trigger Errors: Navigate to any website or reproduce bugs
Watch AI Analysis: See real-time insights appear automatically

🏗️ Architecture

DevTools Bridge MCP uses a 4-layer architecture for maximum flexibility and performance:

┌─────────────────────────────────────────────────────────────┐
│                    🎨 UI Layer                              │
│  DevTools Panel • Popup Interface • Options Page           │
└─────────────────────────────────────────────────────────────┘
                                │
┌─────────────────────────────────────────────────────────────┐
│                  🔄 Communication Layer                     │
│     WebSocket • Chrome Extension API • Message Router      │
└─────────────────────────────────────────────────────────────┘
                                │
┌─────────────────────────────────────────────────────────────┐
│                  🧠 Intelligence Layer                      │
│   AI Router • Multi-Provider Support • Context Manager     │
└─────────────────────────────────────────────────────────────┘
                                │
┌─────────────────────────────────────────────────────────────┐
│                   📊 Data Layer                             │
│    Privacy Filter • Data Processor • Audit Logger          │
└─────────────────────────────────────────────────────────────┘

Key Components

🔧 Content Script: Captures debugging data from web pages
🚀 Background Worker: Manages WebSocket connections and routing
🎛️ DevTools Panel: Main debugging interface with 6 specialized tabs
🌐 MCP Server: Node.js server handling AI communications
🤖 AI Router: Intelligent routing between multiple AI providers

📊 Supported Data Types

Data Type	Auto-Capture	AI Analysis	Privacy Filtering
🔴 Console Errors	✅	✅	✅
⚠️ Console Warnings	✅	✅	✅
🌐 Network Requests	✅	✅	✅
📊 Performance Metrics	✅	✅	✅
🏗️ DOM Mutations	✅	✅	✅
💥 Unhandled Rejections	✅	✅	✅
🎯 Custom Events	✅	✅	✅

⚙️ Configuration

Environment Variables

# Server Configuration
MCP_SERVER_PORT=3001
MCP_SERVER_HOST=localhost

# AI Provider Keys
ANTHROPIC_API_KEY=your_claude_key_here
OPENAI_API_KEY=your_openai_key_here  
GOOGLE_AI_API_KEY=your_gemini_key_here

# Privacy & Security
PRIVACY_LEVEL=basic  # basic, strict, paranoid
DATA_RETENTION_DAYS=0  # 0 = no retention
AUDIT_LOGGING=true

Extension Settings

Access via the DevTools Bridge icon in Chrome toolbar:

🤖 AI Configuration: Choose provider, set API keys, configure models
🔒 Privacy & Data: Set filtering level, configure data collection
💰 Cost Tracking: Monitor API usage and set budget alerts
⚙️ Advanced Settings: Custom endpoints, timeout settings, debug mode

🛠️ Development

Prerequisites

Node.js: 18+
Chrome: 88+ (for Manifest V3 support)
TypeScript: 5.0+
React: 18+

Setup Development Environment

# Clone and install
git clone https://github.com/daideguchi/devtools-bridge-mcp.git
cd devtools-bridge-mcp
npm install

# Start development servers
npm run dev  # Starts both extension and server in watch mode

# Or run separately
npm run dev:extension  # Extension build + watch
npm run dev:server     # MCP server + nodemon

Project Structure

devtools-bridge-mcp/
├── 📁 src/
│   ├── 📁 extension/          # Chrome extension code
│   │   ├── 📁 background/     # Service worker & WebSocket management
│   │   ├── 📁 content/        # Web page data collection
│   │   ├── 📁 devtools/       # DevTools integration
│   │   ├── 📁 panel/          # Main DevTools panel UI
│   │   ├── 📁 popup/          # Extension popup interface
│   │   └── 📁 options/        # Settings & configuration
│   ├── 📁 server/             # MCP server implementation
│   │   ├── 📁 ai/             # AI provider integrations
│   │   ├── 📁 core/           # WebSocket & MCP handling
│   │   ├── 📁 privacy/        # Data filtering & security
│   │   └── 📁 enterprise/     # Audit logging & cost tracking
│   └── 📁 web/               # Optional web interface
├── 📁 docs/                  # Documentation
├── 📁 scripts/               # Build & deployment scripts
└── 📄 manifest.json          # Chrome extension manifest

Building for Production

# Build extension for distribution
npm run build:extension

# Build MCP server
npm run build:server  

# Create distributable package
npm run package

# The extension will be packaged as devtools-bridge-mcp.zip

🔐 Privacy & Security

DevTools Bridge MCP is designed with privacy-first principles:

🛡️ Data Protection

Local Processing: Most analysis happens locally
Selective Transmission: Only necessary data sent to AI providers
Automatic Filtering: Removes URLs, tokens, keys, and sensitive patterns
No Persistence: Zero local data storage by default

🔒 Privacy Levels

Basic Mode

Filters obvious secrets (API keys, passwords)
Removes query parameters from URLs
Safe for most development work

Strict Mode

Aggressive URL sanitization
Removes stack traces with file paths
Filters all request headers
Recommended for sensitive projects

Paranoid Mode

Maximum privacy protection
Local-only analysis when possible
Minimal data transmission
Enterprise-grade security

🏢 Enterprise Security

Audit Trails: Complete logging of all debugging sessions
Access Controls: Role-based permissions and API key management
Self-Hosted Deployment: Keep all data within your infrastructure
Compliance: GDPR, SOC 2, and enterprise security standards

🤝 Contributing

We welcome contributions from the community! Here's how to get involved:

🐛 Reporting Issues

Check existing issues
Use our issue templates
Provide detailed reproduction steps
Include browser version and extension version

💻 Development Contributions

Fork the repository

Create feature branch

git checkout -b feature/amazing-feature

Make your changes
- Follow our coding standards
- Add tests for new functionality
- Update documentation as needed

Commit using Conventional Commits

git commit -m "feat: add amazing new feature"

Push and create Pull Request

git push origin feature/amazing-feature

📋 Development Guidelines

Code Style: TypeScript with ESLint + Prettier
Testing: Jest for unit tests, Playwright for E2E
Documentation: Update README and docs/ for any changes
Backwards Compatibility: Maintain API compatibility when possible

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Third-Party Licenses

Chrome DevTools Protocol: BSD License
Model Context Protocol: MIT License
React: MIT License
TypeScript: Apache License 2.0

🙏 Acknowledgments

Special thanks to:

🏢 Anthropic: For Claude AI and inspiration for developer tools
🏢 OpenAI: For GPT models and API accessibility
🏢 Google: For Gemini AI and Chrome DevTools Protocol
🌟 Community: All beta testers and early adopters
🔧 Dependencies: All the amazing open-source libraries that make this possible