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"


