Log inSubmit server
Smart Browser MCP logo

Smart Browser MCP

Automates Chrome and Edge with Playwright and CDP, using numbered element refs, flow replay, and HTTP API testing.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Smart Browser MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "zhaolibin-smart-browser-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@zhaolibin/smart-browser-mcp"
      ],
      "env": {
        "BROWSER_PATH": "YOUR_VALUE_HERE",
        "BROWSER_USER_DATA_DIR": "YOUR_VALUE_HERE",
        "BROWSER_CDP_PORT": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

Automated check passed— started and listed 39 tools correctly (10d ago).

Overview

Smart Browser MCP MCP server connects AI coding assistants to Chrome or Edge through Playwright and the Chrome DevTools Protocol. It exposes tools for observing pages, targeting numbered elements, performing interactions, capturing screenshots, recording flows, and testing HTTP APIs. Reach for it when browser tasks need more reliable element targeting, persistent browser state, or combined UI and API checks. The server starts the browser lazily and can reuse an existing CDP session.

Use cases

  • Automate form filling and button clicks in web applications
  • Record and replay repeatable browser workflows
  • Inspect pages with numbered element references and annotated screenshots
  • Run UI and HTTP API checks in one workflow
  • Preserve browser login state across sessions

Key features

  • Numbered element refs with fallback locating strategies
  • Set-of-Mark screenshots for visual element targeting
  • Playwright and Chrome DevTools Protocol browser control
  • Flow recording and replay
  • Persistent element memory
  • HTTP API test suites with assertions

Tools39

What Smart Browser MCP lets your agent do. Expand a tool for its parameters.

Verified live~3.1k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 2d ago

Recent health check succeeded.

5/5 checks healthy over the last 19d

What it can do

From the 39 tools this server returned when we ran it; 39 declare their own safety hints.

Can delete or modify data · 7Handles credentials · 3Makes network requests · 30Read-only tools · 32
Network at startup3 connections
Files written at startupNone
Install scriptsNone
npm provenanceSigned build
Package age45 days
Maintainers1

Observed 2026-10-30 in an isolated sandbox. A description of reach, not a security audit.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2d ago via OSV.dev · @zhaolibin/smart-browser-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

npm downloads256Package downloads in the last 30 days.
Last commit1mo agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed39Callable tools this server registers over MCP.
Directory activity4 viewsConfig copies, upvotes, and views on AllMCPs.

How Smart Browser MCP works

What Smart Browser MCP MCP server does

Smart Browser MCP MCP server gives an MCP-compatible coding assistant browser automation and API testing tools. It connects to Chrome or Edge through Playwright and the Chrome DevTools Protocol (CDP), allowing an agent to open pages, inspect content, interact with controls, manage tabs, and collect screenshots or runtime errors.

The browser observation model is built around numbered element references. After scanning a page, interactive elements receive refs such as e1 and e2. Interaction tools can use those refs before falling back to selectors, placeholders, or visible text. A Set-of-Mark screenshot adds boxes and reference numbers to the page image, which can help a vision-capable model identify the intended control.

This fits the Browser Automation category for tasks such as navigating web applications, filling forms, replaying repeatable workflows, and checking a web UI alongside its HTTP API. It also supports captcha or human-verification handoff by pausing for manual handling.

How it works

The MCP process communicates with the client over stdio. On the first browser tool call, it checks for an available CDP instance on the configured port. If one is not available, it starts a browser using the configured executable and user-data directory. Reusing a profile can preserve login state and browser extensions.

Page scans inspect visible, interactive DOM elements and create a mapping between each ref and several locating strategies. Because the mapping can become stale after page changes, the README recommends observing the page again when an interaction no longer works. Saved flows, element mappings, API environments, and test suites are written as JSON files in the current working directory.

Setup and configuration

Node.js 18 or newer is required. Install with npx -y @zhaolibin/smart-browser-mcp, install the package globally with npm, or build it from source with the repository's npm scripts. The package exposes smart-browser-mcp and also provides claude-browser-mcp and browser-mcp command aliases.

The main environment variables are:

  • BROWSER_PATH: browser executable path; Chrome and Edge locations can be detected automatically when omitted.
  • BROWSER_USER_DATA_DIR: user-data directory used for persistent browser state.
  • BROWSER_CDP_PORT: CDP debugging port, defaulting to 9222.

Playwright's bundled browser download can also be skipped when using an installed Chrome or Edge executable.

Tools and capabilities

Browser tools cover page opening, element observation, text extraction, DOM snapshots, semantic page analysis, site-map extraction, clicking, filling, selecting, hovering, keyboard input, scrolling, screenshots, viewport changes, and human waits. Tab tools can list, switch, and create tabs.

Smart Browser MCP MCP server also includes:

  • Flow recording, listing, and replay.
  • Persistent element memory with save, recall, list, and delete operations.
  • Browser console error reading and clearing.
  • HTTP requests, environment variables, login handling, response assertions, and test-suite execution.
  • Set-of-Mark screenshots and numbered refs for model-guided targeting.

Limitations and notes

This server relies on a locally available Chrome or Edge environment and a usable CDP port. Only one CDP instance should use a configured port at a time. Browser profile selection affects whether existing login state is available, so a changing or incorrect user-data directory can make sessions appear logged out.

Element refs describe a particular page state and may need to be regenerated after navigation, scrolling, or other DOM changes. Captcha and other human-verification steps are not automatically completed; the workflow pauses for a person and can then continue. Generated screenshots, flows, memory, API environments, and suites are stored locally under the current working directory.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Smart Browser MCP

Smart Browser MCP is an MCP server that connects AI coding assistants to Chrome or Edge through Playwright and CDP. Its main tools open and inspect pages, target numbered elements, perform browser actions, capture screenshots, record and replay flows, and send or assert HTTP API requests for testing.

Install it with `npx -y @zhaolibin/smart-browser-mcp`, install the npm package globally, or build it from source. Node.js 18 or newer is required. Configure the resulting command in an MCP client, then set browser environment variables if the default Chrome or Edge detection is unsuitable.

Configure the server as a stdio process using `npx` or the globally installed `smart-browser-mcp` command, then restart Cursor after saving the MCP configuration.

Set `BROWSER_USER_DATA_DIR` to a fixed browser profile directory. The server can reuse an existing CDP browser instance and that user-data directory, allowing the configured profile's login state and extensions to remain available.

Run `browser_observe` again to refresh the numbered refs after the page changes. If needed, scroll the target into view or use `browser_wait_human` for a verification step before retrying the interaction.

Related MCP servers

All in Browser Automation All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewSmart Browser MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/zhaolibin-smart-browser-mcp?style=directory)](https://allmcps.com/mcp/zhaolibin-smart-browser-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/zhaolibin-smart-browser-mcp"><img src="https://allmcps.com/api/badge/zhaolibin-smart-browser-mcp?style=directory" alt="Smart Browser MCP on AllMCPs" /></a>