MCP 插件配置实战：browser-tools-mcp 集成指南

1. 环境准备

首先确保系统已安装 Node.js。创建项目目录并克隆官方仓库，建议将路径设置在便于管理的文档目录下。

mkdir -p ~/Documents/Cline/MCP/browser-tools-mcp
cd ~/Documents/Cline/MCP/browser-tools-mcp
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git .

2. 安装与服务启动

进入目录后安装依赖并启动服务。注意版本匹配，这里以 v1.2.0 为例。实际运行时请根据网络情况调整镜像源。

npm install @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
# 或者直接运行主程序
npx @agentdeskai/[email protected]

详细安装步骤可参考官方文档。服务启动后，控制台应显示监听状态。 ![截图：服务启动日志] ![截图：控制台输出]

3. 浏览器插件配置

下载并安装对应的浏览器扩展包。解压后加载到浏览器的扩展管理页面即可启用。

https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip

![截图：扩展安装界面]

4. Cline 服务配置

在 Cline 的配置文件中添加如下 MCP 服务定义。请根据实际路径修改 args 中的脚本位置，确保指向正确的 dist/mcp-server.js。

{
  "browser-tools-mcp": {
    "command": "node",
    "args": ["<your_path>/browser-tools-mcp/dist/mcp-server.js"],
    "disabled": false,
    "autoApprove": []
  }
}

5. 验证与效果

配置完成后，重启 Cline。浏览器端应能识别新增的调试工具面板，此时 AI 代理即可通过 MCP 协议调用浏览器能力，实现自动化操作。