|
AI 需要与现实世界的数据建立联系,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长这样: 
实战:Firecrawl MCP复刻网站 + Playwright 调试控制台错误MCP是什么:Windsurf Wave3:MCP协议让AI直接读取控制台错误,自动化网页调试不用复制粘贴了!Tab智能跳转、Turbo模式。MCP怎么配置、报错解决:Windows下MCP报错的救星来了,1分钟教你完美解决Cursor配置问题。https://github.com/mendableai/firecrawl-mcp-server/blob/main/README.md 你还要获取Firecrawl API获取:http://firecrawl.dev{"command":"cmd","args":["/c","setFIRECRAWL_API_KEY=your-api-key&&C:\nvm4w\nodejs\node.exeC:/Users/Username/AppData/Roaming/npm/node_modules/firecrawl-mcp/dist/index.js"]}你现在在一个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) 进行故障排除:
Markdownify MCP Server,一个全能的内容转换工具。把PDF、图片、音频、Office文档转成Markdown。处理YouTube视频、搜索结果、网页内容,输出清晰文本。
MCP在哪获取?很多: https://cursor.directory/: https://github.com/punkpeye/awesome-mcp-serversWindsurf Wave3:MCP协议让AI直接读取控制台错误,自动化网页调试不用复制粘贴了!Tab智能跳转、Turbo模式
|