Browser Tools MCP
Comprehensive browser automation and monitoring toolkit providing real-time web debugging, performance analysis, and automated testing through MCP integration.
Author: AgentDeskAI | GitHub Repo | 5456 Stars|408 Forks|MIT License|Updated Jun 29, 2025
Overview
Browser Tools MCP provides a comprehensive suite for browser automation and monitoring through Model Context Protocol integration. It enables real-time browser log monitoring, automated performance analysis, and seamless IDE integration for web development workflows. The server combines browser automation capabilities with detailed debugging tools for enhanced development productivity.
Features
- Real-Time Browser Monitoring - Monitor console logs, network requests, and errors directly from IDE
- Comprehensive Audit Suite - SEO, performance, accessibility analysis via Lighthouse integration
- Chrome Extension Integration - Browser extension for seamless data collection and auto-paste functionality
- WCAG Compliance Checking - Automated accessibility testing and compliance reporting
- Cursor Integration - Primarily designed for Cursor with auto-paste functionality
- Automated Testing - Puppeteer-based automation for end-to-end testing scenarios
Installation
Prerequisites
- Node.js 14 or higher
- Chrome browser for extension functionality
- MCP-compatible IDE (Cursor recommended, VS Code, Claude Desktop)
Chrome Extension Setup
- Download the extension ZIP from: https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip
- Extract the ZIP file
- Open Chrome → Extensions → Enable "Developer mode"
- Click "Load unpacked" and select the extracted extension folder
- Enable the extension for browser automation features
MCP Server Setup
# Install and run MCP server (Terminal 1)
npx @agentdeskai/browser-tools-mcp@1.2.0
# Start local server (Terminal 2)
npx @agentdeskai/browser-tools-server@1.2.0
Claude Desktop Configuration
{
"mcpServers": {
"browser-tools": {
"command": "npx",
"args": ["@agentdeskai/browser-tools-mcp@1.2.0"]
}
}
}
Important Notes
- Keep both servers running simultaneously
- Ensure only one Chrome DevTools panel is open
- Restart Chrome if connectivity issues occur
Usage
Development Workflow
# Example MCP interactions through AI:
# "Monitor console errors on the current page"
# "Run a Lighthouse audit for performance analysis"
# "Check accessibility compliance for form elements"
# "Capture network requests for the login flow"
The server provides seamless integration between browser debugging and AI-assisted development. You can monitor real-time browser activity, automate testing procedures, and analyze web performance - all through natural language interactions with your AI coding assistant.
Advanced Features
- Auto-Paste Integration: Browser extension automatically pastes captured data into Cursor
- Performance Monitoring: Real-time metrics collection and analysis
- Error Tracking: Comprehensive JavaScript error monitoring and reporting
- Accessibility Auditing: WCAG 2.1 compliance checking with detailed reports
Browser Tools MCP is developed by AgentDeskAI and is open-source. For technical support, feature requests, and community discussions, please refer to the official GitHub repository.