Cursor 0.45 新功能：MCP 集成指南 | 一键生成 AI 图片素材，设计风格秒速统一

UP主: kate人不错 · 时长: 10:36 · 🔗 B站原视频

发布: 2025-02-04 · 收录: 2025-02-28

标签: Cursor · MCP · AI编程 · Flux · 游戏开发

开场与主题

大家好，我是 cat，欢迎来到我的频道。今天我将介绍一下 Cursor 里面的 MCP 怎么使用。

Cursor 0.45.6 版本里面增加了 MCP 的支持。之前的视频里我有多期介绍 MCP 怎么去使用，比如让 Claude 通过 MCP 变成 Cursor。MCP 可以和 GitHub、Execute feature、本地文件管理进行结合，非常有意思；也可以通过 Claude MCP 去做 Flutter 应用，都很方便。

演示效果：用 MCP + Flux 生成游戏图片素材

你现在看到的这个界面，是我通过 Cursor 里面的 MCP 结合 Flux 模型去生成多个图片元素。

点击设置会出现这样的一个背景，图片背景都是通过 Flux 模型生成的，这里可以调整倍率。当我点击开始游戏，上方这些板砖、包括下方这个板子，这里所有你看到的这些图片元素，都是 Flux 模型生成的。

如果我让小球掉落，可以看到会有一个游戏结束的界面，右边也有一个得分的界面。

现在我们来到 Cursor 的界面，上方这些图片都是 Flux 模型生成的，而且是通过 Cursor 里面的 MCP 自动生成的。

Cursor 里配置 MCP Server（四个服务）

Cursor 的设置里面有一个 MCP Server，我们在这里点击新增。它有两种 type 可以选择。

目前我这里你看到的有四个，都是通过 command 添加的四个服务：

1. 思维链的思考方式：让模型在做事情之前先思考一下，这样回答内容会更全面。
2. 搜索（Brave Search）。
3. Fetch：抓取网页正文并分析。
4. Replicate：接入它的 API。

虽然这里只有四个服务，但它们用的命令有一些区别，我们一起来看一下。

服务 1：思维链（Chain-of-Thought）Server 的添加方式

第一个思维链思考方式的 server，我用到的命令就是 npx -y 然后接一个包名（我这里选中的这一段）。

在 Cursor 里就是这样设置：给它起个名字，type 选择 command，然后 command 填你刚刚的命令，保存即可。

服务 2：Brave Search 通过第三方网站添加

第二个 Brave Search，我是通过另一个工具来添加的。我发现一个比较好的网站，既支持 Claude，也支持 Cursor client，更新比较快。

比如输入一个 key。我这里的 key 输入的是三个 1，你根据实际的 key，把三个 1 替换掉。将命令复制一下，添加到这个设置里面之后就可以呈现出来。

这里左边会有一个绿色，下方会发现 tools。如果添加进去没有及时反映出来，点击右边刷新一下就可以。

服务 3：Fetch 的添加方式

第三个服务 Fetch，也是通过刚刚那个网站给的命令去添加的。

服务 4：Replicate（本地 Node Server + GitHub 仓库）

第四个 Replicate，我这里用的 command 是一个 node，然后是我本地的一个路径。它是 GitHub 上面的一个公开仓库。

流程是：先把仓库 clone 下来，在本地运行它。安装依赖，在 API token 里面设置你的 key，接着构建一下，找到 dist 文件夹里对应的 server.js 路径，把它设置到命令行里面去。我本地就是这样子的命令。

这个仓库也介绍了一些 API 参数，大家可以去了解一下。作者的本意是希望能在 Cursor 里面做网页应用的时候，直接用 Replicate 的 Flux 模型去生成图片，而不是使用占位符来替代。

用 Composer + Agent 模式生成游戏（MCP 只在 Agent 下可用）

现在我们来看一下怎么做出这样的应用。

首先在设置好 MCP Server 之后，打开一个 Composer，选择 Agent 模式，因为 MCP 只能在 Agent 模式下才有用。

输入提示词让它调用思维链工具，生成一个美观有趣的碰碰球游戏（HTML 格式）。它就会调用 MCP tool，思考了五次，每次会有一些不同，然后去创建这个游戏文件。

接着我又让它再调用一次这个工具优化程序，它又开始优化。它会说当前游戏需要优化的方向，这里同样也是反思了五次，然后去优化代码。

现在也很流行用 DeepSeek R1 先做推理，然后让 Claude 执行。我这里是直接调用了这个 MCP tool。

插播：Fetch 工具怎么用

如果你要用 Fetch 工具，可以这样写：fetch 后面跟一个链接，然后让它总结一下要点。它会获取对应 URL 的内容，最终给到要点总结。

重点：调用 Replicate 生成图片并接入游戏

重点来看一下怎么让它去生成图片。

我们可以看到 Replicate 下方有个 tool，就是生成图片。我 @ 了游戏的代码文件，让它调用 generate image 去生成配图，放在项目里面供 game 调用。

然后它帮我们先生成一个图片目录，修改游戏的代码。它提到需要生成这些图片资源。

这里它还挺有意思：它调用了一个 Brave（我没有跟它提要调用 Brave）。Brave 是搜索 API，它自己调用之后说这些提示词可以这样写。

接着我让它调用 Replicate 的 tool 帮我生成图片，它就帮我生成了。比如这是第二个生成球体的图片，生成好之后，它同步去修改游戏代码。

接着我又让它参考 image 文件夹里面的图片大小，好好设计一下界面。它先查看有哪些图片，检查图片尺寸，然后做一些游戏界面设计的调整。

再接着我们可以看到，它一开始生成了两张图：一张放在游戏界面外，另外一张放在游戏界面内，于是它就帮我去生成，并且也会更新 CSS。

后面我又让它把小球速度调整一下，加上一个记分板，它又帮我调用图片生成，添加了一个记分板。再之后我跟它说修改一些设置页面，必要的时候就调用 Replicate 生成相关图片元素，剩下的流程也差不多。

风格统一的优势：提示词基本不用手写

这样的页面远谈不上美观，但我觉得 Cursor 里面的 MCP 非常好的一点是：它本身是通过大模型来调用的。

所以它知道我这边有一些图片设计风格定下来之后，其他图片的设计风格也会尽量参考之前的风格，这样就会做到比较统一。

所有这些图片的提示词我都没有手动去写，都是大模型自己去搜索，或者自己去生成的，最后的风格还是比较统一。

这里用到的图片模型目前还是 Flux 的最小模型，只是作为一个示例。我觉得如果你是开发人员，把整个页面初稿做下来之后，后续就可以参考这样的风格去做精细化设计，提高效率。

资料与结尾

Cursor 官方文档也有 MCP 的说明，不过比较简单。更多关于 MCP 的内容，一方面大家可以看我之前的视频，另一方面可以到 MCP 官方文档里面去看，还是非常有意思的。

之前我们在 Claude 里面用的话，有的朋友觉得 Claude 使用起来不方便，经常关停。现在在 Cursor 里面使用就方便很多。

以上就是我今天的分享。如果喜欢我的视频，欢迎加入我的知识星球。我会分享最新的 AI 资讯、分享源代码、回答你的提问。我们下次再见。