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
IntermediateEstimated 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
Editclaude_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.
Additional Resources
Author Information
36
Followers
1
Repositories
0
Gists
0
Total Contributions
Related MCPs
A Model Context Protocol (MCP) that allows Claude Desktop and other AI tools (GitHub Copilot, Cursor, etc.) to interact directly with Figma
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.