Cursor + MCP:效率狂飙,一键克隆网站、自动调试错误,社区:每个人都在谈论MCP。

🍹 Insight Daily 🪺

Aitrainee | 公众号:AI进修生

Hi,这里是Aitrainee,欢迎阅读本期新文章。

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长这样:


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

MCP是什么: Cline的MCP商店来了。 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:\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视频、搜索结果、网页内容,输出清晰文本。


MCP在哪获取?

很多:

https://cursor.directory/:

https://github.com/punkpeye/awesome-mcp-servers Cline的MCP商店来了。

One More Thing

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

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

如果你想Deepseek R1满血版3000万免费API Token:

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

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


后面继续介绍更多实用的MCP与实践。

以下本期主题AI画作:

🌟 知音难求,自我修 炼亦艰,抓住前沿技术的机遇,与我们一起成为创新的超级个体(把握AIGC时代的个人力量)。 参考链接:
[1] https://x.com/dr_cintas/status/1896628905290891520

点这里👇关注我,记得标星哦~

### 关于 CursorMCP 的技术概念或用法 #### 定义与背景 MCP(Master Control Program)是一种多线程操作系统,通常运行在 Burroughs 大型机上。它支持高级别的并发性和复杂的内存管理机制[^1]。Cursor 是指一种数据结构或者操作符,在编程环境中常被用来表示当前处理的位置或者是某种状态指示器。 #### CursorMCP 编程中的角色 在 MCP 环境下,cursor 可能具有多种用途,具体取决于上下文环境以及应用程序的需求。以下是几个常见的应用场景: - **数据库访问**: 当通过 MCP 提供的接口连接到数据库时,cursor 被广泛应用于遍历查询结果集。例如,SQL 查询的结果可以通过 cursor 来逐行读取并进一步处理[^2]。 - **文件流控制**: 类似于其他现代操作系统上的文件句柄,cursorMCP 中也可以作为文件位置标记来使用。这使得开发者能够精确地定位到特定的数据块进行修改或检索[^3]。 - **图形界面交互**: 如果涉及到 GUI 应用开发,则 cursor 还可能代表鼠标光标的当前位置信息或其他形式的机互动反馈信号[^4]。 ```python # 假设我们正在编写一段基于 MCP 平台的应用程序代码片段, # 下面展示了一个简单的如何利用 cursor 遍历记录列表的例子: def process_records(cursor): while not cursor.eof(): # eof() 方法判断是否到达末尾 record = cursor.read_next_record() handle_data(record) process_records(my_cursor_instance) ``` 上述伪代码展示了在一个假设性的 MCP API 上实现基本游标功能的方式——即循环调用 `read_next_record()` 函数直到遇到结束条件为止。 #### 技术细节探讨 对于更深入理解 cursor 和其在 MCP 编程里的实际应用来说,还需要考虑以下几个方面因素: - 错误处理策略: 如何优雅地捕获异常情况下的错误消息? - 性能优化技巧: 是否存在某些方法可以减少频繁磁盘I/O带来的开销? - 安全性考量: 数据隔离措施能否防止未经授权的操作? 这些问题都需要依据具体的业务场景做出相应的解答,并且往往伴随着丰富的实践经验积累才能完全掌握其中精髓所在。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Aitrainee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值