跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.jsAI大前端

MCP 插件配置实战:browser-tools-mcp 集成指南

MCP 插件配置实战:browser-tools-mcp 集成指南。详细演示了从环境搭建、服务启动到 Cline 配置的全流程,重点解决了浏览器调试工具与 AI 代理的对接问题。通过 npm 安装依赖并配置本地服务器,结合浏览器扩展实现页面交互能力,最终在 Cline 中启用自动批准策略,完成 MCP 协议下的功能集成。

DotNetGuy发布于 2026/3/16更新于 2026/10/2288 浏览
MCP 插件配置实战:browser-tools-mcp 集成指南

环境准备

首先确保本地已安装 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 .

安装与服务启动

进入项目目录后,使用 npm 安装依赖包并启动服务。注意版本匹配,这里以 1.2.0 为例。

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

官方安装文档提供了更详细的说明,可参考 Browser Tools 安装指南。

步骤截图

步骤截图

步骤截图

步骤截图

步骤截图

步骤截图

浏览器插件配置

下载并安装对应的浏览器扩展程序,版本需与服务器保持一致。

下载地址:BrowserTools-1.2.0-extension.zip

插件安装

Cline 服务配置

在 Cline 的配置文件中添加 MCP 服务定义。关键参数包括命令、参数列表以及自动批准策略。

{
  "browser-tools-mcp": {
    "command": "node"
     
      
    
     
     
  

,
"args"
:
[
"<project_path>/browser-tools-mcp/dist/mcp-server.js"
]
,
"disabled"
:
false
,
"autoApprove"
:
[
]
}
}

请将 <project_path> 替换为实际的项目绝对路径。

验证结果

配置完成后,重启 Cline 服务。检查浏览器端是否增加了调试工具页面,通常会在侧边栏看到新的入口图标。

最终效果

最终效果

最终效果

目录

  1. 环境准备
  2. 安装与服务启动
  3. 浏览器插件配置
  4. Cline 服务配置
  5. 验证结果

更多推荐文章

查看全部
  • AIGC 与现代教育技术
  • 滑动窗口算法实战:串联所有单词的子串与最小覆盖子串解析
  • Python 自学完整学习路线:从基础语法到项目实战指南
  • C/C++编译成共享库(.so)完整流程与动态链接解析
  • AI Skills:前端开发的新效率工具
  • HTTPDNS 原理与落地实践
  • DeepSeek R1 开源模型引发全球复现热潮与技术解析
  • Min-Max 归一化算法实例解析
  • Vitis 使用教程:从零实现 AI 模型 FPGA 部署
  • Pix4Dmapper 处理大疆无人机影像数据实战指南
  • 2025 年智能机器人操作系统(AGIROS)开源社区生态大会
  • 特征学习理论框架:深度解析单模态与多模态对比学习泛化差异
  • 大模型应用开发入门:GPT-4 与 ChatGPT 高级技巧实战
  • STL 底层揭秘:map/set 如何封装红黑树及迭代器实现
  • 前端面试题精选:闭包、事件循环与 Vue 核心原理
  • 37 个 Python Web 开发框架整理与选型指南
  • C++条件判断、循环与数组详解
  • OpenClaw 记忆系统实战:Token 压缩与双层记忆架构
  • HDFS 核心组件深度解析:分布式文件系统架构
  • AI 对话高效指令攻略:角色设定与需求引导

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online