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

MCP 插件配置指南:以 browser-tools-mcp 为例

MCP 插件配置指南以 browser-tools-mcp 为例,涵盖环境准备、服务安装启动、浏览器插件配置及 Cline 服务配置步骤。通过 Node.js 环境搭建与 npm 包管理完成服务端部署,结合官方扩展实现浏览器调试功能集成。最终在 Cline 中启用该 MCP 工具,增强 AI 代理对浏览器操作的控制能力,提供完整的本地化开发调试解决方案。

灭霸发布于 2026/2/6更新于 2026/7/212.4K 浏览
MCP 插件配置指南:以 browser-tools-mcp 为例

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 安装依赖并启动服务。

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

参考官方文档:https://browsertools.agentdesk.ai/installation

服务端运行截图

终端输出示例

服务状态确认

日志信息

连接状态

最终效果预览

3. 浏览器插件配置

下载并安装 Browser Tools 扩展。

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

插件安装界面

4. Cline 服务配置

在 Cline 配置文件中添加以下 MCP 服务定义。

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

请将 <path> 替换为实际的项目路径。

5. 最终效果

浏览器端调试工具将增加插件页面,支持 AI 代理进行浏览器操作。

插件页面显示

调试功能展示

集成效果

目录

  1. 1. 环境配置
  2. 2. MCP 服务安装启动
  3. 3. 浏览器插件配置
  4. 4. Cline 服务配置
  5. 5. 最终效果
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • AI 民用化需要一场耐心的进化
  • 从零搭建你的第一个 AI Agent
  • Local Moondream2 案例:Stable Diffusion 提示词优化前后对比
  • Android 性能优化项目实战:一线互联网大厂开发案例合集
  • Linux 高级 IO 深入探索多路转接 select 机制
  • 鸿蒙 6.0 应用开发:仿微博文本折叠功能实现
  • 6 款免费 AI 写作软件测评:网文创作与去 AI 味工具对比
  • Flutter 三方库 Arcade 在鸿蒙端的适配与实战
  • Claude Code 平替方案:OpenCode + GitHub Copilot
  • 超越代码生成器:深度解析 Triton-Copilot 的人机协同设计哲学
  • 大模型深度解析:定义、架构与伦理挑战
  • Java 社区跑腿家政上门服务商城解决方案
  • 部署 Qwen2.5-VL-32B 踩坑实录:多卡推理 vLLM 死锁与 llama.cpp 对比
  • Python 爬虫实战:反爬攻防逻辑与分级解决方案
  • 基于 FastAPI 的 Web 上位机系统设计与实现
  • C++ STL set 与 map 底层封装原理详解
  • AI+ 低代码:医药行业数字化转型痛点与落地逻辑
  • Windows 10/11 部署 OpenClaw:环境搭建与机器人互联实战
  • Flutter 使用 React 风格库在 OpenHarmony 上的适配与实践
  • 前端金额计算:解决 JS 浮点数精度丢失与分摊问题

相关免费在线工具

  • 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