Browser Bridge MCP

An open-source MCP server + Chrome extension that gives AI coding assistants direct access to the browser. Navigate pages, click elements, fill forms, run JavaScript, take screenshots, and read page content — all from the terminal.

The Problem

AI coding assistants are powerful but blind — they can’t see what’s in the browser. Developers end up copy-pasting error messages, describing UI state in words, and manually relaying what they see on screen. It’s slow and lossy.

The Solution

Browser Bridge MCP connects any MCP-compatible AI assistant directly to the browser. One npx command starts the server, a Chrome extension handles the browser side. The assistant can then navigate, interact, inspect, and screenshot — no more alt-tabbing.

How It Works

MCP Client (Claude Code, Cursor, etc.)
    ↕ stdio
MCP Server (Node.js, runs locally)
    ↕ WebSocket (localhost:7483)
Chrome Extension (Manifest V3)
    ↕ Chrome APIs
Browser (any Chromium browser)

All communication stays on your machine. No data is sent to any remote server or third party.

What It Can Do

Feature Description
Navigate & Screenshot Point the assistant at any URL and get a visual capture of the current state
Click & Fill Forms Interact with UI elements by CSS selector — works with React’s synthetic event system
Run JavaScript Execute arbitrary JS in the page context and get results back
Automated QA Run structured QA checklists that drive the browser through test scenarios and report pass/fail

Quick Start

1. Load the extension. It ships as plain JavaScript with no build step — load it unpacked:

  1. Download or clone the repo.
  2. Open chrome://extensions and enable Developer mode.
  3. Click Load unpacked and select the extension/ folder.

Works in any Chromium browser: Chrome, Brave, Edge, Arc, Vivaldi, Opera.

2. Add the server to your MCP client.

# Claude Code
claude mcp add browser-bridge -- npx -y mcp-browser-bridge

That’s it. Start using browser_* tools.

Technical Highlights

License

MIT