MCP 插件配置实战：以 browser-tools-mcp 为例

MCP 插件配置实战：以 browser-tools-mcp 为例

在构建 AI 代理时，赋予其操作浏览器的能力往往至关重要。这里以 browser-tools-mcp 为例，演示如何将其集成到 Cline 环境中，实现本地调试工具的自动化调用。整个过程涉及环境准备、服务部署以及客户端配置，下面逐步展开。

环境准备

首先确保系统已安装 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]

官方安装文档可参考 Browser Tools Installation。

浏览器插件配置

服务端就绪后，需要加载对应的浏览器扩展。下载以下版本的插件压缩包：

Download Extension

在浏览器中加载解压后的扩展程序，界面将显示调试工具入口。

Cline 服务配置

最后一步是在 Cline 中注册该 MCP 服务。修改配置文件，添加如下配置项：

{
  "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 中的文件路径。

验证效果

配置完成后，重启 Cline 服务。浏览器端应能正常访问调试工具页面，确认通信链路已打通。

至此，MCP 插件与浏览器工具的集成即告完成。后续可根据实际需求进一步调整权限或功能模块。