MCP Browser Server

A Playwright-based headless browser MCP server for scraping and rendering modern web documents.

Why Do You Need MCP Browser Server?

Many modern technical documents (built with Vue, React, or other SPA frameworks) dynamically render content on the client side. Standard web scraping tools or simple HTTP clients usually only see blank pages or loading animations.

MCP Browser Server solves this problem by using a full headless browser to fully render the page before capturing content, allowing AI to "see" documents just like a human developer.

Features

✅ Full Headless Rendering: Uses Playwright and Chromium to handle JavaScript-intensive websites
✅ Auto Archive: Scraped pages are saved as `.html` files in structured log directories
✅ Instance Isolation: Supports `TOOL_PREFIX` allowing multiple instances to run without conflicts
✅ Smart Tools: `browser_get_content`, `get_saved_files`, `read_saved_file`
✅ Persistent Storage: Maintains a local cache of documents for offline analysis or repeated queries
✅ Lightweight: Uses your existing Chrome/Edge installation via `playwright-core`

Installation

Global Install (Recommended)

npm install -g @liangshanli/mcp-server-browser

Local Install

npm install @liangshanli/mcp-server-browser

From Source

git clone https://github.com/liliangshan/mcp-server-browser.git
cd mcp-server-browser
npm install

Configuration Guide

Variable	Required	Default	Description
`CHROME_PATH`	Required	`C:\Program Files\Google\Chrome\Application\chrome.exe`	Path to Chrome or Edge executable
`TOOL_PREFIX`	Optional	-	Optional prefix for tool names (e.g., `doc_`)
`PROJECT_NAME`	Optional	-	Project name for customizing tool descriptions
`DOC_URL`	Optional	-	Default document URL for this instance
`MCP_LOG_DIR`	Optional	`./.setting`	Directory for storing logs and HTML files

Usage

1. Direct Run (Global Install)

mcp-server-browser

2. Using npx (Recommended)

npx @liangshanli/mcp-server-browser

3. Direct Start (Source Install)

npm start

Editor Integration

Cursor Editor Configuration

Create `.cursor/mcp.json` file in project root:

{
  "mcpServers": {
    "browser-docs": {
      "command": "npx",
      "args": ["-y", "@liangshanli/mcp-server-browser"],
      "env": {
        "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
        "TOOL_PREFIX": "browser",
        "PROJECT_NAME": "DocsAnalyzer"
      }
    }
  }
}

VS Code Editor Configuration

Create or edit `.vscode/mcp.json` file:

{
  "servers": {
    "browser-docs": {
      "command": "npx",
      "args": ["-y", "@liangshanli/mcp-server-browser"],
      "env": {
        "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
        "TOOL_PREFIX": "browser",
        "PROJECT_NAME": "DocsAnalyzer"
      }
    }
  }
}

Available Tools

1. browser_get_content

Open URL in headless browser, wait for content to load and save.

Parameters:

url (string, required): URL to visit
wait_until (string): State to wait for loading (`load`, `domcontentloaded`, `networkidle`). Default: `networkidle`

2. get_saved_files

Returns list of all saved HTML files in the log directory.

Parameters: None

3. read_saved_file

Read content of a specific saved HTML file.

Parameters:

filename (string, required): Filename (e.g., `https___tdesign.tencent.com_vue.html`)

4. save_doc_catalog (v1.0.7+)

Used for structured document analysis, saves document catalog.

5. get_doc_catalog (v1.0.7+)

Get document catalog information.

Logging

All operations and captured HTML files are stored in:

./.setting/ (or ./.setting.<TOOL_PREFIX>/ if prefix is set)

Captured files follow URL-based normalized naming conventions for easy identification and management.

Recent Updates

v1.0.7: Added `save_doc_catalog` and `get_doc_catalog` tools
v1.0.2: Initial stable version with full Playwright integration

Related Tools

← Back to MCP Tools List