MCP 插件实战：browser-tools-mcp 接入与配置指南

MCP 服务配置实战

在构建 AI 辅助开发环境时，MCP（Model Context Protocol）插件能显著提升工具链的交互能力。这里以 browser-tools-mcp 为例，分享一套完整的本地接入方案。

1. 环境准备

首先确保本地已安装 Node.js 和 Git。这是运行后续脚本的基础，没有这两个工具，服务无法启动。

建议创建一个专门的工作目录，例如 Documents/Cline/MCP，然后拉取项目代码：

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 用户请根据实际路径调整 mkdir 命令，或者直接使用 PowerShell 执行。

2. 安装与服务启动

进入项目目录后，使用 npm 安装依赖包。为了稳定性，建议指定具体版本号：

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

如果网络环境受限，可以查阅官方文档获取镜像源或替代下载方式。

![截图：服务启动成功日志]

3. 浏览器插件配置

MCP 服务需要配合浏览器扩展才能发挥最大作用。从发布页下载对应版本的插件压缩包：

下载地址

将插件加载到浏览器开发者模式或普通模式下，界面会显示调试面板入口。

![截图：浏览器插件安装完成界面]

4. Cline 服务集成

最后一步是将服务注册到 Cline 配置中。打开配置文件，添加如下 JSON 片段：

{
  "browser-tools-mcp": {
    "command": "node",
    "args": ["你的项目路径/dist/mcp-server.js"],
    "disabled": false,
    "autoApprove": []
  }
}

请将 args 中的路径替换为你实际的绝对路径。确保 command 指向正确的 node 可执行文件。

5. 效果验证

配置完成后，重启 Cline 服务。在浏览器端应该能看到新增的调试工具页面，此时即可通过自然语言调用浏览器能力了。

![截图：浏览器端调试工具页面]

![截图：插件功能正常响应]

![截图：最终交互效果展示]