BrowserTools MCP Server is a browser instrumentation platform that connects Google Chrome to AI coding assistants through the Model Context Protocol. It consists of a Chrome extension, local middleware server, and MCP server integration that together enable real-time browser monitoring within development environments. Key capabilities of BrowserTools MCP Server: - Live capture of browser console logs and network activity viewable directly in IDEs like Cursor - Integrated Lighthouse analysis for SEO, performance, accessibility, and best practice auditing - Automated screenshot generation with direct pasting into agent conversations - Structured debugging and audit workflows that execute comprehensive browser analysis sequences - Specialized NextJS optimization tools and prompts for framework-specific improvements

THIS PROJECT IS NO LONGER ACTIVE PLEASE USE A DIFFERENT SOLUTION FOR THIS.

BrowserTools MCP

> Make your AI tools 10x more aware and capable of interacting with your browser

This application is a powerful browser monitoring and interaction tool that enables AI-powered applications via Anthropic's Model Context Protocol (MCP) to capture and analyze browser data through a Chrome extension.

Read our docs for the full installation, quickstart and contribution guides.

Roadmap

Check out our project roadmap here: Github Roadmap / Project Board

Updates

v1.2.0 is out! Here's a quick breakdown of the update:

Quickstart Guide

There are three components to run this MCP tool:

1. Install our chrome extension from here: v1.2.0 BrowserToolsMCP Chrome Extension 2. Install the MCP server from this command within your IDE: npx @agentdeskai/browser-tools-mcp@latest 3. Open a new terminal and run this command: npx @agentdeskai/browser-tools-server@latest

IMPORTANT TIP - there are two servers you need to install. There's...

npx @agentdeskai/browser-tools-mcp@latest is what you put into your IDE npx @agentdeskai/browser-tools-server@latest is what you run in a new terminal window

After those three steps, open up your chrome dev tools and then the BrowserToolsMCP panel.

If you're still having issues try these steps:

After that, it should work but if it doesn't let me know and I can share some more steps to gather logs/info about the issue!

If you have any questions or issues, feel free to open an issue ticket! And if you have any ideas to make this better, feel free to reach out or open an issue ticket with an enhancement tag or reach out to me at @tedx_ai on x

Full Update Notes:

Coding agents like Cursor can run these audits against the current page seamlessly. By leveraging Puppeteer and the Lighthouse npm library, BrowserTools MCP can now:

...all without leaving your IDE 🎉

---

🔑 Key Additions

| Audit Type | Description | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | | Accessibility | WCAG-compliant checks for color contrast, missing alt text, keyboard navigation traps, ARIA attributes, and more. | | Performance | Lighthouse-driven analysis of render-blocking resources, excessive DOM size, unoptimized images, and other factors affecting page speed. | | SEO | Evaluates on-page SEO factors (like metadata, headings, and link structure) and suggests improvements for better search visibility. | | Best Practices | Checks for general best practices in web development. | | NextJS Audit | Injects a prompt used to perform a NextJS audit. | | **Audit