MCP 协议实战：Browser Tools 插件集成指南
在 AI 辅助编程场景中，让模型直接操作浏览器往往需要特定的工具支持。这里以 browser-tools-mcp 为例，演示如何在 Cline 中配置该插件，实现浏览器调试工具与 AI 助手的深度集成。
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. 服务端安装与启动
进入项目目录后，使用 npm 安装依赖并启动服务。这里推荐使用指定版本以确保稳定性。
npm install @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
如果遇到问题，可以参考官方文档获取更详细的安装说明：Browser Tools Installation。
启动成功后，终端会显示服务运行状态，表明 MCP 服务器已就绪。
3. 浏览器扩展配置
为了让浏览器能够与 MCP 服务通信，需要安装对应的 Chrome 扩展程序。
下载链接：BrowserTools-1.2.0-extension.zip
安装步骤如下：
- 解压下载的
.zip文件。 - 打开 Chrome 浏览器，进入
chrome://extensions/。 - 开启右上角的'开发者模式'。
- 点击'加载已解压的扩展程序'，选择解压后的文件夹。
安装完成后，浏览器工具栏会出现 Browser Tools 的图标，表示扩展已生效。
4. Cline 服务配置
最后一步是在 Cline 的配置文件中注册这个 MCP 服务。找到你的 Cline 配置文件（通常是 settings.json 或类似位置），添加以下配置项：
"browser-tools-mcp": {
"command": "node",
"args": ["~/Documents/Cline/MCP/browser-tools-mcp/dist/mcp-server.js"],
