Browser Tools MCP服务器 - 开发者工具类MCP服务器 | MCP搜索

关键词

浏览器工具 Web审计性能分析可访问性测试 SEO优化

项目简介

该仓库包含一个基于Model Context Protocol (MCP) 构建的服务器实现，专注于提供与网页浏览器交互的能力。它充当LLM（大型语言模型）客户端与浏览器之间的桥梁，允许LLM访问当前网页的上下文信息、执行特定操作，如捕获截图或运行前端审计。

主要功能点

该MCP服务器主要通过暴露一系列**工具（Tools）**来提供功能，LLM客户端可以调用这些工具获取数据或执行操作：

获取控制台日志: 获取当前网页的浏览器控制台输出信息（包括日志和错误）。
获取网络日志: 获取当前网页的网络请求和响应信息（包括成功和失败的请求）。
捕获截图: 截取当前浏览器标签页的可见部分。
获取选定元素: 获取用户在浏览器开发者工具中当前选中的页面元素信息。
清除日志: 清除服务器内存中存储的浏览器日志。
运行网页审计: 执行多种前端审计，包括：
- 可访问性审计: 检查网页的可访问性问题。
- 性能审计: 分析网页的加载性能和效率。
- 最佳实践审计: 评估网页是否遵循常见的Web开发最佳实践。
- SEO审计: 检查影响搜索引擎优化的技术问题。
- NextJS SEO审计: 提供Next.js应用特有的SEO分析指导（作为Prompt内容提供给LLM）。
运行调试模式: 向LLM提供调试指导Prompt。
运行审计模式: 向LLM提供执行一系列审计工具的指导Prompt。

安装步骤

要运行此MCP服务器及其依赖，你需要 Node.js 环境以及安装相关的npm包和Chrome浏览器扩展。

安装Node.js: 如果你的系统没有安装Node.js，请先安装它（推荐使用最新LTS版本）。
安装MCP服务器和依赖包: 在终端中执行以下命令，使用npx运行已发布的包（这是教程中推荐的方式）：
```
npx @agentdeskai/[email protected]
# 这个命令会启动浏览器工具后端服务
```
MCP服务器本身 ('@agentdeskai/browser-tools-mcp') 通常由MCP客户端（如AI编码助手）根据配置自动启动，无需手动运行。
安装Chrome扩展: 根据教程指引安装对应的Chrome浏览器扩展。该扩展负责捕获浏览器数据并通过WebSocket或HTTP发送给'browser-tools-server'。

请确保 'browser-tools-server' 成功启动，并且Chrome扩展已安装并连接。

MCP客户端配置

MCP客户端（如你的AI编码助手）需要配置连接到此MCP服务器。典型的配置信息使用JSON格式，通常保存在客户端的配置文件中（例如'.mcp.json'）。

以下是根据仓库信息生成的MCP客户端配置示例所需的核心信息，请根据你的MCP客户端实际配置方式填写：

服务器名称 (name): browser-tools
启动命令 (command): npx (macOS/Linux) 或 wsl (Windows)
启动参数 (args):
- 对于macOS/Linux: '-y', '@agentdeskai/[email protected]'
- 对于Windows (使用WSL): 'bash', '-c', '"cmd /c npx -y @agentdeskai/[email protected]"'
启用状态 (enabled): true (表示客户端应启用此服务器)

这些信息告诉MCP客户端如何启动并连接到'Browser Tools MCP'。服务器启动后，会通过Stdio与客户端通信。

基本使用方法

一旦MCP客户端配置并成功连接到'Browser Tools MCP'服务器，并且Chrome扩展也在运行并连接到'browser-tools-server'，LLM就可以开始使用暴露的工具与浏览器进行交互。

例如，在支持的AI聊天界面中，LLM可能会通过内部机制调用服务器提供的工具：

当LLM需要查看浏览器控制台是否有错误时，可能会调用 'getConsoleErrors' 工具。
当LLM被指示分析当前页面外观时，可能会调用 'takeScreenshot' 工具。
当LLM被要求优化网站性能时，可能会调用 'runPerformanceAudit' 工具。

这些工具的调用是自动的，基于LLM对用户指令和当前上下文的理解。用户只需在LLM界面中提出请求（例如“检查一下控制台错误”或“对当前页面进行性能审计”），LLM客户端将负责与此MCP服务器通信并调用相应的工具。

信息

分类

开发者工具