浏览器工具MCP
使您的AI工具的感知能力提高10倍，并能够与浏览器进行交互
该应用程序是一个强大的浏览器监控和交互工具，它使人工智能驱动的应用程序能够通过Anthropic的模型上下文协议（MCP）通过Chrome扩展程序捕获和分析浏览器数据。
阅读我们的 文档 有关完整安装、快速入门和贡献指南。
路线图
在这里查看我们的项目路线图：
更新
v1.2.0已经发布！以下是更新的快速分解：
- 现在，您可以在DevTools面板中启用“允许自动粘贴到光标中”。屏幕截图将自动粘贴到游标中（只需确保聚焦/单击游标中的代理输入字段，否则它将无法工作！）
- 通过Lighthouse集成了一套SEO、性能、可访问性和最佳实践分析工具
- 实现了一个NextJS特定的提示，用于改进NextJS应用程序的SEO
- 添加了调试器模式，作为一种按特定顺序执行所有调试工具的工具，以及一个改进推理的提示
- 添加了审计模式，作为按特定顺序执行所有审计工具的工具
- 已解决Windows连接问题
- 通过主机/端口自动发现、自动重新连接和优雅关闭机制，改进了BrowserTools服务器、扩展和MCP服务器之间的网络连接
- 添加了使用Ctrl+C更容易退出浏览器工具服务器的功能
快速入门指南
运行此MCP工具有三个组件：
- 从这里安装我们的chrome扩展： v1.2.0浏览器工具MCP Chrome扩展程序
- 在IDE中通过以下命令安装MCP服务器：
npx @agentdeskai/browser-tools-mcp@latest - 打开一个新终端并运行以下命令：
npx @agentdeskai/browser-tools-server@latest
- 不同的IDE有不同的配置，但此命令通常是一个很好的起点；请参考IDE文档以了解正确的配置设置
重要提示-您需要安装两台服务器。有。。。
- 浏览器工具服务器（本地nodejs服务器，用于收集日志的中间件）
和
- 浏览器工具mcp（安装到IDE中的mcp服务器，与扩展+浏览器工具服务器通信）
npx @agentdeskai/browser-tools-mcp@latest 是您放入IDE中的内容 npx @agentdeskai/browser-tools-server@latest 是您在新终端窗口中运行的内容
完成这三个步骤后，打开chrome开发工具，然后打开BrowserToolsMCP面板。
如果您仍然有问题，请尝试以下步骤：
- 退出/关闭浏览器。不仅仅是窗口，还有Chrome本身。
- 重新启动本地节点服务器（浏览器工具服务器）
- 确保你只打开了一个chrome开发工具面板实例
在那之后，它应该会起作用，但如果它不让我知道，我可以分享更多步骤来收集有关该问题的日志/信息！
如果您有任何疑问或问题，请随时打开问题单！如果您有任何改进的想法，请随时联系或打开带有增强标签的问题单，或通过以下方式联系我 @x上的tedx_ai
完整更新说明：
像Cursor这样的编码代理可以无缝地对当前页面运行这些审计。通过利用Puppeteer和Lighthouse npm库，BrowserTools MCP现在可以：
- 评估WCAG合规性页面
- 识别性能瓶颈
- 标记页面上的SEO问题
- 检查是否遵守web开发最佳实践
- 查看NextJS与SEO的具体问题
…无需离开IDE即可完成所有操作🎉
______________________________________________________________________
🔑 主要新增内容
| 审核类型 | 说明 |
|---|---|
| 无障碍 | WCAG兼容检查颜色对比度、缺失alt文本、键盘导航陷阱、ARIA属性等。 |
| 演出 | 灯塔驱动的渲染阻塞资源分析、DOM大小过大、未优化的图像以及影响页面速度的其他因素。 |
| 搜索引擎优化 | 评估页面上的SEO因素（如元数据、标题和链接结构），并提出改进建议，以提高搜索可见性。 |
| 最佳实践 | 检查web开发中的一般最佳实践。 |
| 下一篇JS审计 | 注入用于执行NextJS审核的提示。 |
| 审计模式 | 按顺序运行所有审核工具。 |
| 调试器模式 | 按顺序运行所有调试工具。 |
______________________________________________________________________
🛠️ 使用审计工具
✅ 开始之前
确保您拥有：
- 一 活动选项卡 在您的浏览器中
- 这 BrowserTools扩展已启用
▶️ 运行审核
无头浏览器自动化:\ Puppeteer自动化了一个无头Chrome实例来加载页面并收集审计数据，即使对于通过JavaScript加载的SPA或内容，也能确保准确的结果。
无头浏览器实例保持活动状态 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)
按特定顺序运行所有调试工具
查询示例： - “进入调试器模式。”
建筑
有三个核心组件都用于捕获和分析浏览器数据：
- Chrome 扩展：一个捕获屏幕截图、控制台日志、网络活动和DOM元素的浏览器扩展。
- 节点服务器：一个中间服务器，促进Chrome扩展程序和MCP服务器的任何实例之间的通信。
- MCP服务器：模型上下文协议服务器，为AI客户端与浏览器交互提供标准化工具。
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP Client │ ──► │ MCP Server │ ──► │ Node Server │ ──► │ Chrome │
│ (e.g. │ ◄── │ (Protocol │ ◄── │ (Middleware) │ ◄── │ Extension │
│ Cursor) │ │ Handler) │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘模型上下文协议（MCP）是人类智能模型支持的一种能力 允许您为任何兼容的客户端创建自定义工具。像Claude这样的MCP客户 Desktop、Cursor、Cline或Zed可以运行一个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等）
安装
安装步骤可以在我们的文档中找到：
用法
安装和配置后，系统允许任何兼容的MCP客户端：
- 监控浏览器控制台输出
- 捕获网络流量
- 截图
- 分析所选元素
- 擦除存储在我们MCP服务器中的日志
- 运行可访问性、性能、SEO和最佳实践审核
兼容性
- 适用于任何MCP兼容客户端
- 主要设计用于Cursor IDE集成
- 支持其他AI编辑器和MCP客户端