1- AI 开发工具的革命性创新

AI 需要与现实世界的数据建立联系，MCP（Model Control Protocol）即将变得极为重要，开发工具正在走向一个全新的时代。

2- MCP 的实用性案例展示

2.1- WindSurf + Firecrawl MCP 一键克隆网站

WindSurf + Firecrawl MCP 可以一键克隆 Grok 聊天网站：

我后面会详细介绍这种方法，并提供实战演示。

2.2- Browser Tools MCP 实时修复控制台错误

Browser Tools MCP（与后文 Playwright 类似）可以从浏览器实时修复控制台错误：

此 MCP 开发者为 Ted Werbel：https://www.agentdesk.ai/

3- 开发者体验分享

博主 @jasonzhou1993 表示：MCP 重塑了我的 Cursor 工作流！效率提升了 10 倍。

它能读取浏览器控制台和网络日志，用 Replicate 生成 UI 资源，连接 Supabase 数据库和 Figma 设计。

3.1- Supabase MCP 智能调试示例

在 Supabase 设置数据库函数但无法运行时，连接 Supabase MCP 后，Cursor 自动排查：找到函数，检查日志，发现问题——变量名大小写不匹配。

以往使用 Supabase 这样的数据库实际上和 Cursor 交互并不便捷。

有了 MCP，Cursor 可以直接与 Supabase" 一起工作 "。

这个 MCP 的界面：

4- 实战：Firecrawl MCP 复刻网站 + Playwright 调试控制台错误

4.1- MCP 基础知识

对于 MCP 的详细介绍，可以参考以下文章：

• Windsurf Wave3：MCP协议让AI直接读取控制台错误，自动化网页调试不用复制粘贴了！Tab智能跳转、Turbo模式。
• Cline的MCP商店来了。
• Windows下MCP报错的救星来了，1分钟教你完美解决Cursor配置问题。

4.2- Firecrawl MCP 配置教程

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:\\nodejs\\node.exe C:/Users/Username/AppData/Roaming/npm/node_modules/firecrawl-mcp/dist/index.js"] 
}

配置成功后的界面：

4.3- 实战演示

给 Cursor 提示：

你现在在一个 next.js 项目中，调用 firecrawl 去复刻这个网站：https://pidgeon.news/?utm_source=toolify

Cursor 调用 Firecrawl 过程中，它会分析网站的主要结构和功能，下载网站上的图片资源并保存到我们的项目中。最终复刻结果除了动态效果外，其他元素与原网站非常相似。

但如果遇到错误，我们可以使用 Playwright MCP 工具来解决：

4.4- 更多网页自动化 MCP 工具

5- Firecrawl 和 Playwright 的工作原理

5.1- Firecrawl 复制网站原理

Firecrawl 复制网站的原理很简单。它就像一个细心的 " 搬运工 "，把网页上能看到的东西都收集起来。

更多关于 AI 爬虫的知识：2024年AI+爬虫指南：使用JinaAI、FireCrawl、Crawl4AI（别用Beautiful Soup了）

核心是分析网页的 DOM 结构和资源：

• 收集 HTML 结构
• 获取 CSS 样式
• 提取 JavaScript 代码
• 下载图片媒体
• 保存字体文件

工作流程：

1. 遍历页面
2. 提取元素
3. 下载资源
4. 重建结构

由于现代网站都用标准 Web 技术构建，资源可访问，DOM API 可分析，所以这种方法非常有效。

当然也有局限性：

• 动态内容难复制
• 后端功能可能失效
• 需要处理跨域和反爬虫问题

5.2- Playwright 自动化测试工具

Playwright 更像一个自动化测试工具，它能控制 Chrome、Firefox 和 WebKit 等浏览器。就像有人在替你操作浏览器一样，可以：

• 访问页面
• 查看控制台日志
• 点击按钮输入文字
• 记录页面状态

工作流程：

1. 在本地运行网站
2. 让 Playwright 访问
3. 记录访问情况
4. 帮助发现问题

例如，它访问本地开发服务器时，会返回类似 " 成功打开了 http://localhost:3000" 的信息。

6- MCP 协议的未来前景

业内专家对 MCP 这样的协议的未来非常看好：

6.1- MCP 自动化任务示例

7- Cline 中的 MCP 应用

关于 Cline 的 MCP 详情，请参考：Cline的MCP商店来了。

7.1- Neon 数据库插件

Cline 的 Neon 数据库插件让数据库操作变得像对话一样自然：

• 无需复杂 SQL，直接用自然语言创建表格和查询数据
• 一句话创建隔离测试环境
• 监控资源使用，提前预警性能瓶颈
• 多命令串联，轻松构建工作流

7.2- MCP 工具间协作

Cline 使用 Perplexity MCP 对构建 Firecrawl MCP 进行故障排除：

7.3- Markdownify MCP Server

Markdownify MCP Server 是一个全能的内容转换工具，可以将各种格式转为 Markdown：

• PDF、图片、音频、Office 文档
• YouTube 视频
• 搜索结果
• 网页内容

8- MCP 获取渠道

MCP 可以从多个来源获取：

• https://cursor.directory/：
  

• https://github.com/punkpeye/awesome-mcp-servers

• Cline的MCP商店

• Windsurf Wave3

9- 额外资源推荐

如果在使用 Cursor 过程中 Claude3.7 被限制，可以试试字节的 Trae，最近上线了 Claude3.7 还有国内版本，免费的：

Trae：这款全新免费的AI IDE真香吗？从0构建个人博客、宝可梦游戏、Three.js 3D场景

如果你想使用 Deepseek R1 满血版 3000 万免费 API Token：

火山引擎：白嫖满血版DeepSeek、邀请获3000万 Tokens

如果想解锁智谱所有模型 API 5 折权限：

智谱放大招！全系列模型5折，Batch API配千万级并发，10分钟读完22篇论文（AI编程 | 0代码实践指南）

后面我将继续介绍更多实用的 MCP 与实践案例。

10- AI 艺术创作展示

🌟 知音难求，自我修炼亦艰，抓住前沿技术的机遇，与我们一起成为创新的超级个体（把握 AIGC 时代的个人力量）。

11- 参考链接

[1] https://x.com/dr_cintas/status/1896628905290891520