✅ MCPBrowser (MCP Browser)
MCPBrowser is an MCP browser server that gives AI assistants the ability to browse web pages using a real Chrome or Edge 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 Chrome/Edge 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
3. type_text → Enter password
4. click_element → Click "Sign In"
5. get_current_html → Extract the content after login
Contents
Requirements
- Chrome or Edge browser
- Node.js 18+
Installation
| # | Platform | Difficulty |
|---|---|---|
| 1 | VS Code Extension | One Click |
| 2 | Claude Code | One Command |
| 3 | Claude Desktop | Manual |
| 4 | npm Package | Manual |
Option 1: 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.
Option 2: Claude Code
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
That's it! Ask Claude to fetch any protected page:
"Fetch https://portal.azure.com using mcpbrowser"
Option 3: 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.
Option 4: npm Package
For VS Code (GitHub Copilot) manual setup, add to your mcp.json:
Windows: %APPDATA%\Code\User\mcp.json
Mac/Linux: ~/.config/Code/User/mcp.json
{
"servers": {
"MCPBrowser": {
"type": "stdio",
"command": "npx",
"args": ["-y", "mcpbrowser@latest"]
}
}
}
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 fetchremoveUnnecessaryHTML(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 tofalsefor fast form interactions (checkboxes, radio buttons)removeUnnecessaryHTML(boolean, optional, default:true) - Remove unnecessary HTML for size reduction. Only used whenreturnHtmlistruepostClickWait(number, optional, default:1000) - Milliseconds to wait after click for SPAs to render dynamic contentwaitForElementTimeout(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 an input field, textarea, or other editable element. Simulates human-like typing with configurable delay between keystrokes. 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)selector(string, required) - CSS selector for the input element (e.g.,#username,input[name="email"])text(string, required) - Text to type into the fieldclear(boolean, optional, default:true) - Whether to clear existing text firsttypeDelay(number, optional, default:50) - Delay between keystrokes in milliseconds (simulates human typing)returnHtml(boolean, optional, default:true) - Whether to wait for stability and return HTML after typingremoveUnnecessaryHTML(boolean, optional, default:true) - Remove unnecessary HTML for size reduction. Only used whenreturnHtmlistruepostTypeWait(number, optional, default:1000) - Milliseconds to wait after typing for SPAs to render dynamic contentwaitForElementTimeout(number, optional, default:5000) - Maximum time to wait for element in milliseconds
Examples:
// Basic text input
{ url: "https://example.com", selector: "#email", text: "user@example.com" }
// Append text without clearing
{ url: "https://example.com", selector: "#search", text: " advanced", clear: false }
// Fast typing without human simulation
{ url: "https://example.com", selector: "#username", text: "john", typeDelay: 0 }
// Type without waiting for HTML return (faster)
{ url: "https://example.com", selector: "#field", text: "value", returnHtml: false }
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) ✅
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 or Edge is installed
- Try setting
CHROME_PATHexplicitly
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
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