🍹
Insight Daily
🪺
Aitrainee | 公众号：AI进修生
Hi，这里是Aitrainee，欢迎 阅读本期新文章。
在可能的路上把工具的Buff叠满，就能效率起飞了。
今天我们来说说 @tedx_ai 大神做的 BrowserTools工具 —— 能让 Cursor 这样的 AI 编辑器，直接控制你的浏览器， 调试代码更爽，开发体验直接起飞。
如果你不了解MCP，那么以往我有多篇文章介绍MCP概念、实践，你可以滑到文末查看。
和以前介绍过的浏览器自动化MCP不同，BrowserTools MCP 与配套 Chrome 扩展 运行，直接与用户当前浏览器会话交互，无需启动新实例。
比起 Playwright 和 Puppeteer ，我更喜欢用 BrowserTools。
了解 mcp-playwright、browser-tools-mcp、blender-mcp
mcp-playwright：新手入门级 MCP 服务器
这个简单，适合新手了解 MCP 服务器怎么建。
它主要提供：
资源列表（比如截图、浏览器日志）
工具列表（比如导航、点击、填表）
MCP 服务器要告诉 AI 自己能干啥，就像 API 文档一样，每个功能、参数都要写清楚。
它通过调用 Playwright 来操作浏览器。
这个在windows上配置好后让他截取图片。可能会显示红色错误：类型不对。其他功能正常。mac上正常。
browser-tools-mcp：更强大的浏览器操作 MCP
https://github.com/AgentDeskAI/browser-tools-mcp
这个项目也能操作浏览器，功能更多。
除了导航、截图， 还能调试网页、分析性能。
它不用 Playwright，而是通过浏览器插件来操作，可以直接在我们常用的浏览器里用。
为了实现这个，它需要：
- MCP 服务器和插件之间能通信。
- 给插件很多权限。
它由三部分组成：
- MCP 服务器： 提供 MCP 接口，调用 Node 服务器。
- Node 服务器： 中间层，连接 MCP 服务器和 Chrome 插件，还能用 Puppeteer 和 Lighthouse 分析网页性能、SEO 等。
- Chrome 插件： 响应请求，调用 Chrome 的功能，包括调试。
还有一个说到的3d建模mcp
这是用 Python 开发的，上面两个浏览器的 MCP 都是用 JS 实现。
不过两种语言都有成熟的框架可以用：
- NodeJS: modelcontextprotocol/sdk
- Python: MCP python SDK，它提供了修饰器定义 tools，代码结构很简单
它的结构和 browser-tools-mcp 类似，包含两个部分：
- Blender 插件：在 Blender 内创建套接字服务器以接收和执行命令的插件
- MCP 服务器：实现模型上下文协议并连接到 Blender 插件的 Python 服务器
具体实现上牵涉到很多 blender 专门的知识。
我们继续说 browser-tools-mcp：
它还有其他浏览器自动化MCP不具备的这种端到端的功能：
通过Lighthouse 运行 SEO、性能和代码质量扫描：
针对NextJS 应用的SEO审计。
我让它帮我分析我正在开发 的一个网站（复刻实验，MCP工具收录站）：
这是它的结果：
端到端的性能优化、SEO改进策略会提供给你：
老方便了感觉。。
用了 MCP 服务器工具， AI 编辑器就能做到这些：
- 看控制台日志和报错
- 获取 XHR 网络日志：
返回所有最近的 xhr 请求，这些请求导致 HTTP 成功响应代码（如 200 或 300）
- 获取 XHR 网络错误：
返回最近返回 400 或 500 HTTP 错误响应代码的 xhr 请求
- 网页截图，还能自动贴到 Cursor
比如使用这个工具的时候，你在Cursor中试试这些指令：
- “这不对劲…… 启动调试模式！”。（ 进入 “调试模式”，他会用各种工具找 bug，进入 “审计模式”，全面检查 Web 应用）
它这个模式会自动控制你的Cursor，它来和Cursor对话。。
很有意思。
- “帮我改下选中的元素，x、y、z 都改了！”
- “我要优化 SEO 和性能，进审计模式！”
- “检查下控制台和网络日志，看看哪出问题了？”
- “界面有点怪，截个屏看看。”
BrowserTools MCP 不仅捕获数据，还允许编辑 DOM 元素，这意味着它可以控制本地浏览器进行特定操作。例如：“你能编辑当前选定的元素来执行 x、y 和 z 吗？”
使用 chrome dev 工具时，你可以使用元素选择器工具选择 UI 中的任何组件。
选择一个元素后，你将能够要求 Cursor 编辑或查找代码中当前选定的元素。这使得遍历代码库和进行 UI 更改变得更加容易。
此外，再试试使用browser-tools来测试firecrawl.dev网站
可以看到它的截图功能在正常的，此前在使用 Playwright 和 Puppeteer 浏览器自动化工具的时候。他们在Windows下截图往往
会报类型错误。
再言MCP概念和前景
根据这篇不错的文章介绍： https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling/，我们来看看 MCP一些关键的地方：
MCP是个让AI模型接入外部世界的开放协议。
这个协议定义了AI如何调用工具、获取数据和与服务交互的规则。简单来说，就是给AI装上了"手脚"，让它能做实际的事情。
看下图的
一个具体示例
：
当用户想发邮件时，不管是在Cursor还是Claude Desktop，都可以使用同一个Resend MCP服务器。AI选择合适的工具（这里是发邮件工具），然后通过统一的接口完成任务。
这种设计的好处在于：不同的AI客户端可以共享同一套工具服务。你换了AI应用，工具还能用。
对开发者来说，不用为每个AI平台都写一套工具，写一次就能到处用，省事又高效。
但MCP不是凭空出现的，它从LSP（语言服务器协议）那里借鉴了灵感。
LSP是怎么工作的？当你在编辑器里敲代码时，编辑器会向语言服务器询问：要不要自动补全？这里有没有错误？无论你用的是VSCode还是Vim，只要连接同一个语言服务器，体验都差不多。
MCP把这个想法推得更远了。
关键区别在哪？LSP主要是被动响应，等你敲键盘才动作。而MCP是为AI代理设计的，让它们能自主工作。
AI能根据当前情况，自己决定：
- 用哪些工具
- 按什么顺序用
- 怎么把这些工具串起来完成任务
图中可以看到，不管是Claude Desktop还是Cursor，都能通过MCP连接到Resend、Supabase、Notion这些服务。
MCP还加了个人类参与的环节，让人类可以提供额外信息，审批执行过程。
简单说，LSP让不同编辑器用同一个语言服务，MCP则让不同AI用同一套工具服务。
开发者的小确幸：不用离开家门口
程序员都有一个梦想："能不能不离开IDE就把活干了？"MCP服务器就是来实现这个梦想的。
以前查数据库状态要切到Supabase，现在可以直接用Postgres MCP服务器在IDE里执行SQL查询。管理缓存？Upstash MCP服务器帮你搞定。
更厉害的是Browsertools MCP，让AI助手能直接访问浏览器环境，实时获取反馈和调试信息。
看截图里，Cursor的AI正在帮忙修复游戏bug。它直接调用MCP工具获取控制台日志，分析游戏过早结束的原因，还能搜索相关代码。整个过程都在IDE里完成，不用切来切去。
MCP还有个厉害之处：可以通过爬取网页或者根据文档自动生成服务器，给AI提供精准的上下文。开发者不用写大量胶水代码，直接从现有文档或API创建MCP服务器，AI立刻就能用上这些工具。
在这篇文章中我提到使用AI来构建/安装MCP的逻辑是这样的：
2分钟构建自己的MCP服务器，从算数到 Firecrawl MCP（手动挡 + AI档）
简单说，MCP让你的IDE变成了一个超级工作站，AI助手能借此获取更多信息，执行更多命令，帮你更好地完成工作。
MCP生态圈正在成长，看看这张"家族照"！
这张市场地图展示了MCP世界里谁在玩，玩什么。虽然还有不少空白区域，但已经能看出一些趋势。
先看上面的玩家：
- 客户端这边有Claude、Cursor、LibreChat等聊天和编码工具
- 服务器那边有数据库、设计工具、调试工具等各种类型
市场上已经出现了像Glama、Mintify、OpenTools这样的MCP托管服务平台，还有专门的服务器生成和托管服务。这些东西我们此前的文章或多或少都有介绍：
最新MCP托管平台：让Cursor秒变数据库专家，一键对接Github，开发效率暴增！
有趣的是，目前高质量MCP客户端基本都是写代码用的。这不奇怪，毕竟开发者总是最早尝鲜新技术的一群人。
随着时间推移，会有更多商业导向的客户端出现。
另外，现在的MCP服务器多是本地优先、针对单个用户的。这是因为MCP目前只支持SSE和命令式连接。未来会支持可流式HTTP传输，生态
系统会更加丰富。这个未来可聊，因为已经看到有人做出这样的。
现在部署方面，有像Cloudflare、
Smithery
这样的平台帮你解决规模问题。与此同时，Toolbase等连接管理平台开始简化本地优先的 MCP 密钥管理和代理。
简单说，MCP正在从"技术活"变成"人人能玩的东西"，生态系统越来越完善，让AI工具更容易流通和使用。
One More Thing
BrowserTools MCP的安装相比于其他MCP有些麻烦，但是也和下面这些文章介绍的类似安装。
不过我还会在最新合集文章中， 带你 重新在mac、windows中安装一遍，尤其是涉及一些其他MCP没有的报错的解决，以及一些实践注意事项。
文章：手把手教你配置BrowserTools MCP，Windows 和 Mac全流程，关键命令别忽略。
合集入口：
2分钟构建自己的MCP服务器，从算数到 Firecrawl MCP（手动挡 + AI档）
合集的下下一篇可能会是搭建一个MCP服务托管网站的教程。。待
至于 BrowserTools 自动化网页控制台调试错误的就不演示了，相关文章，特别是实践类别有提到：
MCP是什么：Windsurf Wave3：MCP协议让AI直接读取控制台错误，自动化网页调试不用复制粘贴了！Tab智能跳转、Turbo模式。
MCP怎么配置、报错解决：Windows下MCP报错的救星来了，1分钟教你完美解决Cursor配置问题。
MCP实践： Cursor + MCP：效率狂飙！一键克隆网站、自动调试错误，社区：每个人都在谈论MCP！
最新MCP托管平台：让Cursor秒变数据库专家，一键对接Github，开发效率暴增！
Blender + MCP 从入门到实践：安装、配置、插件、渲染与快捷键一文搞定！
以下，本号知识星球 （汇集ALL合集和其他）：
以上。
🌟 知音难求，自我修 **炼亦艰，
抓住前沿技术的机遇，与我们一起成为创新的超级个体
（把握AIGC时代的个人力量）。**
参考链接：
[1] https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling/
[2]
https://tereza-tizkova.medium.com/which-llm-is-really-the-best-3920b5af2ae6
点这里👇关注我，记得标星哦～