mcp

Browser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browser

GitHub Stars

4,132

User Rating

Not Rated

Favorites

0

Views

6

Forks

290

Issues

87

Installation
Difficulty
Intermediate
Estimated Time
10-20 minutes
Requirements
Node.js: 18.0.0以上
npm: 8.0.0以上
+1 more

Installation

Installation

Prerequisites

Node.js: 18.0.0 or higher
npm: 8.0.0 or higher
Claude Desktop: Latest version

Installation Steps

1. Clone Repository

bash
git clone https://github.com/BrowserMCP/mcp.git
cd mcp

2. Install Dependencies

bash
npm install

3. Configure Claude Desktop

Edit claude_desktop_config.json to add the MCP server:
json
{
  "mcpServers": {
    "server-name": {
      "command": "node",
      "args": ["path/to/server.js"]
    }
  }
}

4. Start Server

bash
npm start

Troubleshooting

Common Issues

Issue: Server won't start Solution: Check Node.js version and reinstall dependencies. Issue: Not recognized by Claude Desktop Solution: Verify configuration file path and syntax.

Configuration

Configuration

Basic Configuration

Claude Desktop Setup

Edit ~/.config/claude-desktop/claude_desktop_config.json (macOS/Linux) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
json
{
  "mcpServers": {
    "tool-name": {
      "command": "npx",
      "args": ["-y", "package-name"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

Environment Variables

Set the following environment variables as needed:
bash
export API_KEY="your-api-key"
export DEBUG="true"

Advanced Configuration

Security Settings

Store API keys in environment variables or secure configuration files
Set appropriate file access permissions
Adjust logging levels

Performance Tuning

Configure timeout values
Limit concurrent executions
Set up caching

Configuration Examples

Basic Configuration

json
{
  "mcpServers": {
    "example-mcp": {
      "command": "node",
      "args": ["server.js"],
      "env": {
        "PORT": "3000",
        "LOG_LEVEL": "info"
      }
    }
  }
}

Advanced Configuration

json
{
  "mcpServers": {
    "advanced-mcp": {
      "command": "python",
      "args": ["-m", "server"],
      "cwd": "/path/to/server",
      "env": {
        "PYTHONPATH": "/path/to/modules",
        "CONFIG_FILE": "/path/to/config.json"
      }
    }
  }
}

Examples

Examples

Basic Usage

Here are basic usage examples for the MCP server:

Using with Claude Desktop

1Verify MCP Server Startup
Open Claude Desktop and confirm that the configuration has been loaded correctly.
2Execute Basic Commands

   Available tools from this MCP server:
   - tool1: Description of tool1
   - tool2: Description of tool2
   

Programmatic Usage

javascript
// JavaScript example (Node.js)
const { MCPClient } = require('@modelcontextprotocol/client');

const client = new MCPClient();
await client.connect();

// Execute tool
const result = await client.callTool('toolName', {
  parameter1: 'value1',
  parameter2: 'value2'
});

console.log(result);

Advanced Examples

Automation Script

bash
#!/bin/bash

Batch processing example

for file in *.txt; do mcp-tool process "$file" done

API Integration

python

Python example

import requests import json def call_mcp_tool(tool_name, params): response = requests.post( 'http://localhost:3000/mcp/call', json={ 'tool': tool_name, 'parameters': params } ) return response.json()

Usage example

result = call_mcp_tool('analyze', { 'input': 'sample data', 'options': {'format': 'json'} })

Use Cases

Automating data collection in the browser using VS Code.
Executing tasks to extract information from specific websites through Claude.
Using Cursor for browser-based test automation.
Enhancing productivity with multi-tab operations in the browser using Windsurf.
Author Information

36

Followers

1

Repositories

0

Gists

0

Total Contributions

Related MCPs
mcp-server-azure-devops logo

An MCP server for Azure DevOps

TypeScript
claude-talk-to-figma-mcp logo

A Model Context Protocol (MCP) that allows Claude Desktop and other AI tools (GitHub Copilot, Cursor, etc.) to interact directly with Figma

TypeScript
mcp-tasks logo

MCP Tasks is an efficient task management tool designed to minimize tool confusion and maximize LLM budget efficiency. It offers powerful search, filtering, and organization capabilities across multiple file formats, including Markdown, JSON, and YAML. Users can easily manage their tasks with its intuitive interface.

TypeScript