Web Browser (Playwright) MCP server

The MCP Web Browser Server provides headless web browsing capabilities through Model Context Protocol (MCP), using Playwright to enable browser interactions via a flexible API. It allows you to navigate websites, extract content, interact with web elements, and manage multiple browser tabs programmatically.

Installation Requirements

Prerequisites

• Python 3.10 or higher
• MCP SDK
• Playwright

Setup Instructions

Install the required packages using pip:

# Install MCP and Playwright
pip install mcp playwright

# Install browser dependencies
playwright install

Configuration for Claude Desktop

To use with Claude Desktop, add the following to your claude_desktop_config.json:

{
  "mcpServers": {
    "web-browser": {
      "command": "python",
      "args": [
        "/path/to/your/server.py"
      ]
    }
  }
}

Basic Usage

Web Navigation

Navigate to websites and extract content:

# Browse to a website
page_content = browse_to("https://example.com")

# Extract all text content from the page
text_content = extract_text_content()

# Extract text from a specific element
title_text = extract_text_content("h1.title")

Form Interaction

Fill out forms and click buttons:

# Navigate to a login page
browse_to("https://example.com/login")

# Input text into form fields
input_text("#username", "your_username")
input_text("#password", "your_password")

# Click a login button
click_element("#login-button")

Screenshots

Capture screenshots of pages or specific elements:

# Capture full page screenshot
full_page_screenshot = get_page_screenshots(full_page=True)

# Capture specific element screenshot
element_screenshot = get_page_screenshots(selector="#main-content")

Advanced Features

Link Extraction

Retrieve and filter links from web pages:

# Get all links on the page
page_links = get_page_links()

# Get links matching a pattern
filtered_links = get_page_links(filter_pattern="contact")

Multi-Tab Browsing

Create and manage multiple browser tabs:

# Create a new tab
tab_id = create_new_tab("https://example.com")

# Create another tab
another_tab_id = create_new_tab("https://example.org")

# List all open tabs
tabs = list_tabs()

# Switch between tabs
switch_tab(tab_id)

# Close a tab
close_tab(another_tab_id)

Page Manipulation

Interact with page content and behavior:

# Scroll the page
scroll_page(direction="down", amount="page")

# Execute JavaScript on the page
result = execute_javascript("return document.title")

# Get detailed page information
page_info = get_page_info()

# Refresh the current page
refresh_page()

# Wait for navigation to complete
wait_for_navigation(timeout_ms=5000)

Function Reference

Navigation Functions

• browse_to(url, context=None) - Navigate to a specified URL
• refresh_page(context=None) - Refresh the current page
• wait_for_navigation(timeout_ms=10000, context=None) - Wait for page navigation to complete

Content Extraction

• extract_text_content(selector=None, context=None) - Extract text from the page or specific element
• get_page_screenshots(full_page=False, selector=None, context=None) - Capture screenshots
• get_page_links(filter_pattern=None, context=None) - Extract links from the page with optional filtering
• get_page_info(context=None) - Retrieve detailed information about the current page

User Interaction

• click_element(selector, context=None) - Click on a page element
• input_text(selector, text, context=None) - Input text into a form field
• scroll_page(direction="down", amount="page", context=None) - Scroll the page
• execute_javascript(script, context=None) - Run JavaScript code on the page

Tab Management

• create_new_tab(url=None, context=None) - Create a new browser tab
• switch_tab(tab_id, context=None) - Switch to a different tab
• list_tabs(context=None) - List all open tabs
• close_tab(tab_id=None, context=None) - Close a tab

Troubleshooting

• SSL certificate errors are automatically bypassed
• For slow page loading, adjust the timeout in browse_to() method
• If elements aren't found, verify your CSS selectors
• Unused resources are automatically cleaned up after a period of inactivity

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "web-browser" '{"command":"python","args":["/path/to/your/server.py"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "web-browser": {
            "command": "python",
            "args": [
                "/path/to/your/server.py"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "web-browser": {
            "command": "python",
            "args": [
                "/path/to/your/server.py"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect