✅ MCPBrowser (MCP Browser)

⚠️ Security Notice: MCPBrowser extracts webpage content and provides it to your AI agent (e.g., GitHub Copilot, Claude), which then sends it to the LLM provider it uses (e.g., Anthropic, OpenAI, GitHub) for processing. Make sure you trust both your agent and the LLM provider — especially when accessing pages with sensitive or private data.

MCPBrowser is an MCP browser server that gives AI assistants the ability to browse web pages using a real Chrome, Edge, or Brave browser. This browser-based MCP server lets AI assistants (Claude, Copilot) access any website — especially those protected by authentication, CAPTCHAs, anti-bot restrictions, or requiring JavaScript rendering. Uses your real browser session for web automation, so you log in once, and your AI can navigate, click buttons, fill forms, and extract content from sites that block automated requests.

Built on the Model Context Protocol (MCP), this web browser MCP server works seamlessly with Claude Desktop, Claude Code (CLI), GitHub Copilot, and any MCP-compatible AI assistant. It handles corporate SSO, CAPTCHAs, Cloudflare protection, SPAs, dashboards, and any site that blocks automated requests. Your AI gets the same browser access you have — no special APIs, no headless browser detection, just your authenticated browser session.

Example workflow for AI assistant to use MCPBrowser

1. fetch_webpage    → Load the login page
2. type_text        → Enter username & password (multiple fields at once)
3. click_element    → Click "Sign In"
4. get_current_html → Extract the content after login

Requirements
Installation
- Amp
- Claude Code
- Claude Desktop
- Cline
- Codex
- Copilot CLI
- Cursor
- Factory
- Gemini CLI
- Goose
- Kiro
- LM Studio
- opencode
- OpenClaw
- Qodo Gen
- VS Code (GitHub Copilot)
- VS Code Extension
- Warp
- Windsurf
MCP Tools
Configuration
Troubleshooting
For Developers
Links
License

Requirements

Chrome, Edge, or Brave browser
Node.js 18+ (includes npm)

Note: Node.js must be installed on your system. The VS Code extension and npm package both require Node.js to run the MCP server. Download from nodejs.org if not already installed.

Installation

Getting started

First, install MCPBrowser with your MCP client.

Standard config works in most tools:

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

Amp

Add via the Amp VS Code extension settings screen or by updating your settings.json file:

"amp.mcpServers": {
  "mcpbrowser": {
    "command": "npx",
    "args": ["-y", "mcpbrowser@latest"]
  }
}

Amp CLI Setup:

amp mcp add mcpbrowser -- npx -y mcpbrowser@latest

Claude Code

Use the Claude Code CLI to add the MCPBrowser MCP server:

claude mcp add mcpbrowser --scope user -- npx -y mcpbrowser@latest

Verify it's working:

claude mcp list

You should see:

mcpbrowser: npx -y mcpbrowser@latest - ✓ Connected

Claude Desktop

Add to your config file:

Windows: %APPDATA%\Claude\claude_desktop_config.json
Mac: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

Restart Claude Desktop after saving.

Cline

Follow the instruction in the section Configuring MCP Servers.

Add the following to your cline_mcp_settings.json file:

{
  "mcpServers": {
    "mcpbrowser": {
      "type": "stdio",
      "command": "npx",
      "timeout": 30,
      "args": ["-y", "mcpbrowser@latest"],
      "disabled": false
    }
  }
}

Codex

Use the Codex CLI to add the MCPBrowser MCP server:

codex mcp add mcpbrowser npx "-y" "mcpbrowser@latest"

Alternatively, create or edit the configuration file ~/.codex/config.toml and add:

[mcp_servers.mcpbrowser]
command = "npx"
args = ["-y", "mcpbrowser@latest"]

For more information, see the Codex MCP documentation.

Copilot CLI

Use the Copilot CLI to interactively add the MCPBrowser MCP server:

/mcp add

Alternatively, create or edit the configuration file ~/.copilot/mcp-config.json and add:

