devtools-bridge-mcp

🌉 DevTools Bridge MCP

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

---

✨ 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:

1. 🔧 Install the extension
2. 🌐 Open any website with console errors
3. 🤖 Watch AI analyze issues in real-time
4. 💡 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

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

4. Start Debugging!

1. Open DevTools: Press F12 or Ctrl+Shift+I
2. Find DevTools Bridge Tab: Look for the 🌉 tab in DevTools
3. Enable Data Collection: Toggle the collection switch
4. Trigger Errors: Navigate to any website or reproduce bugs
5. 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

1. Check existing issues
2. Use our issue templates
3. Provide detailed reproduction steps
4. Include browser version and extension version

💻 Development Contributions

1. Fork the repository
2. Create feature branch

   git checkout -b feature/amazing-feature
   

3. Make your changes
   • Follow our coding standards
   • Add tests for new functionality
   • Update documentation as needed
4. Commit using Conventional Commits

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

5. 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

---

📞 Support & Community

🆘 Getting Help

• 📖 Documentation: docs/ - Comprehensive guides and tutorials
• ❓ Discussions: GitHub Discussions - Community Q&A
• 🐛 Bug Reports: GitHub Issues - Report bugs and request features
• 📧 Email: support@devtools-bridge.com - Direct support

🌟 Stay Updated

• ⭐ Star this repo to show support and stay notified
• 👀 Watch releases for new version notifications
• 🐦 Follow on Twitter: @DevToolsBridge - Latest updates and tips

---