Browsertools

🚀 Browser Tools MCP

Enhance the capabilities of your AI tools by 10x and enable them to interact with the browser more intelligently.

This is a powerful browser monitoring and interaction tool. Through Anthropic's Model Context Protocol (MCP), it allows AI-driven applications to capture and analyze browser data via a Chrome extension.

Please refer to our documentation for comprehensive installation, quick-start, and contribution guides.

✨ Features

• Empower AI tools to interact with browsers more intelligently.
• Capture and analyze browser data through the Chrome extension.
• Provide a standardized protocol for AI applications to interact with browsers.

📦 Installation

Please refer to our documentation for detailed installation instructions.

Update Log

Version v1.1.0 has been released! This version fixes multiple bugs related to logging and screenshots.

Please ensure you update the version number in your IDE or MCP client as follows: npx @agentdeskai/browser-tools-mcp@1.1.0

Also, please download the latest version of the Chrome extension v1.1.0 BrowserToolsMCP

From there, you can run the local Node server as usual: npx @agentdeskai/browser-tools-server

After opening Chrome DevTools, the logs should be sent to your server!

If you have any questions or encounter difficulties, please feel free to submit an issue report! If you have any suggestions for improvement, feel free to contact me or submit them in issues tagged with "enhancement", or reach out via @tedx_ai on x.

🔧 Technical Details

There are three core components for capturing and analyzing browser data:

1. Chrome Extension: A browser extension that captures screenshots, console logs, network activities, and DOM elements.
2. Node Server: An intermediate server that facilitates communication between the Chrome extension and any MCP server instance.
3. MCP Server: A server implementing the Model Context Protocol, providing standardized tools for AI clients to interact with the browser.

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP Client │ ──► │  MCP Server   │ ──► │  Node Middleware │ ──► │   Chrome    │
│  (e.g.,     │ ◄── │  Protocol Handler │ ◄── │               │ ◄── │  Extension  │
│   Cursor)    │     │               │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

The Model Context Protocol (MCP) is a feature supported by Anthropic AI models, allowing you to create custom tools for any compatible client. MCP clients such as Claude Desktop, Cursor, Cline, or Zed can run an MCP server, which "teaches" these clients to use new tools.

These tools can call external APIs, but in our case, all logs are stored locally on your device and are never sent to any third-party services or APIs. The Browser Tools MCP runs a local NodeJS API server that communicates with the BrowserTools Chrome extension.

All consumers using the Browser Tools MCP server interface do so through the same NodeJS API and Chrome extension.

Chrome Extension

• Monitor XHR requests/responses and console logs.
• Track selected DOM elements.
• Provide screenshot functionality.
• Record browser activities.

Node Server

• Process data from the Chrome extension.
• Provide an API interface.
• Manage data storage.

MCP Server

• Implement the Model Context Protocol (MCP).
• Provide standardized tools to interact with the browser.
• Support AI-driven applications.

💻 Usage Examples

Please refer to our documentation for detailed usage instructions.

📚 Compatibility Information

BrowserTools MCP currently supports the following platforms:

• Windows
• macOS
• Linux

Compatible browsers include:

• Chrome
• Firefox
• Edge

📄 Contact

If you have any questions or need assistance, please contact our support team at support@agentdesk.ai

Thank you for choosing BrowserTools MCP! We look forward to your feedback and suggestions.