browser-tools-mcp

# 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](https://browsertools.agentdesk.ai/) for the full installation, quickstart and contribution guides. ## Roadmap Check out our project roadmap here: [Github Roadmap / Project Board](https://github.com/orgs/AgentDeskAI/projects/1/views/1) ## Updates v1.2.0 is out! Here's a quick breakdown of the update: - You can now enable "Allow Auto-Paste into Cursor" within the DevTools panel. Screenshots will be automatically pasted into Cursor (just make sure to focus/click into the Agent input field in Cursor, otherwise it won't work!) - Integrated a suite of SEO, performance, accessibility, and best practice analysis tools via Lighthouse - Implemented a NextJS specific prompt used to improve SEO for a NextJS application - Added Debugger Mode as a tool which executes all debugging tools in a particular sequence, along with a prompt to improve reasoning - Added Audit Mode as a tool to execute all auditing tools in a particular sequence - Resolved Windows connectivity issues - Improved networking between BrowserTools server, extension and MCP server with host/port auto-discovery, auto-reconnect, and graceful shutdown mechanisms - Added ability to more easily exit out of the Browser Tools server with Ctrl+C ## Quickstart Guide There are three components to run this MCP tool: 1. Install our chrome extension from here: [v1.2.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip) 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` * Different IDEs have different configs but this command is generally a good starting point; please reference your IDEs docs for the proper config setup IMPORTANT TIP - there are two servers you need to install. There's... - browser-tools-server (local nodejs server that's a middleware for gathering logs) and - browser-tools-mcp (MCP server that you install into your IDE that communicates w/ the extension + browser-tools-server) `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: - Quit / close down your browser. Not just the window but all of Chrome itself. - Restart the local node server (browser-tools-server) - Make sure you only have ONE instance of chrome dev tools panel open 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](https://x.com/tedx_ai) ## 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: - Evaluate pages for WCAG compliance - Identify performance bottlenecks - Flag on-page SEO issues - Check adherence to web development best practices - Review NextJS specific issues with SEO ...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 Mode** | Runs all auditing tools in a sequence.