Skip to content

Commit b6a34bb

Browse files
committed
updated readme
1 parent 9fd00a7 commit b6a34bb

File tree

2 files changed

+31
-50
lines changed

2 files changed

+31
-50
lines changed

.DS_Store

0 Bytes
Binary file not shown.

README.md

Lines changed: 31 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
# Browser Context Provider (MCP Chrome Extension)
1+
# BrowserTools MCP
22

3-
## Overview
3+
> Make your AI tools 10x more aware and capable of interacting with your browser
44
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.
66

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.
108

119
## Architecture
1210

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.
16+
1317
```
1418
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
1519
│ MCP Client │ ──► │ MCP Server │ ──► │ Node Server │ ──► │ Chrome │
@@ -18,62 +22,43 @@ This application is a powerful browser monitoring and interaction tool that enab
1822
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘
1923
```
2024

21-
### Component Details
25+
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.
2233

2334
#### Chrome Extension
2435

25-
- Captures browser console logs
26-
- Monitors network requests and responses
27-
- Captures screenshots
36+
- Monitors XHR requests/responses and console logs
2837
- 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
3041

3142
#### Node Server
3243

3344
- 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
3650

3751
#### MCP Server
3852

3953
- Implements the Model Context Protocol
4054
- 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.)
4356

4457
## Installation
4558

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:
6560

66-
1. Command base: `node`
67-
2. Server path: `[absolute_path_to_workspace]/mcp-server/dist/mcp-server.js`
68-
69-
## Features
70-
71-
- Console log capture
72-
- Network request/response monitoring
73-
- Screenshot capabilities
74-
- DOM element selection
75-
- Real-time browser state monitoring
76-
- AI-powered analysis through LLM integration
61+
- [BrwoserTools MCP Docs](https://docs.browserkit.dev/mcp-server)
7762

7863
## Usage
7964

@@ -83,14 +68,10 @@ Once installed and configured, the system allows any compatible MCP client to:
8368
- Capture network traffic
8469
- Take screenshots
8570
- Analyze selected elements
86-
- Interface with AI models for enhanced functionality
71+
- Wipe logs stored in our MCP server
8772

8873
## Compatibility
8974

9075
- Works with any MCP-compatible client
9176
- Primarily designed for Cursor IDE integration
9277
- 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

Comments
 (0)