浏览器工具 MCP

让你的 AI 工具具备 10 倍的感知能力，并能与浏览器进行交互

该应用程序是一个强大的浏览器监控和交互工具，它使 AI 驱动的应用程序能够通过 Anthropic 的模型上下文协议 (MCP) 通过 Chrome 扩展程序捕获和分析浏览器数据。

阅读我们的文档以获取完整的安装、快速入门和贡献指南。

路线图

在这里查看我们的项目路线图： Github 路线图/项目板

更新

v1.2.0 现已发布！以下是更新的简要说明：

• 您现在可以在 DevTools 面板中启用“允许自动粘贴到 Cursor”功能。屏幕截图将自动粘贴到 Cursor 中（请确保将焦点/点击到 Cursor 中的 Agent 输入字段，否则将无法使用！）
• 通过 Lighthouse 集成了一套 SEO、性能、可访问性和最佳实践分析工具
• 实现了 NextJS 特定的提示，用于改善 NextJS 应用程序的 SEO
• 添加了调试器模式，该模式以特定顺序执行所有调试工具，并提示改进推理
• 添加审计模式作为按特定顺序执行所有审计工具的工具
• 解决了 Windows 连接问题
• 改进了 BrowserTools 服务器、扩展程序和 MCP 服务器之间的网络连接，具有主机/端口自动发现、自动重新连接和正常关机机制
• 增加了使用 Ctrl+C 更轻松地退出浏览器工具服务器的功能

快速入门指南

运行此 MCP 工具有三个组件：

1. 从这里安装我们的 chrome 扩展程序： v1.2.0 BrowserToolsMCP Chrome 扩展程序
2. 在 IDE 中使用此命令安装 MCP 服务器： npx @agentdeskai/browser-tools-mcp@latest
3. 打开一个新终端并运行此命令： npx @agentdeskai/browser-tools-server@latest

• 不同的 IDE 有不同的配置，但这个命令通常是一个很好的起点；请参考你的 IDE 文档以获得正确的配置设置

重要提示 - 您需要安装两台服务器。分别是……

• browser-tools-server（本地 nodejs 服务器，用于收集日志的中间件）和
• browser-tools-mcp（安装到 IDE 中的 MCP 服务器，用于与扩展程序 + browser-tools-server 进行通信）

npx @agentdeskai/browser-tools-mcp@latest是你放入 IDE 的内容npx @agentdeskai/browser-tools-server@latest是你在新终端窗口中运行的内容

完成这三个步骤后，打开 chrome dev tools，然后打开 BrowserToolsMCP 面板。

如果仍有问题，请尝试以下步骤：

• 退出/关闭浏览器。不仅仅是窗口，而是整个 Chrome 浏览器。
• 重启本地节点服务器（browser-tools-server）
• 确保只打开了一个 chrome dev tools 面板实例

之后它应该可以工作，但如果它没有让我知道，我可以分享更多步骤来收集有关该问题的日志/信息！

如果你有任何疑问或问题，欢迎随时提交问题单！如果你有任何改进建议，欢迎随时联系我们，提交带有增强标签的问题单，或者通过 x 联系我 @tedx_ai

完整更新说明：

像 Cursor 这样的代码代理可以无缝地针对当前页面运行这些审核。通过利用 Puppeteer 和 Lighthouse npm 库，BrowserTools MCP 现在可以：

• 评估页面是否符合 WCAG 标准
• 识别性能瓶颈
• 标记页面 SEO 问题
• 检查是否遵守 Web 开发最佳实践
• 审查 NextJS 与 SEO 相关的特定问题

...所有这些都无需离开你的 IDE 🎉

🔑 主要新增内容

🛠️ 使用审计工具

✅开始之前

确保您已：

• 浏览器中的活动选项卡
• 已启用 BrowserTools 扩展

▶️运行审计

无头浏览器自动化：
Puppeteer 自动化无头 Chrome 实例来加载页面并收集审计数据，确保即使对于 SPA 或通过 JavaScript 加载的内容也能获得准确的结果。

无头浏览器实例在最后一次审计调用后保持活动状态60 秒，以有效处理连续的审计请求。

结构化结果：
每次审计都会以结构化的 JSON 格式返回结果，包括总体评分和详细问题列表。这使得兼容 MCP 的客户端能够轻松解读审计结果并提供切实可行的见解。

MCP 服务器提供了在当前页面上运行审核的工具。以下是可用于触发审核的示例查询：

