安装环境要求

• Node版本要求：v16.0.0 及以上（推荐LTS版本，如v18.x、v20.x）；

使用教程

第一步下载browser-tools-mcp

说明：browser-tools-mcp文件夹说明

• browser-tools-mcp里面一共有3个文件夹
  - 第一个文件夹browser-tools-mcp，安装到 IDE 中的 MCP 服务器，用于与扩展程序 + browser-tools-server 进行通信。
  - 第二个文件夹browser-tools-server，本地 nodejs 服务器，用于收集日志的中间件。
  - 第三个文件夹chrome-extension，拓展程序

• 拉取mcp仓库到本地
• 跳转到browser-tools-mcp仓库地址下载
• git拉取：

git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

第二步安装扩展程序

说明：上面第一步里面说明里面说了拉取的browser-tools-mcp里面一共有三个文件夹，chrome-extension文件夹就是其中一个，这个就是扩展程序，直接拖到扩展程序里面即可。

• 1、将chrome-extension文件夹直接拖拽至扩展程序管理页面即可完成安装。也可以选择加载未打包的扩展程序按钮选择chrome-extension文件夹
• 2、打开浏览器的管理扩展程序，谷歌浏览器可以在地址栏输入：chrome://extensions
• 3、需要打开开发者模式

第三步运行browser-tools-mcp

这个里面有说先运行mcp的有说先运行server的，不过我觉得先运行哪一个都可以，还有这个两个的关系，为什么都要运行，我在疑问说明里面会说

(1)、运行browser-tools-mcp

• 进入到browser-tools-mcp ---> browser-tools-mcp文件夹执行npm install然后运行npm run start

cd browser-tools-mcp
npm install
npm run start

(2)、运行browser-tools-server

• 进入到browser-tools-mcp ---> browser-tools-server文件夹执行npm install然后运行npm run start

cd browser-tools-server
npm install
npm run start

第四步idea工具里面添加browser-tools-mcp

这里以cursor为例，如果需要其他编辑工具的，可以使用AI给你转换一下

{
  "mcpServers": {
    "browserTools": {
      "command": "npx",
      "args": ["@agentdeskai/browser-tools-mcp@latest"],
      "env": {
        "BROWSER_TOOLS_MCP_PORT": "3025",
        "BROWSER_TOOLS_MCP_HOST": "localhost"
      }
    }
  }
}

第五步使用

• 直接跟cursor说：使用BrowserTools MCP查看一下当前页面

一些疑问说明

browser-tools-mcp目录

安装扩展程序的两种方式图片示例

拖动chrome-extension文件夹到浏览器拓展程序页面

选择加载未打包的扩展程序按钮

检查浏览器是否生效

按下f12查看，如果是红色的表示未生效，绿色的成功生效

mcp效果

可以先重新启动一下浏览器，和编辑工具，然后再问一下AI

为什么运行npm run start？

为什么需要同时运行mcp和serve两个呢？

以下纯AI回答的，但是我觉得回答的很好，其实只运行serve也行，但是这样问AI执行的时候，不会运行高阶命令

“browser-tools-mcp” 和 “browser-tools-server” 的作用及“需同时运行”的原因，需从项目分层架构与功能协作逻辑拆解：

“browser-tools-mcp” 的核心作用

它是项目的 “浏览器侧能力载体”，聚焦浏览器环境内的工具逻辑与 MCP 协议对接，可理解为「AI 指令在浏览器里的“执行器”」：

• 功能定位：
  • 封装浏览器原生能力（如标签页管理、DOM 操作、网络请求拦截），将其转化为 MCP 协议可识别的“工具动作”（让 AI 能通过 MCP 协议调用浏览器功能）；
  • 作为「浏览器 ↔ MCP 服务器」的中间层：接收 AI 工具（如 Cursor）通过 MCP 协议下发的指令（如“执行 JavaScript 代码”“捕获控制台日志”），在浏览器上下文执行后，把结果回传给 MCP 服务器；
  • 可能联动 Chrome 扩展：通过扩展注入脚本、监听浏览器事件，实现更细粒度的页面交互（如自动填充表单、模拟点击）。

“browser-tools-server” 的核心作用

它是项目的 “后端业务大脑”，聚焦复杂逻辑处理、数据聚合与跨模块协同，可理解为「AI 指令的“调度中心”」：

• 功能定位：
  • 处理 MCP 服务器转发的高阶请求：比如调度 Lighthouse 审计任务、编排多步骤自动化流程（如“先截图 → 再分析 DOM → 最后生成报告”）；
  • 管理会话状态：记录不同标签页的调试上下文（如当前打开的页面 URL、AI 对话历史），确保多轮交互的连贯性；
  • 对接外部服务：调用 Lighthouse API 完成网页性能审计、将审计报告存储至本地/云端；
  • 作为“后端枢纽”：协调
    “browser-tools-mcp”（浏览器端）与 AI 客户端（如 Cursor）的通信，保障指令流转和结果反馈的稳定性。

3. 为什么教程要求“两个都需要运行”？

这是由项目的分层协作架构决定的——
“browser-tools-mcp” 是「前端感知层」，
“browser-tools-server” 是「后端逻辑层」，二者缺一不可：

• 若只运行
  “browser-tools-mcp”：浏览器能捕获事件、执行基础指令（如打印日志），但无法处理高阶任务（如 Lighthouse 审计需后端调度资源）、跨会话状态会失效（每次打开新标签页，AI 无法识别历史上下文），且无法与 AI 客户端建立稳定 MCP 连接（MCP 协议需后端服务器中转消息）。
• 若只运行
  “browser-tools-server”：后端有业务逻辑，但无“前端触手”——所有依赖浏览器实时交互的功能（如元素检查、网络请求监控、DOM 操作）会完全失效（因为没有“执行层”在浏览器里干活）。

简单总结

“browser-tools-mcp” 是「浏览器里的执行者」，负责落地 AI 指令；
“browser-tools-server” 是「后端的指挥官」，负责统筹复杂任务。教程要求同时运行，是为了让 “前端交互能力”与“后端业务逻辑”形成完整闭环，确保工具链的所有功能（实时监控、自动化审计、自定义脚本等）都能正常运转～