https://github.com/AgentDeskAI/browser-tools-mcp
Monitor browser logs directly from Cursor and other MCP compatible IDEs.
https://github.com/AgentDeskAI/browser-tools-mcp
ai anthropic cursor mcp mcp-server
Last synced: 7 months ago
JSON representation
Monitor browser logs directly from Cursor and other MCP compatible IDEs.
- Host: GitHub
- URL: https://github.com/AgentDeskAI/browser-tools-mcp
- Owner: AgentDeskAI
- License: mit
- Created: 2025-02-10T09:20:38.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-01T20:05:01.000Z (7 months ago)
- Last Synced: 2025-03-01T20:42:58.155Z (7 months ago)
- Topics: ai, anthropic, cursor, mcp, mcp-server
- Language: JavaScript
- Homepage: https://agentdesk.ai/
- Size: 69.3 KB
- Stars: 383
- Watchers: 5
- Forks: 39
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-mcp-servers - **browser-tools-mcp** - Monitor browser logs directly from Cursor and other MCP compatible IDEs. `javascript` `ai` `anthropic` `cursor` `mcp` `npm install AgentDeskAI/browser-tools-mcp` (AI/ML)
- awesome-mcp-servers - **browser-tools-mcp** - Monitor browser logs directly from Cursor and other MCP compatible IDEs. `javascript` `ai` `anthropic` `cursor` `mcp` `npm install AgentDeskAI/browser-tools-mcp` (AI/ML)
- mcp-index - browser-tools-mcp - Monitors browser logs and analyzes browser data through a Chrome extension, enabling AI applications to enhance their interaction capabilities within a browsing context. (Data Analytics)
- awesome - AgentDeskAI/browser-tools-mcp - Monitor browser logs directly from Cursor and other MCP compatible IDEs. (JavaScript)
- awesome - AgentDeskAI/browser-tools-mcp - Monitor browser logs directly from Cursor and other MCP compatible IDEs. (JavaScript)
- StarryDivineSky - AgentDeskAI/browser-tools-mcp - tools-mcp项目是一个旨在直接从Cursor和其他MCP兼容的IDE中监控浏览器日志的工具。它允许开发者在IDE内部实时查看和分析浏览器控制台输出，无需离开开发环境即可进行调试。该工具的核心功能是与MCP（Monitor, Control, and Plan）协议兼容，这意味着它可以集成到支持该协议的各种IDE中。通过该工具，开发者可以更方便地追踪JavaScript错误、网络请求以及其他浏览器活动，从而提高开发效率和问题排查速度。该项目的主要目标是简化Web应用程序的调试流程，提供更集成的开发体验。它利用MCP协议的强大功能，将浏览器日志信息无缝地引入到IDE界面中，方便开发者进行实时监控和分析。 (A01_文本生成_文本对话 / 大语言对话模型及数据)
README
# 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.
## Updates
v1.1.0 is out! This includes several bug fixes for logging + screenshots.
Please make sure to update the version in your IDE / MCP client as so:
`npx @agentdeskai/browser-tools-mcp@1.1.0`
Also make sure to download the latest version of the chrome extension here:
[v1.1.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.1.0/chrome-extension-v1-1-0.zip)
From there you can run the local node server as usual like so:
`npx @agentdeskai/browser-tools-server`
And once you've opened your chrome dev tools, logs should be getting sent to your server!
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)
## Architecture
There are three core components all used to capture and analyze browser data:
1. **Chrome Extension**: A browser extension that captures screenshots, console logs, network activity and DOM elements.
2. **Node Server**: An intermediary server that facilitates communication between the Chrome extension and any instance of an MCP server.
3. **MCP Server**: A Model Context Protocol server that provides standardized tools for AI clients to interact with the browser.
```
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP Client │ ──► │ MCP Server │ ──► │ Node Server │ ──► │ Chrome │
│ (e.g. │ ◄── │ (Protocol │ ◄── │ (Middleware) │ ◄── │ Extension │
│ Cursor) │ │ Handler) │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘
```
Model Context Protocol (MCP) is a capability supported by Anthropic AI models that
allow you to create custom tools for any compatible client. MCP clients like Claude
Desktop, Cursor, Cline or Zed can run an MCP server which "teaches" these clients
about a new tool that they can use.
These tools can call out to external APIs but in our case, **all logs are stored locally** on your machine and NEVER sent out to any third-party service or API. BrowserTools MCP runs a local instance of a NodeJS API server which communicates with the BrowserTools Chrome Extension.
All consumers of the BrowserTools MCP Server interface with the same NodeJS API and Chrome extension.
#### Chrome Extension
- Monitors XHR requests/responses and console logs
- Tracks selected DOM elements
- Sends all logs and current element to the BrowserTools Connector
- Connects to Websocket server to capture/send screenshots
- Allows user to configure token/truncation limits + screenshot folder path
#### Node Server
- Acts as middleware between the Chrome extension and MCP server
- Receives logs and currently selected element from Chrome extension
- Processes requests from MCP server to capture logs, screenshot or current element
- Sends Websocket command to the Chrome extension for capturing a screenshot
- Intelligently truncates strings and # of duplicate objects in logs to avoid token limits
- Removes cookies and sensitive headers to avoid sending to LLMs in MCP clients
#### MCP Server
- Implements the Model Context Protocol
- Provides standardized tools for AI clients
- Compatible with various MCP clients (Cursor, Cline, Zed, Claude Desktop, etc.)
## Installation
Installation steps can be found in our documentation:
- [BrowserTools MCP Docs](https://browsertools.agentdesk.ai/)
## Usage
Once installed and configured, the system allows any compatible MCP client to:
- Monitor browser console output
- Capture network traffic
- Take screenshots
- Analyze selected elements
- Wipe logs stored in our MCP server
## Compatibility
- Works with any MCP-compatible client
- Primarily designed for Cursor IDE integration
- Supports other AI editors and MCP clients