MCP 插件实战：browser-tools-mcp 配置与使用指南

MCP（Model Context Protocol）让 AI 模型能更顺畅地调用外部工具。今天以 browser-tools-mcp 为例，聊聊如何在本地搭建一套浏览器调试环境，让 AI 代理直接接管浏览器操作。

1. 环境准备

首先确保你的机器上安装了 Node.js 和 Git。为了演示方便，我们创建一个专门的目录来存放项目文件。在 Windows 下你可以参考以下路径结构，Mac/Linux 用户请根据实际习惯调整：

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 .

注意：Windows 用户若遇到路径问题，可使用 C:\Users\<用户名>\Documents\Cline\MCP\browser-tools-mcp，记得将斜杠方向统一。

2. 安装并启动服务

进入克隆好的目录后，我们需要安装依赖并启动 MCP 服务。这里使用的是官方发布的稳定版本（v1.2.0），具体命令如下：

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

如果不确定安装是否成功，可以访问官方文档确认步骤：Browser Tools Installation。

3. 配置浏览器插件

为了让 MCP 服务与浏览器通信，还需要安装对应的 Chrome 扩展程序。从 Release 页面下载插件包：

下载地址：BrowserTools-1.2.0-extension.zip

安装时选择'加载已解压的扩展程序'，指向解压后的文件夹即可。这一步完成后，浏览器侧的调试面板应该已经就绪。

4. Cline 客户端配置

最后一步是将服务注册到 Cline 中。修改你的配置文件，添加如下 JSON 片段。重点在于 command 和 args 的路径要指向你实际部署的 mcp-server.js 文件：

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

MCP 插件实战：browser-tools-mcp 配置与使用指南