🍹
Insight Daily
🪺
Aitrainee | 公众号：AI进修生
Hi，这里是Ai trainee，欢迎阅读本期新文章。
AI 需要与现实世界的数据建立联系，MCP 即将变得极为重要，开发工具正在走向一个全新的时代。
MCP的实用性令人惊叹。
WindSurf + Firecrawl MCP 一键克隆Grok聊天网站：
我后面会
介绍
这种
方法，并实战演示。
Browser Tools MCP（与后文Playwright类似） 从浏览器实时修复控制台错误
此MCP开发者为Ted Werbel：https://www.agentdesk.ai/
博主@jasonzhou1993表示：MCP重塑了我的Cursor工作流！提升了10倍。
它能读取浏览器控制台和网络日志，用Replicate生成UI资源，连接Supabase数据库和Figma设计。
在Supabase设置了数据库函数，却无法运行。连接Supabase MCP后，Cursor 自动排查：找到函数，检查日志，发现问题 —— 变量名大小写不匹配。
以往我使用Supbase这样的数据库实际上和Cursor是不好交互的。
有了MCP，Cursor直接与Supbase “ 一起工作 ”。
这个MCP长这样：
MCP是什么：Windsurf Wave3：MCP协议让AI直接读取控制台错误，自动化网页调试不用复制粘贴了！Tab智能跳转、Turbo模式。
MCP怎么配置、报错解决：Windows下MCP报错的救星来了，1分钟教你完美解决Cursor配置问题。
Firecrawl MCP 地址（有配置教程）：
https://github.com/mendableai/firecrawl-mcp-server/blob/main/README.md
你还要获取 Firecrawl API获取： http://firecrawl.dev
如图配置（windows为例）：
{ "command": "cmd", "args": ["/c", "set FIRECRAWL\_API\_KEY=your-api-key && C:\nvm4w\nodejs\node.exe C:/Users/Username/AppData/Roaming/npm/node\_modules/firecrawl-mcp/dist/index.js"] }
配置好了：
给Cursor提示：
你现在在一个next.js项目中，调用firecrawl去复刻这个网站：https://pidgeon.news/?utm\_source=toolify
原网站截图：
Cursor调用Firecrawl过程：
可以看到，它在分析一 下网站的主要结构和功能、下载网站上的图片资源并保存到我们的项目。
这是他复刻的结果。
除了动态效果外。其他的非常相似。
但是还有一个问题。报了一个错。
于是我们另外用一个mcp playwright 工具来解决。
加快一下速度，我们看一下视频。
当然最后发现这个错误还和浏览器有一些关系，在另外一个浏览器是正常的。
更多关于网页自动化的MCP：
Firecrawl、Playwright 是怎么工作的:
Firecrawl 复制网站的原理很简单。它就像一个细心的"搬运工"，把网页上能看到的东西都收集起来。
2024年AI+爬虫指南：使用JinaAI、FireCrawl、Crawl4AI（别用Beautiful Soup了）
核心是分析网页的DOM结构和资源。收集HTML结构、CSS样式、JavaScript代码、图片媒体、字体文件等所有元素。
工作流程是这样的：遍历页面，提取元素，下载资源，重建结构。因为现代网站都用标准Web技术构建，资源可访问，DOM API可分析。
当然也有局限：动态内容难复制，后端功能可能失效，还要处理跨域和反爬虫问题。
Playwright 更像一个自动化测试工具，它能控制Chrome、Firefox和WebKit这些浏览器。就像有个人在替你操作浏览器一样。可以:
-
访问页面
-
看控制台日志
-
点击按钮输入文字
-
记录页面状态
工作流程很简单:
先在本地运行网站，然后让Playwright去访问，它会把看到的情况都记录下来，帮我们发现问题。
比如它访问本 地开发服务器 时，会返回这样的信息:
"成功打开了http://localhost:3000"
此外，网上也有博主对MCP这样的协议的未来非常看好：
MCP自动化 任务尝试：
Cline中的MCP
Cline的Neon数据库插件，让数据库操作变得像对话一样自然。
不用写复杂SQL，直接用自然语言创建表格、查询数据。想测试新功能？一句话就能创建隔离环境。
它还能监控资源使用，提前预警性能瓶颈。多个命令可以串联，轻松构建工作流。
Cline 使用一个 MCP 工具 （Perplexity） 对构建另一个 MCP 工具 （Firecrawl） 进行故障排除：
Markdow nify MCP Server，一个全能的内容转换工具。
把PDF、图片、音频、Office文档转成Markdown。处理YouTube视频、搜索结果、网页内容，输出清晰文本。
很多：
https://github.com/punkpeye/awesome-mcp-servers
Windsurf Wave3：MCP协议让AI直接读取控制台错误，自动化网页调试不用复制粘贴了！Tab智能跳转、Turbo模式。
如果在使用Cursor过程中Claude3.7被限制，可以试试字节的Trae，最近上线了Claude3.7还有国内版本，免费的：
Trae：这款全新免费的AI IDE真香吗？从0构建个人博客、宝可梦游戏、Three.js 3D场景
如果你想Deepseek R1满血版3000万免费API Token：
火山引擎：白嫖满血版DeepSeek、邀请获3000万 Tokens
如果想解锁智谱所有模型API 5折API权限：
智谱放大招！全系列模型5折，Batch API配千万级并发，10分钟读完22篇论文（AI编程 | 0代码实践指南）
后面继续介绍更多实用的MCP与实践。
以下本期主题AI画作：
🌟 知音难求，自我修 **炼亦艰，
抓住前沿技术的机遇，与我们一起成为创新的超级个体
（把握AIGC时代的个人力量）。**
参考链接：
[1] https://x.com/dr\_cintas/status/1896628905290891520
点这里👇关注我，记得标星哦～