浏览器工具MCP项目安装与配置指南
1. 项目基础介绍
浏览器工具MCP(BrowserTools MCP)是一个开源项目,旨在通过 Anthropic 的模型上下文协议(Model Context Protocol, MCP)使AI应用能够捕获和分析浏览器数据。本项目包含一个Chrome扩展,可以捕获浏览器的截图、控制台日志、网络活动和DOM元素。
主要编程语言:JavaScript(用于Chrome扩展和Node.js服务器)
2. 项目使用的关键技术和框架
- Chrome扩展框架:用于开发浏览器内运行的扩展程序。
- Node.js:作为中间服务器,处理Chrome扩展和MCP服务器之间的通信。
- Puppeteer:用于自动化无头Chrome实例以执行页面审计。
- Lighthouse:集成在项目中,用于执行网页性能、可访问性、最佳实践的审计。
3. 安装和配置准备工作
在开始安装之前,请确保您的系统中已经安装以下软件:
- Node.js:本项目需要Node.js环境,建议使用LTS版本。
- Git:用于克隆和操作项目代码。
- Chrome浏览器:本项目为Chrome扩展开发,需要安装Chrome浏览器。
安装步骤
克隆项目
首先,使用Git克隆项目到本地:
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git
安装依赖
进入项目目录,安装Node.js的依赖:
cd browser-tools-mcp
npm install
配置Chrome扩展
- 打开Chrome浏览器,输入
chrome://extensions/
在地址栏并进入扩展页面。 - 开启开发者模式。
- 点击“加载已解压的扩展”,选择项目中的Chrome扩展文件夹。
启动Node.js服务器
在项目目录中,运行以下命令启动Node.js服务器:
npx @agentdeskai/browser-tools-server@latest
运行MCP服务器
打开一个新的终端窗口,运行以下命令启动MCP服务器:
npx @agentdeskai/browser-tools-mcp@latest
使用Chrome扩展
- 打开Chrome的开发者工具。
- 在开发者工具中找到“BrowserToolsMCP”面板。
- 通过该面板,您可以开始使用项目提供的各种功能。
确保在整个过程中,您的浏览器、Node.js服务器和MCP服务器都是开启状态。
以上就是浏览器工具MCP项目的详细安装与配置指南。如果您在安装或配置过程中遇到任何问题,请查阅项目文档或创建问题报告。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考