Cursor Browser Tools MCP

BrowserTools MCP

让你的AI工具对浏览器的交互意识和能力提升10倍

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

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

路线图

请在此查看我们的项目路线图：

更新

v1.2.0 版本已发布！以下是更新的快速概览：

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

请确保在您的集成开发环境（IDE）/MCP 客户端中更新版本，方法如下： npx @agentdeskai/browser-tools-mcp@1.2.0

同时，请确保在此处下载最新版本的Chrome扩展程序： v1.2.0 BrowserToolsMCP Chrome 扩展程序

从那里，你可以像这样运行本地节点服务器： npx @agentdeskai/browser-tools-server@1.2.0

请务必指定版本1.2.0，因为NPX缓存可能会阻止您获取最新版本！每次更新时，您只需这样做一次。一旦您这样做了，就应该会是最新版本了。

一旦你打开了Chrome开发者工具，日志就应该会发送到你的服务器上🦾

如果您有任何问题或遇到任何困难，请随时提交一个问题工单！如果您有任何改进的想法，也请随时联系我或提交一个带有增强功能标签的问题工单，或者直接联系我： @tedx_ai 在x上

完整更新说明：

像Cursor这样的编码工具可以无缝地对当前页面执行这些审核。通过利用Puppeteer和Lighthouse npm库，BrowserTools MCP现在能够：

• 评估网页是否符合WCAG标准
• 识别性能瓶颈
• 页面内SEO问题标志
• 检查是否遵循了网页开发的最佳实践
• 审查NextJS在SEO方面的特定问题

……这一切都不需要离开你的集成开发环境（IDE）🎉

______________________________________________________________________

🔑 关键补充

______________________________________________________________________

🛠️ 使用审计工具

✅ 在你开始之前

确保你已准备好：

• 一 活动标签页 在您的浏览器中
• 这个（或“该”） 已启用BrowserTools扩展

▶️ 进行审计

无头浏览器自动化:\ Puppeteer 自动化控制无头 Chrome 实例来加载页面并收集审核数据，即使对于单页应用（SPA）或通过 JavaScript 加载的内容，也能确保结果的准确性。

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

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

MCP服务器提供了工具来对当前页面进行审核。以下是一些示例查询，您可以使用它们来触发审核：

无障碍性审计runAccessibilityAudit)

确保页面符合如WCAG等无障碍标准。

示例查询： - “这个页面存在任何无障碍性问题吗？” - “进行无障碍性审计。” - “检查此页面是否符合WCAG标准。”

绩效审计runPerformanceAudit)

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

示例查询： - “为什么这个页面加载这么慢？” - “检查这个页面的性能。” - “进行一次绩效审计。”

SEO审核runSEOAudit）

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

示例查询： - “我如何提高这个页面的SEO（搜索引擎优化）？” - “进行一次SEO审计。” - “检查此页面的SEO情况。”

最佳实践审计（Best Practices Audit）runBestPracticesAudit)

检查网页开发中的通用最佳实践。

示例查询： - “进行最佳实践审计。” - “在此页面上查看最佳实践。” - “这个页面上有没有最佳实践方面的问题？”

审计模式（runAuditMode）

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

示例查询： - “运行审核模式。” - “进入审计模式。”

NextJS 审核（runNextJSAudit)

检查NextJS应用程序的最佳实践及SEO优化改进。

示例查询： - “运行一个NextJS审核。” - “运行一个NextJS审计，我正在使用app路由器。” - “运行一个NextJS审核，我正在使用页面路由器。”

调试模式 (runDebuggerMode）

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

示例查询： - “进入调试模式。”

建筑

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

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

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │
│  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │
│   Cursor)   │     │   Handler)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

模型上下文协议（MCP）是Anthropic AI模型所支持的一种功能，该功能 允许您为任何兼容的客户端创建自定义工具。例如，适用于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命令以捕获屏幕截图
• 智能截断日志中的字符串和重复对象数量，以避免令牌限制
• 在MCP客户端中移除cookie和敏感头部信息，以避免发送给大型语言模型（LLMs）

MCP服务器

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

安装

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

• BrowserTools MCP 文档

使用方法

安装并配置完成后，该系统允许任何兼容的MCP客户端执行以下操作：

• 监控浏览器控制台输出
• 捕获网络流量
• 截取屏幕截图
• 分析选定元素
• 清除存储在我们MCP服务器上的日志
• 进行可访问性、性能、搜索引擎优化（SEO）及最佳实践审核

兼容性

• 与任何MCP兼容的客户端均可配合使用
• 主要设计用于与Cursor IDE集成
• 支持其他AI编辑器和MCP客户端