macOS 安装 Browser-Tools-MCP 图文速通（10 min 上手）想让 Cursor「看得见」浏览器？

想让 Cursor「看得见」浏览器？只要 开两个终端 + 装一个 Chrome 插件，就能把实时截图、DOM、Console 一键喂给 AI。下面每一步都带复制粘贴命令，照着敲即可。

一、准备环境（2 min）

Node.js ≥ 18

brew install node          # 没有 Homebrew 先去 <-URL->
node -v                    # 确认出现 v18.x.x

Chrome（正式版）
```
brew install --cask google-chrome
```
Cursor（0.45+ 已内置 MCP 面板）
直接官网下载 dmg 拖进 Applications。

二、开两个「长驻」终端（3 min）

| 终端 1 → 先跑后端（WebSocket 中转）
| 终端 2 → 再跑 MCP 前端（SSE 供 Cursor 调用）

终端 1 执行

npx @agentdeskai/browser-tools-server@latest

看到 Browser Tools Server listening on 3025 就 别关窗口。

终端 2 执行

npx @agentdeskai/browser-tools-mcp@latest

看到 Successfully discovered server at 127.0.0.1:3025 即可。
如果报 fetch failed，99% 是终端 1 没开或端口被占，先 lsof -i :3025 杀掉重来。

三、把 Cursor 接进来（1 min）

打开 Cursor → Settings → MCP → Add Server → Add Custom

粘下面 JSON → Save

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": ["@agentdeskai/browser-tools-mcp@latest"]
    }
  }
}

面板出现绿灯 ✅ 表示通道已建。

四、安装 Chrome 插件（2 min）

下载扩展包
BrowserTools-1.2.0-extension.zip
解压到 ~/browser-tools/chrome-ext
Chrome 地址栏输入 chrome://extensions → 右上角开「开发者模式」→「加载已解压」→ 选刚才文件夹
插件图标出现在地址栏右侧 → 点图标 → Connect → 填
Host: localhost
Port: 3025
显示 Connected 即可。

五、首次验证（30 s）

打开任意网页（例 <-URL->）→ F12 打开 DevTools → 顶部出现 BrowserTools 面板 → 点一下激活
回到 Cursor → Agent 输入
```
截图并告诉我当前页面标题
```
若返回 Base64 图 + 标题 = 全线打通！

六、常用 FAQ（30 s 查错）

现象	一键解决
端口被占	`lsof -i :3025` → `kill -9 <PID>`
绿灯但无图	确认 DevTools 的 BrowserTools 面板已激活
Node 版本低	`brew upgrade node` 到 ≥ 18
重启电脑后失效	只重复「二」的两条 `npx` 命令即可，插件与 Cursor 配置保留

七、一键启停脚本（可选）

把下面内容存为 ~/.btstart.sh，以后双击即跑：

#!/bin/zsh
echo "Starting Browser-Tools backend..."
npx @agentdeskai/browser-tools-server@latest &
sleep 3
echo "Starting Browser-Tools MCP..."
npx @agentdeskai/browser-tools-mcp@latest

赋可执行权限

chmod +x ~/.btstart.sh

八、总结

顺序不能反：先 server 再 mcp。
三个窗口 = 终端 1 + 终端 2 + Chrome（开着 DevTools）。
截图默认内存/Base64不落盘，需要文件自己解码即可。

完成以上步骤，你的 Cursor 就拥有了「实时视力」，结合已有的 Figma-MCP，设计稿 → 代码 → 运行效果三向同步全部搞定。祝开发愉快！