小贴士:按下Ctrl+D 或 ⌘+D,一键收藏本站,方便下次快速访问!
17
最近更新:1个月前

Cline 浏览器-使用 MCP

浏览器使用服务器

smithery 徽章

这是一个用于浏览器自动化的 Model Context Protocol 服务器,使用 Python 脚本实现。适用于与 Cline 配合使用。

Browser Use Server MCP server

功能

浏览器操作

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

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

先决条件

  1. (可选但推荐)安装 Xvfb 以进行无头浏览器自动化:
bash 复制代码
# 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 Virtual Frame Buffer)创建一个虚拟显示,允许浏览器自动化而不会被检测为机器人。了解更多关于 Xvfb 的信息 这里

  1. 安装 Miniconda 或 Anaconda
  2. 创建 Conda 环境:
bash 复制代码
conda create -n browser-use python=3.11
conda activate browser-use
pip install browser-use
  1. 设置 LLM 配置:

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

bash 复制代码
# 必须:设置至少一个 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:

bash 复制代码
npx -y @smithery/cli install @ztobs/cline-browser-use-mcp --client claude
  1. 克隆此存储库
  2. 安装依赖项:
bash 复制代码
npm install
  1. 构建服务器:
bash 复制代码
npm run build

MCP 配置

将以下配置添加到你的 Cline MCP 设置中:

json 复制代码
"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 密钥

使用方法

运行服务器:

bash 复制代码
node build/index.js

服务器将在 stdio 上可用,并支持以下操作:

截图

参数:

  • url: 网页 URL(必需)
  • full_page: 是否捕获全页或仅视口(可选,默认:false)
  • steps: 逗号分隔的操作或句子,描述页面加载后要采取的步骤(可选)

获取 HTML

参数:

  • url: 网页 URL(必需)
  • steps: 逗号分隔的操作或句子,描述页面加载后要采取的步骤(可选)

执行 JavaScript

参数:

  • url: 网页 URL(必需)
  • script: 要执行的 JavaScript 代码(必需)
  • steps: 逗号分隔的操作或句子,描述页面加载后要采取的步骤(可选)

获取控制台日志

参数:

  • url: 网页 URL(必需)
  • steps: 逗号分隔的操作或句子,描述页面加载后要采取的步骤(可选)

示例 Cline 使用

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

开发期间修改网页元素

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

复制代码
将文本为 "Alle Foren im Überblick." 的标题颜色更改为深蓝色,网址为 https://localhost:3000/foren/ 页面

要查看/检查页面,请使用 browser-use MCP 服务器来执行以下操作:
打开 https://localhost:3000/auth,
使用 ztobs:Password123 登录,
导航到 https://localhost:3000/foren/,
如果需要接受 Cookie

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

此任务演示了:

  • 使用逗号分隔的步骤进行多步浏览器自动化
  • 处理身份验证
  • 接受 Cookie
  • 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 进行调试:

bash 复制代码
npm run inspector

引用

复制代码
@software{browser_use2024,
  author = {Müller, Magnus and Žunič, Gregor},
  title = {Browser Use: Enable AI to control your browser},
  year = {2024},
  publisher = {GitHub},
  url = {https://github.com/browser-use/browser-use}
}

许可证

MIT