You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Make your AI tools 10x more aware and capable of interacting with your browser
4
4
5
-
This application is a powerful browser monitoring and interaction tool that enables AI-powered applications to capture and analyze browser data through a Chrome extension. It consists of three main components working together in a layered architecture:
5
+
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.
6
6
7
-
1.**Chrome Extension**: A browser extension that captures console logs, network activity, and DOM elements.
8
-
2.**Node Server**: An intermediary server that facilitates communication between the Chrome extension and the MCP server.
9
-
3.**MCP Server**: A Model Context Protocol server that provides standardized tools for AI clients to interact with the browser.
7
+
Read our [docs](https://docs.browserkit.dev/mcp-server) for the full installation, quickstart and contribution guides.
10
8
11
9
## Architecture
12
10
11
+
There are three core components all used to capture and analyze browser data:
12
+
13
+
1.**Chrome Extension**: A browser extension that captures screenshots, console logs, network activity and DOM elements.
14
+
2.**Node Server**: An intermediary server that facilitates communication between the Chrome extension and any instance of an MCP server.
15
+
3.**MCP Server**: A Model Context Protocol server that provides standardized tools for AI clients to interact with the browser.
Model Context Protocol (MCP) is a capability supported by Anthropic AI models that
26
+
allow you to create custom tools for any compatible client. MCP clients like Claude
27
+
Desktop, Cursor, Cline or Zed can run an MCP server which "teaches" these clients
28
+
about a new tool that they can use.
29
+
30
+
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. BrowserKit MCP runs a local instance of a NodeJS API server which communicates with the BrowserKit Chrome Extension.
31
+
32
+
All consumers of the BrowserKit MCP Server interface with the same NodeJS API and Chrome extension.
22
33
23
34
#### Chrome Extension
24
35
25
-
- Captures browser console logs
26
-
- Monitors network requests and responses
27
-
- Captures screenshots
36
+
- Monitors XHR requests/responses and console logs
28
37
- Tracks selected DOM elements
29
-
- Communicates with the Node server through DevTools protocol
38
+
- Sends all logs and current element to the BrowserKit Connector
39
+
- Connects to Websocket server to capture/send screenshots
40
+
- Allows user to configure token/truncation limits + screenshot folder path
30
41
31
42
#### Node Server
32
43
33
44
- Acts as middleware between the Chrome extension and MCP server
34
-
- Processes and routes requests
35
-
- Manages data transformation and communication
45
+
- Receives logs and currently selected element from Chrome extension
46
+
- Processes requests from MCP server to capture logs, screenshot or current element
47
+
- Sends Websocket command to the Chrome extension for capturing a screenshot
48
+
- Intelligently truncates strings and # of duplicate objects in logs to avoid token limits
49
+
- Removes cookies and sensitive headers to avoid sending to LLMs in MCP clients
36
50
37
51
#### MCP Server
38
52
39
53
- Implements the Model Context Protocol
40
54
- Provides standardized tools for AI clients
41
-
- Interfaces with Anthropic Cloud LLM inference endpoints
42
-
- Compatible with various MCP clients (Cursor, etc.)
55
+
- Compatible with various MCP clients (Cursor, Cline, Zed, Claude Desktop, etc.)
43
56
44
57
## Installation
45
58
46
-
### 1. MCP Server Setup
47
-
48
-
```bash
49
-
cd mcp-server
50
-
npm install
51
-
npm start
52
-
```
53
-
54
-
### 2. Chrome Extension Setup
55
-
56
-
1. Open your Chrome-based browser
57
-
2. Navigate to `chrome://extensions/`
58
-
3. Enable "Developer mode"
59
-
4. Click "Load unpacked"
60
-
5. Select the `chrome-extension` directory from this repository
61
-
62
-
### 3. MCP Client Configuration
63
-
64
-
Configure your MCP client with the following:
59
+
Installation steps can be found in our documentation:
65
60
66
-
1. Command base: `node`
67
-
2. Server path: `[absolute_path_to_workspace]/mcp-server/dist/mcp-server.js`
@@ -83,14 +68,10 @@ Once installed and configured, the system allows any compatible MCP client to:
83
68
- Capture network traffic
84
69
- Take screenshots
85
70
- Analyze selected elements
86
-
-Interface with AI models for enhanced functionality
71
+
-Wipe logs stored in our MCP server
87
72
88
73
## Compatibility
89
74
90
75
- Works with any MCP-compatible client
91
76
- Primarily designed for Cursor IDE integration
92
77
- Supports other AI editors and MCP clients
93
-
94
-
## Development
95
-
96
-
The application uses TypeScript for the server components and standard web technologies for the Chrome extension. Built files are generated in the `dist` directory upon running `npm start` in the MCP server.
0 commit comments