browser-tools-mcp

BrowserTools MCP is a sophisticated tool designed to enhance AI applications by enabling them to interact with and analyze browser data. It leverages Anthropic's Model Context Protocol (MCP) to provide a seamless integration with various AI clients. The tool includes a Chrome extension that captures screenshots, console logs, network activity, and DOM elements, which are then processed by a Node server acting as middleware. This setup allows for comprehensive audits and debugging of web pages, including accessibility, performance, SEO, and best practices checks. The tool is particularly useful for developers using MCP-compatible clients like Cursor, Cline, Zed, and Claude Desktop, providing them with the ability to run audits and capture browser data without leaving their development environment.

Features

• Comprehensive Audits: Perform accessibility, performance, SEO, and best practices audits using Lighthouse.
• Debugger Mode: Execute all debugging tools in a sequence to improve reasoning and problem-solving.
• NextJS Specific Tools: Includes prompts and tools specifically for auditing and improving NextJS applications.
• Improved Networking: Features host/port auto-discovery, auto-reconnect, and graceful shutdown mechanisms.
• Local Data Storage: All logs are stored locally, ensuring privacy and security of data.

MCP Tools

• {'Accessibility Audit': 'Ensures the page meets accessibility standards like WCAG.'}
• {'Performance Audit': 'Identifies performance bottlenecks and loading issues.'}
• {'SEO Audit': 'Evaluates how well the page is optimized for search engines.'}
• {'Best Practices Audit': 'Checks for general best practices in web development.'}
• {'NextJS Audit': 'Checks for best practices and SEO improvements for NextJS applications.'}

Usage with Different Platforms

mcp

npx @agentdeskai/browser-tools-mcp@1.2.0

node_server

npx @agentdeskai/browser-tools-server@1.2.0