BrowserTools Context Server

BrowserTools MCP for Zed

This extension integrates BrowserTools MCP (Model Context Protocol) into Zed editor, providing browser monitoring and interaction capabilities through Zed's assistant system.

Features

Browser Capture: Capture screenshots, console logs, and DOM elements from your current browser page
Browser Audit: Run various audits including accessibility, performance, SEO, and best practices
Browser Debug: Start a comprehensive browser debugging session

Prerequisites

Zed Editor
Node.js (v18 or higher)
BrowserTools Chrome Extension installed in your Chrome browser

Installation

Option 1: Install from Zed Extensions Registry

Open Zed Editor
Navigate to Extensions
Search for "BrowserTools Context Server"
Click "Install"

Option 2: Install as a Development Extension

Clone this repository:

git clone https://github.com/mirageN1349/browser-tools-context-server
cd browser-tools-context-server

Open Zed Editor
Navigate to Extensions
Click "Install Dev Extension" and select the cloned directory

Setup

Install the BrowserTools Chrome Extension
Open Chrome with the extension enabled

Start the browser-tools-server:

npx @agentdeskai/browser-tools-server@1.2.1

The MCP server starts automatically when the extension activates in Zed

Configuration

Add the following to your Zed settings.json to customize:

{
  "context_servers": {
    "browser-tools-context-server": {
      "settings": {
        "port": 3025,
        "host": "127.0.0.1"
      }
    }
  }
}

By default, the extension installs and runs the MCP server with Zed-managed Node.js. Set server_command and server_args only if you need a custom runtime.

Usage

After installing the extension and the Chrome extension:

Open Chrome with the BrowserTools extension enabled
Open Zed and ensure the BrowserTools Context Server extension is activated
Open the Assistant in Zed
Use any of the following slash commands:

Available Slash Commands

/browser-capture screenshot - Take a screenshot of the current page
/browser-capture logs - View browser console logs
/browser-capture errors - View browser console errors
/browser-capture network - View browser network logs
/browser-capture network-errors - View browser network errors
/browser-capture clear - Clear logged data
/browser-capture element - Get information about a selected DOM element
/browser-audit accessibility - Run an accessibility audit
/browser-audit performance - Run a performance audit
/browser-audit seo - Run an SEO audit
/browser-audit best-practices - Check best practices
/browser-audit nextjs - Run NextJS-specific audit (if applicable)
/browser-audit all - Run all available audits
/browser-debug start - Start comprehensive debugger mode

How It Works

This extension uses a three-component architecture:

Chrome Extension monitors browser events, console logs, network requests, and captures screenshots
Browser Tools Server (browser-tools-server) acts as middleware between the Chrome extension and the MCP server
MCP Server (browser-tools-mcp) implements the Model Context Protocol, providing standardized tools that Zed can invoke

The extension automatically launches the MCP server. The browser-tools-server must be started separately.

Troubleshooting

Make sure the Chrome extension is installed and enabled
Check that your browser is running and the extension is active (you should see the BrowserTools icon in Chrome)
Verify that Node.js and npx are available in your PATH
If port 3025 is in use, configure a different port in settings
If you encounter issues, try restarting both Chrome and Zed

License

Apache-2.0