AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


Cursor+21dev,低调的MCP 还是不得不火了

发布日期:2025-03-12 07:08:48 浏览次数: 1551 来源:LLM榴莲猫
推荐语

探索MCP在AI万物互联时代的创新应用,发现Cursor和21st-dev如何让MCP火遍开发圈。

核心内容:
1. MCP项目的起源和初期发展
2. Cursor和Winsurf支持MCP带来的便利性提升
3. 使用Cursor和21st-dev的MCP快速构建网站案例分析

杨芳贤
53A创始人/腾讯云(TVP)最具价值专家
我最开始说 MCP 是几个月前了,
当时出来的时候我就说它是最顶级的项目,它能让AI 正式进入万物互联的世界,写了几篇文章介绍它。
MCP
但是可能有点绕,加上当时 cline 部分只能用 Claude,所以没什么热度。
最近随着 Cursor 和 Winsurf 相继宣布支持 MCP,加上 cline 还建立了一个 MCP 市场不断的拱火,
MCP 的便利性又慢慢地给人发现了。
不管是大公司还是独立开发者的开源贡献,MCP 的种类数量在慢慢地呈曲线的增加。
今天我以一个网页的功能看大家看看结合了 Cursor 和 21st 的MCP有多好用。
工具:
Cursor,不多说代码 IDE
21st-dev的MCP:最近很火高级感的组件 UI设计网站
replicate 的 MCP:AI 画图

假设我要做一个猫猫的网站:
现在我什么都没有缺图片和缺组件代码,以前我们都需要在网上找 logo 找图片,而实际上我现在只需要在 Cursor +MCP就能完成所有的事情。
让它生成 5张猫咪的生活照片:
(generate-image 是 MCP 的一个工具,调用 Replicate的 API 直接把图片生成在本地的目录)

这个时候图片已经自动在目录生成了,然后让 Cursor 把路径直接改好一个网站的 ui 就成型了。

这里其实不用理会图片的质量,因为我用的只是 flux 最差 shchnell模型,后面随着内卷模型成本降低,API 价格一定会降低,到时候生成的成本会接近 0。
而让 Cursor +MCP生成图有两个好处:
- 能统一图片的风格
- 不用自己写提示词
现在缺一个logo,这里可以使用21st 的 寻找 logo 功能:但目前放出的功能还没有很多库,所以还是用他的设计功能:

比如我看中了官网这里的波浪效果:

我只需在 Cursor 让它调用 MCP就能轻松模仿这种波浪的效果,(这里/ui 就是 21st 的一个快捷指令)同时我还能把鼠标的指针自定义换为猫头:

让我比较意外的是,我一开始生成的图片是不成功的,而Cursor 的 agent模式直接就能看出来不对,然后自动开始重新生成,后面把提示词换成英文之后就好了。

目前 21st 还在内测有更好用的实时预览的功能,可以去加入等待名单。

当然除了这两个 MCP 还有很多有价值的:
比如推理思考Sequential Thinking,让模型先完成多步思考再开始任务,
或者联网搜索Brave Search,可以联网搜索更好的提示词去完成作图等等。
怎么去导入呢,有个很简单的方法:
去这儿网站smithery.ai,选择想要的 mcp,直接复制指令到 Cursor,选择 commond 然后粘贴指令就行。

或者你嫌麻烦的话,Cline 还有一个 MCP 的市场,里面汇集了很多官方推出的MCP,直接一键点击就能自动安装。不过 API 调用不像 Cursor 或者 Winsurf 一样不用花钱。

希望今年能看见MCP 的生态高开高走,越来越好。

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询