MCP 协议集成实战：Browser Tools 插件配置指南

环境准备

先确认本地已安装 Python 和 Node.js。接着在合适的位置创建目录，比如文档文件夹下，然后克隆仓库。

mkdir C:\Users\Suoxd\Documents\Cline\MCP\browser-tools-mcp
cd C:\Users\Suoxd\Documents\Cline\MCP\browser-tools-mcp
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git .

注意路径要换成你实际的工作区，别直接照搬示例里的用户目录。

服务安装与启动

进入项目目录后，安装依赖并启动服务。这里用的是 v1.2.0 版本，具体命令如下：

npm install @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
npx @agentdeskai/[email protected]

如果不确定怎么配，可以参考官方文档的说明。安装过程中留意终端输出，确保没有报错。

浏览器插件配置

接下来需要把对应的浏览器扩展装到 Chrome 或 Edge 里。下载链接在这里：

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

解压后拖入浏览器的扩展管理页面即可启用。

Cline 集成设置

最后一步是在 Cline 里配置 MCP 服务。修改配置文件，添加 browser-tools-mcp 的配置项。关键是把 command 指向你的服务器脚本路径。

{
  "browser-tools-mcp": {
    "command": "node",
    "args": ["d:/Suo/code/tmp-AI/browser-tools-mcp/browser-tools-mcp/dist/mcp-server.js"],
    "disabled": false,
    "autoApprove": []
  }
}

记得把 args 里的路径改成你实际存放项目的绝对路径，不然服务启动会找不到文件。

效果验证

配置完成后重启 IDE，打开浏览器端调试工具，应该能看到新增的插件页面。这时候就可以通过 MCP 协议调用浏览器能力了。