{
  "mcpServers": {
    "mcpbrowser": {
      "type": "local",
      "command": "npx",
      "tools": ["*"],
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

For more information, see the Copilot CLI documentation.

Cursor

Or install manually:

Go to Cursor Settings -> MCP -> Add new MCP Server. Name to your liking, use command type with the command npx -y mcpbrowser@latest. You can also verify config or add command like arguments via clicking Edit.

Factory

Use the Factory CLI to add the MCPBrowser MCP server:

droid mcp add mcpbrowser "npx -y mcpbrowser@latest"

Alternatively, type /mcp within Factory droid to open an interactive UI for managing MCP servers.

For more information, see the Factory MCP documentation.

Gemini CLI

Follow the MCP install guide, use the standard config above.

Goose

Or install manually:

Go to Advanced settings -> Extensions -> Add custom extension. Name to your liking, use type STDIO, and set the command to npx -y mcpbrowser@latest. Click "Add Extension".

Kiro

Follow the MCP Servers documentation. For example in .kiro/settings/mcp.json:

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

LM Studio

Or install manually:

Go to Program in the right sidebar -> Install -> Edit mcp.json. Use the standard config above.

opencode

Follow the MCP Servers documentation. For example in ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "mcpbrowser": {
      "type": "local",
      "command": ["npx", "-y", "mcpbrowser@latest"],
      "enabled": true
    }
  }
}

OpenClaw

OpenClaw is a personal AI assistant that runs on your devices. Add MCPBrowser using the CLI:

openclaw mcp add mcpbrowser -- npx -y mcpbrowser@latest

Verify it's working:

openclaw mcp list

For more information, see the OpenClaw MCP documentation.

Qodo Gen

Open Qodo Gen chat panel in VSCode or IntelliJ → Connect more tools → + Add new MCP → Paste the standard config above.

Click Save.

VS Code (GitHub Copilot)

Or install manually:

Follow the MCP install guide, use the standard config above. You can also install the MCPBrowser MCP server using the VS Code CLI:

# For VS Code
code --add-mcp '{"name":"mcpbrowser","command":"npx","args":["-y","mcpbrowser@latest"]}'

After installation, the MCPBrowser MCP server will be available for use with your GitHub Copilot agent in VS Code.

VS Code Extension

Install from VS Code Marketplace or run:

code --install-extension cherchyk.mcpbrowser

The extension automatically installs and configures everything for GitHub Copilot.

Warp

Go to Settings -> AI -> Manage MCP Servers -> + Add to add an MCP Server. Use the standard config above.

Alternatively, use the slash command /add-mcp in the Warp prompt and paste the standard config from above.

Windsurf

Follow Windsurf MCP documentation. Use the standard config above.

MCP Tools

`fetch_webpage`

Fetches web pages using your Chrome/Edge browser. Handles authentication, CAPTCHA, SSO, anti-bot protection, and JavaScript-heavy sites. Opens the URL in a browser tab (reuses existing tab for same domain) and waits for the page to fully load before returning content. Automatically detects SPAs (React, Vue, Angular) and waits for JavaScript to render content.

Parameters:

url (string, required) - The URL to fetch
removeUnnecessaryHTML (boolean, optional, default: true) - Remove unnecessary HTML for size reduction by ~90%
postLoadWait (number, optional, default: 0) - Additional milliseconds to wait after page load before extracting HTML. Use for pages that need extra time to render.

Examples:

// Basic fetch
{ url: "https://example.com" }

// Fetch with extra wait time for slow-rendering pages
{ url: "https://dashboard.example.com", postLoadWait: 2000 }

// Keep full HTML without cleanup
{ url: "https://example.com", removeUnnecessaryHTML: false }

`click_element`

Clicks on any clickable element (buttons, links, divs with onclick handlers, etc.). Can target by CSS selector or visible text content. Automatically scrolls element into view and waits for page stability after clicking.

⚠️ Note: Page must be already loaded via fetch_webpage first.

Parameters:

url (string, required) - The URL of the page (must match a previously fetched page)
selector (string, optional) - CSS selector for the element (e.g., #submit-btn, .login-button)
text (string, optional) - Text content to search for if selector not provided (e.g., "Sign In", "Submit")
returnHtml (boolean, optional, default: true) - Whether to wait for stability and return HTML after clicking. Set to false for fast form interactions (checkboxes, radio buttons)
removeUnnecessaryHTML (boolean, optional, default: true) - Remove unnecessary HTML for size reduction. Only used when returnHtml is true
postClickWait (number, optional, default: 1000) - Milliseconds to wait after click for SPAs to render dynamic content
waitForElementTimeout (number, optional, default: 1000) - Maximum time to wait for element in milliseconds

Examples:

// Click by text content
{ url: "https://example.com", text: "Sign In" }

// Click by CSS selector
{ url: "https://example.com", selector: "#login-button" }

// Click without waiting for HTML (fast checkbox toggle)
{ url: "https://example.com", selector: "#agree-checkbox", returnHtml: false }

// Click with custom wait time
{ url: "https://example.com", text: "Load More", postClickWait: 2000 }

`type_text`

Types text into one or more input fields in a single call. Supports filling entire forms at once for efficient automation. Automatically clears existing text by default.

⚠️ Note: Page must be already loaded via fetch_webpage first.

Parameters:

url (string, required) - The URL of the page (must match a previously fetched page)
fields (array, required) - Array of fields to fill. Each field object contains:
- selector (string, required) - CSS selector for the input element (e.g., #username, input[name="email"])
- text (string, required) - Text to type into the field
- clear (boolean, optional, default: true) - Whether to clear existing text first
- waitForElementTimeout (number, optional, default: 5000) - Maximum time to wait for element in milliseconds
returnHtml (boolean, optional, default: true) - Whether to wait for stability and return HTML after typing
removeUnnecessaryHTML (boolean, optional, default: true) - Remove unnecessary HTML for size reduction. Only used when returnHtml is true
postTypeWait (number, optional, default: 1000) - Milliseconds to wait after typing for SPAs to render dynamic content

Examples:

// Fill multiple fields at once (login form)
{ 
  url: "https://example.com/login", 
  fields: [
    { selector: "#username", text: "john@example.com" },
    { selector: "#password", text: "secretpass123" }
  ]
}

// Single field input
{ url: "https://example.com", fields: [{ selector: "#search", text: "query" }] }

// Append text without clearing
{ url: "https://example.com", fields: [{ selector: "#notes", text: " additional text", clear: false }] }

// Fast form fill without HTML return
{ 
  url: "https://example.com/signup", 
  fields: [
    { selector: "#firstName", text: "John" },
    { selector: "#lastName", text: "Doe" },
    { selector: "#email", text: "john@example.com" }
  ],
  returnHtml: false 
}

Error handling: If a field fails, the response indicates:

Which field number failed (e.g., "Failed on field 2 of 3")
Which fields were successfully filled
Clear guidance to NOT re-type already filled fields

`get_current_html`

Gets the current HTML from an already-loaded page WITHOUT navigating or reloading. Much faster than fetch_webpage since it only extracts the current DOM state. Use this after interactions (click, type) to get the updated page content efficiently.

⚠️ Note: Page must be already loaded via fetch_webpage first.

Parameters:

url (string, required) - The URL of the page (must match a previously fetched page)
removeUnnecessaryHTML (boolean, optional, default: true) - Remove unnecessary HTML for size reduction by ~90%

Examples:

// Get current HTML after interactions
{ url: "https://example.com" }

// Get full HTML without cleanup
{ url: "https://example.com", removeUnnecessaryHTML: false }

Performance comparison:

fetch_webpage: 2-5 seconds (full page reload)
get_current_html: 0.1-0.3 seconds (just extracts HTML) ✅

`scroll_page`

Scrolls within an already-loaded page. Use before take_screenshot to capture different parts of the page, or to bring elements into view before interaction. Supports multiple scroll modes:

By direction: Scroll up/down/left/right by pixel amount
To element: Scroll until a specific element is visible
To position: Scroll to absolute coordinates

⚠️ Note: Page must be already loaded via fetch_webpage first.

Parameters:

url (string, required) - The URL of the page (must match a previously fetched page)
direction (string, optional) - Direction to scroll: up, down, left, right. Use with amount.
amount (number, optional, default: 500) - Pixels to scroll in the specified direction (~half a viewport)
selector (string, optional) - CSS selector of element to scroll into view. Ignores direction/amount.
x (number, optional) - Absolute horizontal scroll position. Use with y.
y (number, optional) - Absolute vertical scroll position. Use with x.

Examples:

// Scroll down by 500px (default)
{ url: "https://example.com", direction: "down" }

// Scroll down by 1000px
{ url: "https://example.com", direction: "down", amount: 1000 }

// Scroll an element into view
{ url: "https://example.com", selector: "#footer" }

// Scroll to specific position
{ url: "https://example.com", x: 0, y: 2000 }

// Scroll to top of page
{ url: "https://example.com", x: 0, y: 0 }

Returns: Current scroll position, page dimensions, and viewport size — useful for understanding where you are on the page.

`take_screenshot`

Takes a screenshot of an already-loaded page for visual analysis. Useful when HTML parsing is insufficient — for example, pages with charts, images, complex layouts, popups, or visual content that's hard to understand from HTML alone. Returns a PNG image.

⚠️ Note: Page must be already loaded via fetch_webpage first.

Parameters:

url (string, required) - The URL of the page (must match a previously fetched page)
fullPage (boolean, optional, default: false) - Capture the full scrollable page instead of just the viewport

Examples:

// Capture viewport screenshot (default)
{ url: "https://example.com" }

// Capture full scrollable page
{ url: "https://dashboard.example.com", fullPage: true }

Use cases:

Visualize page layout when HTML is hard to parse
Capture charts, graphs, or data visualizations
Debug popups, modals, or overlays
Understand visual feedback (highlights, animations)
See what's blocking an element click

`close_tab`

Closes the browser tab for the given URL's hostname. Removes the page from the tab pool and forces a fresh session on the next visit to that hostname. Useful for clearing authentication state, managing memory, or starting fresh with a domain.

⚠️ Note: Uses exact hostname match (www.example.com and example.com are treated as different tabs).

Parameters:

url (string, required) - The URL whose hostname tab should be closed

Examples:

// Close tab for a domain
{ url: "https://example.com" }

// This will close the tab for portal.azure.com
{ url: "https://portal.azure.com/dashboard" }

Use cases:

Clear authentication/session state
Free up browser memory
Reset to fresh state before new login

Configuration (Optional)

Environment variables for advanced setup:

Variable	Description	Default
`CHROME_PATH`	Path to Chrome/Edge	Auto-detect
`CHROME_USER_DATA_DIR`	Browser profile directory	`%LOCALAPPDATA%/ChromeAuthProfile`
`CHROME_REMOTE_DEBUG_PORT`	DevTools port	`9222`

Troubleshooting

Browser doesn't open?

Make sure Chrome, Edge, or Brave is installed
Try setting CHROME_PATH explicitly

Can't connect to browser?

Close all Chrome instances and try again
Check if port 9222 is in use

Authentication not preserved?

Keep the browser tab open (default behavior)
Use the same domain for related requests

For Developers

Clone and setup:

git clone https://github.com/cherchyk/MCPBrowser.git
cd MCPBrowser
npm run install:all  # Installs dependencies for all workspace packages

Run tests:

# Test everything
npm test

# Test MCP server only
npm run test:mcp

# Test extension only
npm run test:extension

Links

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 121 Commits
.github		.github
MCPBrowser		MCPBrowser
VSCodeExtension		VSCodeExtension
docs		docs
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
server.json		server.json

License

cherchyk/MCPBrowser

Folders and files

Latest commit

History

Repository files navigation

✅ MCPBrowser (MCP Browser)

Contents

Requirements

Installation

Getting started

Amp

Claude Code

Claude Desktop

Cline

Codex

Copilot CLI

Cursor

Factory

Gemini CLI

Goose

Kiro

LM Studio

opencode

OpenClaw

Qodo Gen

VS Code (GitHub Copilot)

VS Code Extension

Warp

Windsurf

MCP Tools

fetch_webpage

click_element

type_text

get_current_html

scroll_page

take_screenshot

close_tab

Configuration (Optional)

Troubleshooting

For Developers

For Developers

Links

License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 20

Packages 0

Languages

`fetch_webpage`

`click_element`

`type_text`

`get_current_html`

`scroll_page`

`take_screenshot`

`close_tab`

Packages