MCP 插件配置实战:browser-tools-mcp 集成指南
在 AI 辅助开发中,让模型具备浏览器调试能力往往能显著提升效率。本文以 browser-tools-mcp 为例,梳理从环境准备到 Cline 集成的完整流程。整个过程基于 Node.js 生态,无需复杂依赖,适合快速落地。
1. 环境准备与仓库克隆
首先确保本地已安装 Python 和 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. 服务安装与启动
进入仓库目录后,安装依赖并启动 MCP 服务。这里直接指定版本以避免兼容性问题。
npm install @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
如果遇到问题,建议查阅官方文档确认依赖项是否完整。启动成功后,终端应显示服务监听状态。
3. 浏览器扩展加载
为了让浏览器工具正常工作,需要手动加载对应的 Chrome 扩展程序。
访问 GitHub Releases 页面下载最新版本的 .zip 包:
https://github.com/AgentDeskAI/browser-tools-mcp/releases
解压后,在 Chrome 地址栏输入 chrome://extensions/,开启右上角的开发者模式,点击'加载已解压的扩展程序',选择刚才解压的文件夹即可。
加载完成后,浏览器工具栏中会出现 BrowserTools 图标,这表示扩展已就绪。
4. Cline 服务配置
接下来需要在 Cline 的配置文件中注册该 MCP 服务。打开 Cline 的设置或配置文件(通常是 settings.json),添加如下配置项。
{
"mcpServers": {
"browser-tools-mcp": {
"command": "node",
"args": ["~/Documents/Cline/MCP/browser-tools-mcp/dist/mcp-server.js"],
"disabled"