无障碍审计（ runAccessibilityAudit ）

确保页面符合 WCAG 等可访问性标准。

示例查询：

• “此页面是否存在任何可访问性问题？”
• “运行可访问性审核。”
• “检查此页面是否符合 WCAG 标准。”

绩效审计（ runPerformanceAudit ）

识别性能瓶颈和加载问题。

示例查询：

• “为什么这个页面加载这么慢？”
• “检查此页面的性能。”
• “进行绩效审计。”

SEO 审计（ runSEOAudit ）

评估页面针对搜索引擎的优化程度。

示例查询：

• “我该如何改进这个页面的 SEO？”
• “运行 SEO 审核。”
• “检查此页面的 SEO。”

最佳实践审计（ runBestPracticesAudit ）

检查 Web 开发中的一般最佳实践。

示例查询：

• “进行最佳实践审核。”
• “查看此页面上的最佳实践。”
• “此页面上是否存在任何最佳实践问题？”

审核模式（ runAuditMode ）

按特定顺序运行所有审核。如果检测到框架，则会运行 NextJS 审核。

示例查询：

• “运行审核模式。”
• “进入审核模式。”

NextJS 审计（ runNextJSAudit ）

检查 NextJS 应用程序的最佳实践和 SEO 改进

示例查询：

• “运行 NextJS 审核。”
• “运行 NextJS 审核，我正在使用应用路由器。”
• “运行 NextJS 审核，我正在使用页面路由器。”

调试器模式（ runDebuggerMode ）

按特定顺序运行所有调试工具

示例查询：

• “进入调试器模式。”

建筑学

有三个核心组件均用于捕获和分析浏览器数据：

1. Chrome 扩展程序：捕获屏幕截图、控制台日志、网络活动和 DOM 元素的浏览器扩展程序。
2. 节点服务器：一个中介服务器，用于促进 Chrome 扩展程序和任何 MCP 服务器实例之间的通信。
3. MCP 服务器：模型上下文协议服务器，为 AI 客户端与浏览器交互提供标准化工具。

模型上下文协议 (MCP) 是 Anthropic AI 模型支持的一项功能，允许您为任何兼容的客户端创建自定义工具。Claude Desktop、Cursor、Cline 或 Zed 等 MCP 客户端可以运行 MCP 服务器，该服务器会“教导”这些客户端如何使用新工具。

这些工具可以调用外部 API，但在我们的方案中，所有日志都存储在您的本地计算机上，绝不会发送给任何第三方服务或 API。BrowserTools MCP 运行一个 NodeJS API 服务器的本地实例，该服务器与 BrowserTools Chrome 扩展程序进行通信。

BrowserTools MCP 服务器的所有使用者都使用相同的 NodeJS API 和 Chrome 扩展程序进行交互。

Chrome 扩展程序

• 监控 XHR 请求/响应和控制台日志
• 跟踪选定的 DOM 元素
• 将所有日志和当前元素发送到 BrowserTools 连接器
• 连接到 Websocket 服务器来捕获/发送屏幕截图
• 允许用户配置令牌/截断限制+屏幕截图文件夹路径

节点服务器

• 充当 Chrome 扩展程序和 MCP 服务器之间的中间件
• 从 Chrome 扩展程序接收日志和当前选定的元素
• 处理来自 MCP 服务器的请求以捕获日志、屏幕截图或当前元素
• 向 Chrome 扩展程序发送 Websocket 命令以捕获屏幕截图
• 智能截断日志中的字符串和重复对象数量以避免令牌限制
• 删除 cookie 和敏感标头以避免发送到 MCP 客户端中的 LLM

MCP 服务器

• 实现模型上下文协议
• 为AI客户提供标准化工具
• 与各种 MCP 客户端兼容（Cursor、Cline、Zed、Claude Desktop 等）

安装

安装步骤可以在我们的文档中找到：

• BrowserTools MCP 文档

用法

安装和配置完成后，系统允许任何兼容的 MCP 客户端：

• 监视浏览器控制台输出
• 捕获网络流量
• 截取屏幕截图
• 分析选定元素
• 擦除存储在我们的 MCP 服务器中的日志
• 运行可访问性、性能、SEO 和最佳实践审核

兼容性

• 适用于任何兼容 MCP 的客户端
• 主要为 Cursor IDE 集成而设计
• 支持其他 AI 编辑器和 MCP 客户端