Skip to main content
Glama

You ship a fix. Your agent says "done, please verify." You alt-tab to Chrome, navigate to the page, log in, click around, find the bug.

Your agent just wrote the code. It could also verify it. It already has your browser open right there. It just can't see it.

Now it can.


Quick Start

Two parts:

  • MCP server - runs on your machine, talks to your AI agent

  • Chrome extension - sits in your browser, executes the commands

1. Add the MCP server

Cursor (one click):

Or add manually in Cursor Settings > MCP > "Add new MCP server":

{
  "mcpServers": {
    "real-browser": {
      "command": "npx",
      "args": ["-y", "real-browser-mcp"]
    }
  }
}

Claude Desktop: Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows). Add the same JSON block.

Windsurf: Settings > MCP. Same config.

Any MCP-compatible client works.

2. Install the Chrome extension

Or load from source:

git clone https://github.com/ofershap/real-browser-mcp.git
  1. Open chrome://extensions and enable Developer mode (toggle in the top right)

  2. Click Load unpacked and select the extension/ folder from the cloned repo

Click the Real Browser MCP icon in your toolbar.

Green dot = connected. Gray = waiting for server.

Done. Your agent can see your browser.


How Others Compare

Real Browser MCP

Playwright MCP

Chrome DevTools MCP

Uses your existing browser

Yes

No, launches new

Partial, needs debug port

Sessions and cookies

Already there

Fresh profile

Manual setup

Works behind corporate SSO

Yes

No

Depends

Setup

Extension + MCP config

Headless browser

Chrome with --remote-debugging-port


🧠 Teach Your Agent

The agent can use all 18 tools out of the box, but it works better when it knows when and how to chain them. A config file teaches the right workflow - snapshot first, then act, then verify.

Run one command:

npx real-browser-mcp --setup cursor

This installs:

  • ~/.cursor/rules/real-browser-mcp.mdc - teaches the snapshot-first workflow, how to handle dropdowns, when to use screenshots vs snapshots

  • ~/.cursor/commands/check-browser.md - adds /check-browser to your Cursor chat

After that, type /check-browser in any chat. Or just say "check the result in my browser" and the agent knows what to do.

npx real-browser-mcp --setup claude

Adds an AGENTS.md to your project root. Claude Code auto-discovers it.

See agent-config/ for manual installation or to customize the rules.


What It Can Do

18 tools. Grouped by purpose.

See

Tool

What it does

browser_snapshot

Accessibility tree with element refs. Compact mode (default) returns only interactive elements

browser_screenshot

Capture what's on screen

browser_text

Extract raw text from page or element

browser_find

Query elements by CSS selector

Interact

Tool

What it does

browser_click

Click by ref or CSS selector

browser_click_text

Click by visible text. Works through React portals and overlays

browser_type

Type into inputs and contenteditable fields

browser_press_key

Key combos (Enter, Escape, Ctrl+A)

browser_scroll

Scroll pages and virtual containers

browser_hover

Trigger tooltips and dropdowns

browser_select

Pick from native <select> dropdowns

browser_wait

Wait for elements to appear or disappear

Navigate

Tool

What it does

browser_navigate

Go to a URL in the active tab

browser_tabs

List, create, close, or focus tabs

Debug

Tool

What it does

browser_console

Console output (log, warn, error)

browser_network

XHR/fetch requests with status codes

browser_evaluate

Run JavaScript via Chrome DevTools Protocol

browser_handle_dialog

Handle alert/confirm/prompt dialogs


Configuration

Env var

Default

What it does

WS_PORT

7225

WebSocket port for extension connection

Connection drops are handled automatically with exponential backoff (1s to 30s), ping/pong health checks every 10s, and per-tool timeouts (5s for clicks, 60s for navigation).

Run two server instances on different ports:

{
  "mcpServers": {
    "browser-work": {
      "command": "npx", "args": ["-y", "real-browser-mcp"]
    },
    "browser-personal": {
      "command": "npx", "args": ["-y", "real-browser-mcp"],
      "env": { "WS_PORT": "9333" }
    }
  }
}

Update the port in each extension popup to match.


Everything stays on your machine. The extension connects to the MCP server via WebSocket on localhost. No cloud, no proxy, nothing leaves your browser.

real-browser-mcp/
β”œβ”€β”€ mcp-server/          MCP server (npm package, TypeScript)
β”‚   └── src/tools/       One file per tool, registry pattern
β”œβ”€β”€ extension/           Chrome extension (Manifest V3, plain JS)
β”‚   β”œβ”€β”€ background.js    Service worker, WebSocket client, tool handlers
β”‚   β”œβ”€β”€ content.js       Console capture
β”‚   └── popup/           Connection status UI
β”œβ”€β”€ agent-config/        Pre-built configs for Cursor + Claude Code
β”‚   β”œβ”€β”€ cursor/          Rules and commands
β”‚   β”œβ”€β”€ skills/          Browser automation skill
β”‚   └── setup.mjs        One-command installer
└── tests/               Bridge + registry tests

Stack: TypeScript (strict) Β· MCP SDK Β· WebSocket Β· Chrome Extension Manifest V3 Β· Vitest

git clone https://github.com/ofershap/real-browser-mcp.git
cd real-browser-mcp
npm install
npm run build
npm test

Command

What it does

npm run build

Compile TypeScript

npm run dev

Watch mode

npm test

Run tests

npm run typecheck

Type check without emitting

npm run setup:cursor

Install Cursor rule + command

FAQ

That's the whole point. The extension runs inside your actual Chrome - same cookies, same sessions, same local storage. No re-authentication needed.

No. The MCP server and extension talk over WebSocket on localhost. Nothing leaves your machine. There's no analytics, no telemetry, no cloud component. Privacy policy.

Any MCP-compatible client. Cursor, Claude Desktop, Claude Code, Windsurf, Cline, and anything else that speaks the MCP protocol.

Yes. Run two MCP server instances on different ports. See Configuration for the setup.

They launch a new browser instance from scratch - no state, no cookies, no sessions. You have to replay the full login flow every time. This connects to the browser you already have open with everything already loaded.


Contributing

Bug reports, feature requests, and PRs welcome. Open an issue first for larger changes.

Author

Made by ofershap

LinkedIn GitHub


README built with README Builder

License

MIT Β© Ofer Shapira

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ofershap/real-browser-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server