MCP 工具集成实战：browser-tools-mcp 配置与使用

MCP 工具集成实战：browser-tools-mcp 配置与使用

最近在使用 Cline 进行开发时，发现配合 browser-tools-mcp 能显著提升浏览器端的交互效率。这里分享一下具体的配置步骤，避免踩坑。

环境准备

首先确保本地已安装好基础运行环境。我们需要 Python 和 Node.js，同时需要 Git 来拉取代码。

# 确认环境版本
python --version
node --version
git --version

安装 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 .

进入目录后，安装对应的依赖包。注意版本号要匹配官方文档。

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

提示：如果网络不稳定，可以查阅 官方安装文档 获取镜像源信息。

浏览器插件配置

服务端跑起来后，还需要在浏览器侧安装对应的扩展程序。从发布页下载 zip 包并加载到 Chrome 开发者模式即可。

[图片：浏览器插件安装界面]

[图片：插件启用状态]

[图片：插件图标显示]

Cline 服务配置

最后一步是在 Cline 的配置文件中添加 MCP 服务的定义。根据你的实际路径修改 args 中的绝对路径。

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