客户端浏览器使用mcp

Name: 客户端浏览器使用mcp
Author: ztobs

作者：ztobs20 星标更新：2025-04-28

安装使用来源：spider==github.com

项目介绍

浏览器使用服务器

这是一个使用Python脚本进行浏览器自动化的Model Context Protocol服务器，适用于Cline。

特性

浏览器操作

screenshot: 捕获网页的截图（全页或视口）
get_html: 获取网页的HTML内容
execute_js: 在网页上执行JavaScript
get_console_logs: 获取网页的控制台日志

所有操作在页面加载后支持自定义交互步骤（例如点击元素、滚动）。

预备条件

（可选但推荐）安装Xvfb用于无头浏览器自动化：

# Ubuntu/Debian
sudo apt-get install xvfb

# CentOS/RHEL
sudo yum install xorg-x11-server-Xvfb

# Arch Linux
sudo pacman -S xorg-server-xvfb

Xvfb（X虚拟帧缓冲区）创建一个虚拟显示，允许浏览器自动化而不被检测为机器人。更多关于Xvfb的信息，请参阅这里。

安装Miniconda或Anaconda
创建Conda环境：

conda create -n browser-use python=3.11
conda activate browser-use
pip install -r requirements.txt

设置LLM配置：

该服务器支持多个LLM提供商。您可以使用以下任意API密钥：

# 必需：至少设置其中一个API密钥
export GLHF_API_KEY=your_api_key
export GROQ_API_KEY=your_api_key
export OPENAI_API_KEY=your_api_key
export OPENROUTER_API_KEY=your_api_key
export GITHUB_API_KEY=your_api_key
export DEEPSEEK_API_KEY=your_api_key
export GEMINI_API_KEY=your_api_key
export OLLAMA_API_KEY=your_api_key

# 可选：覆盖默认配置
export MODEL=your_preferred_model  # 覆盖默认模型
export BASE_URL=your_custom_url    # 覆盖默认API端点
export USE_VISION=false  # 启用/禁用视觉能力（默认：false）

服务器会自动使用找到的第一个可用API密钥。您可以通过环境变量自定义任何提供商的模型和基础URL。

安装

通过Smithery安装

要通过Smithery自动安装Browser Use Server for Claude Desktop：

npx -y @smithery/cli install @ztobs/cline-browser-use-mcp --client claude

将此仓库克隆到/home/YOUR_HOME/Documents/Cline/目录
安装依赖项：

npm install

构建服务器：

npm run build

MCP配置

将以下配置添加到您的Cline MCP设置中：

"browser-use": {
  "command": "node",
  "args": [
    "/home/YOUR_HOME/Documents/Cline/MCP/browser-use-server/build/index.js"
  ],
  "env": {
    // 必需：至少设置一个API密钥
    "GLHF_API_KEY": "your_api_key",
    "GROQ_API_KEY": "your_api_key",
    "OPENAI_API_KEY": "your_api_key",
    "OPENROUTER_API_KEY": "your_api_key",
    "GITHUB_API_KEY": "your_api_key",
    "DEEPSEEK_API_KEY": "your_api_key",
    "GEMINI_API_KEY": "your_api_key",
    "OLLAMA_API_KEY": "your_api_key",
    // 可选：配置覆盖
    "MODEL": "your_preferred_model",
    "BASE_URL": "your_custom_url",
    "USE_VISION": "false"
  },
  "disabled": false,
  "autoApprove": []
}

替换：

YOUR_HOME为您实际的主目录名称
your_api_key为您实际的API密钥

使用方法

运行服务器：

node build/index.js

服务器将在标准I/O上可用，并支持以下操作：

截图

参数：

url: 网页URL（必需）
full_page: 是否捕获全页还是仅视口（可选，默认：false）
steps: 页面加载后执行的逗号分隔动作或步骤描述（可选）

获取HTML

参数：

url: 网页URL（必需）
steps: 页面加载后执行的逗号分隔动作或步骤描述（可选）

执行JavaScript

参数：

url: 网页URL（必需）
script: 要执行的JavaScript代码（必需）
steps: 页面加载后执行的逗号分隔动作或步骤描述（可选）

获取控制台日志

参数：

url: 网页URL（必需）
steps: 页面加载后执行的逗号分隔动作或步骤描述（可选）

示例Cline使用

这里是一些可以使用browser-use服务器与Cline完成的任务示例：

开发期间修改网页元素

要更改需要身份验证的页面上的标题颜色：

将https://localhost:3000/foren/页面上文本为"Alle Foren im Überblick."的标题颜色更改为深蓝色

为了检查/查看页面，请使用browser-use MCP服务器：
打开https://localhost:3000/auth，
使用ztobs:Password123登录，
导航至https://localhost:3000/foren/，
如果需要接受cookies

提示：使用多个逗号分隔步骤在一个命令中执行所有浏览器操作

此任务演示了：

使用逗号分隔步骤的多步浏览器自动化
身份验证处理
接受cookies
DOM操作
CSS样式更改

服务器将按顺序执行这些步骤，并处理所需的任何交互。

配置

LLM配置

服务器支持多个LLM提供商及其默认配置：

GLHF：使用deepseek-ai/DeepSeek-V3模型
Ollama：使用qwen2.5:32b-instruct-q4_K_M模型，具有32k上下文窗口
Groq：使用deepseek-r1-distill-llama-70b模型
OpenAI：使用gpt-4o-mini模型
Openrouter：使用deepseek/deepseek-chat模型
Github：使用gpt-4o-mini模型
DeepSeek：使用deepseek-chat模型
Gemini：使用gemini-2.0-flash-exp模型

您可以使用环境变量覆盖这些默认值：

MODEL: 为任何提供商设置自定义模型名称
BASE_URL: 设置自定义API端点URL（如果提供商支持）

视觉支持

服务器通过USE_VISION环境变量支持视觉能力：

设置USE_VISION=true以启用浏览器操作的视觉能力
默认为false，当不需要视觉时优化性能
对于需要理解网页内容视觉的任务很有用

Xvfb支持

服务器自动检测是否安装了Xvfb，并：

当可用时使用xvfb-run，实现更好的无头浏览器自动化而不会被检测为机器人
当未安装Xvfb时回退到直接执行
根据情况设置RUNNING_UNDER_XVFB环境变量

超时

默认超时时间为5分钟（300000毫秒）。修改build/index.js中的TIMEOUT常量来更改此设置。

错误处理

服务器提供详细的错误消息：

Python脚本执行失败
浏览器操作超时
参数无效

调试

使用MCP Inspector进行调试：

npm run inspector

使用场景

浏览器使用

许可证

MIT