返回博客
BananaBanana Teamtutorialmcpcursor

在 Cursor 中生成图像:MCP 服务器配置指南

将 Cursor 连接到远程 MCP 服务器,直接在你的代码库中生成图像:mcp.json 配置、环境变量密钥、客户端特性,单张低至 $0.03。

在 Cursor 中生成图像:MCP 服务器配置指南

Cursor 的 MCP 服务器是一个外部工具箱,编辑器的 AI 助手可以在对话中直接调用:你只需向 mcp.json 中添加一个 JSON 配置块,Cursor 就能获得其底层基础模型所不具备的能力,包括图像生成。尽管 Cursor 的 AI 助手整天都在修改文件和运行终端命令,但它背后的任何模型都无法直接创建图像文件。而一旦接入图像生成服务器,“帮我为这个落地页制作一张 16:9 的头图”就会变成一条普通的对话指令,并最终在你的代码库中生成一个真实的图片文件。

如果你只是想快速完成设置,可以直接按照这一步操作。在你的 BananaBanana 个人中心创建一个 API Key,然后将以下内容添加到全局配置 ~/.cursor/mcp.json 或项目根目录下的 .cursor/mcp.json 中:

{
  "mcpServers": {
    "bananabanana": {
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:BB_API_KEY}"
      }
    }
  }
}

在你的环境变量中导出 BB_API_KEY=bb_live_YOUR_KEY 即可完成。无需本地服务器进程,无需 Google Cloud 账号,无需订阅。图像单张从预充值余额中扣减,低至 $0.03,视频单个低至 $0.10。本指南中的两张演示图像都是在撰写本文的过程中,使用有效的 API Key 通过该配置直接生成的;相关的生成日志和 $0.55 的媒体账单已在下文列出。

为什么要在 Cursor 中外接图像生成器?

因为在前端开发过程中,往往在你专注于写代码的时刻,最需要图片。比如:落地页的头图;产品卡片的占位图(这样网格布局就不用带着灰色方块上线了);或者是你刚刚写好的博客文章的 Open Graph (OG) 封面图。这些事情本身并不难,但过去每生成一张图片都意味着一次繁琐的分流:在浏览器标签页中打开生成器、输入提示词、下载、重命名、拖入 public/ 文件夹、返回编辑器,最后编写 <img> 标签。每个资产需要花费 10 分钟的时间来进行这些琐碎的对接,而你已经失去了在组件开发中的思路。

有了 MCP 服务器,AI 助手可以帮你完成整个闭环。它会撰写提示词(通常比我自己随便写的初稿要好),调用 generate_image,将生成结果下载到正确的文件夹中,并直接编写带有 alt 文本的 HTML/JSX 标记。你只需要审核一段 diff 差异,而不是做这些枯燥的杂务。

另一个优势在于你无需在本地安装任何额外软件。虽然用于图像生成的本地 MCP 服务器确实存在且可用,但它们意味着你必须在本地运行 Node 或 Python 进程,并提供你自己的 Google API Key,这会在你的 Google 账号上产生额度和账单。而远程服务器则省去了这一切:接口已经在我们这边运行,与 BananaBanana 生成器使用的是同一套底层的管线,你唯一的凭证就是一个 bb_live_ 密钥。

Editorial illustration of a laptop connected by a glowing cable to a small art studio on a cloud, a metaphor for Cursor calling a remote image generation MCP server

如何在 Cursor 中添加 MCP 服务器?

只需三个步骤,大约两分钟。下文中的配置细节已与 2026 年 7 月 11 日的官方 Cursor MCP 文档进行过核对。

第一步,注册并打开 个人中心 → MCP API Keys。创建一个密钥。它只在创建时显示一次,以 bb_live_ 开头,并且在我们这边是加密存储的,因此请立即复制保存。新注册的账户会有 $0.20 的初始余额,足够你在最便宜的模型上进行六次测试图像生成。

第二步,选择配置文件的存放位置。Cursor 会读取两个位置:

  • ~/.cursor/mcp.json —— 全局配置,该服务器会应用于你的所有项目;
  • 项目根目录下的 .cursor/mcp.json —— 项目级配置,并且只要你不在里面直接写密钥,就可以安全地提交到 Git 仓库。

这个“只要”就是上面代码片段中 ${env:BB_API_KEY} 变量插值的作用:Cursor 会在加载时自动将环境变量替换到 mcp.json 中,因此文件本身不包含任何敏感秘密。根据官方文档,该语法还支持 ${workspaceFolder} 以及其他一些变量。

第三步,重启或重新加载 Cursor,然后打开 Cursor Settings → MCP。服务器应该会显示并带有绿色指示灯,以及一个包含 7 个工具的列表(从 list_modelslist_generations)。我们的 MCP 服务器文档页面保存了相同的配置片段,以及我们已经验证过的所有其他客户端的兼容性表格:

Cursor configuration snippet on the BananaBanana MCP docs page showing the mcp.json block with env-var interpolation

如果服务器没有显示出来,请直接跳到下文的“常见特性与问题”部分。原因几乎总是环境变量未被识别,而不是配置文件本身的问题。

应用场景:无需离开聊天窗口即可搞定落地页头图和产品图

本文正是围绕这个场景展开的:你是一个前端开发人员,正在为一个户外装备品牌搭建落地页,设计方案需要一张全宽度的“黎明露营”头图。在 Cursor 的聊天窗口中,你向 AI 助手提出这一需求,AI 助手随后撰写了一段摄影风格的提示词并调用了该工具。以下是我生成过程中的真实调用日志,包含真实的 job id:

→ generate_image {"prompt": "A photorealistic wide hero shot for an outdoor
   gear brand landing page: a lone orange tent glowing softly on the shore of
   a still alpine lake at dawn, mist over the water, sharp granite peaks
   catching the first pink light, generous empty sky for headline text, low
   angle, 35mm lens, no text", "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgox3xj000s…", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.40}
→ get_result {"job_id": "cmrgox3xj000s…"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

从调用到生成完毕总共耗时 18 秒。以下是这次生成的真实输出,一次成功,未进行任何重新生成:

AI-generated landing page hero of an orange tent by a misty alpine lake at dawn, created in Cursor through the BananaBanana MCP server

随后,AI 助手将图片从带有签名的 URL 下载到 public/ 目录中,并直接编写组件代码。URL 签名的有效期为 24 小时;在此之后,调用 get_result 会重新签发新的链接。

对于商品占位图,操作完全相同,只需给出更偏向方形的描述。对于商品网格,我要求生成一张水壶的照片,描述方式与给摄影师提的要求完全一致:主体、台面、光线、镜头。一次调用,费用 $0.11,耗时 20 秒:

Photorealistic product placeholder of a brushed steel water bottle with a sage-green cap on granite, generated in Cursor via MCP for a landing page card grid

这两张演示图都使用了 Nano Banana Pro,因为它们需要展示在公开页面上。对于临时的网格占位图,我诚实地建议你使用只需 $0.03 的 nano-banana-2-lite,并且只在设计评审通过后,再升级需要保留的那些图片;我们的 Lite 引导指南详细介绍了什么情况下便宜的模型就足够了。如果你需要在系列图片中使用同一个角色,提示词技巧比客户端更重要,请参考角色一致性生成指南

视频生成也可以在同一个聊天窗口中进行。generate_video 在首次调用时绝不会扣费:它会先返回一个报价,AI 助手必须使用完全相同的金额再次调用并带上 confirm_cost 参数。一段无声的 720p Veo 3.1 Lite 视频起步价为 $0.10;带有声音的 Omni Flash 视频则是每秒 $0.10,因此三秒的镜头需要 $0.30。视频生成需要 1 到 10 分钟,因此 AI 助手会在继续编写代码的同时,在后台轮询 get_result

值得提前了解的 Cursor 特性与细节

每个客户端都有它自己的一些细节。以下是我在测试上述配置时为你收集整理的一些细节,建议你在向团队推广前提前了解。

Editorial illustration of a small robot examining three signposts with a house, a folder and a padlock, a metaphor for Cursor's config scopes and secrets

1. ${env:…} 变量插值只有在 Cursor 能够读取到该变量时才生效。 如果你在 .zshrc 中导出了变量,那么当你从终端启动 Cursor 时,该变量是可见的;但是如果你直接通过 Dock 或桌面快捷方式启动 GUI 版本的 Cursor,它不会读取你的 shell 配置文件,因此同样的配置会默默失效。根据我的经验,这是 macOS 上导致“服务器无法连接”的第一大原因。解决方法:在系统级别设置环境变量(macOS 上使用 launchctl setenv,Windows 上设置系统环境变量),或者从终端启动一次 Cursor 以验证配置本身是否正常。

2. 项目配置非常适合团队协作,一人一匙。 将带有 ${env:BB_API_KEY} 占位符的 .cursor/mcp.json 提交到 Git 仓库,每位团队成员在克隆项目后都能立即使用该服务器,且使用的是各自独立的 API Key。这种拆分非常重要:API Key 本身是免费创建的,并且在 个人中心 → MCP API Keys 中,每个 Key 都有自己独立的调用日志(包含工具、模型、费用、提示词预览)和可选的每日美元额度上限。当有人离职时,你只需废弃这一个 Key,其他人的使用完全不受影响。Cursor 的商业版方案也可以通过团队管理后台统一分发 MCP 服务器,但提交配置文件的方法在任何订阅版本上都适用。

3. Cursor 会在每次调用工具前进行询问,建议你保持该设置。 默认情况下,每次 MCP 调用都需要你的手动确认,在工具名称旁边会有一个小箭头,点击可以展开查看具体参数。在自动运行模式下,白名单中的工具会立即执行。虽然在批量生成时点击 20 次确认确实很繁琐,但对于会产生真实费用的工具,我建议你保持确认机制开启,而只允许免费的工具(如 list_models, get_result)自动运行。无论如何,视频生成在服务器端都有第二道安全锁:没有 confirm_cost 确认,任何报价以上的请求都不会被扣费。

4. 你可以直接在聊天窗口中预览生成结果。 根据 Cursor 的文档,MCP 工具返回的图像会作为附件显示在对话中,且具备视觉能力的底层模型会对它们进行分析。我们的 get_result 工具在返回 URL 的同时也会附带一个 webp 格式的小预览图,因此你和 AI 助手无需打开浏览器即可对生成效果进行评估。这也意味着 AI 助手具备自我修正的能力:你可以让它检查生成的图像,如果发现帐篷正好叠在了落地页标题文字的区域,就可以让它重新生成。

5. 存在一键安装链接,但切勿在其中包含密钥。 Cursor 支持通过 Base64 编码的配置一键安装 MCP 服务器的 cursor:// 深度链接,具体见一键安装链接文档。这对于开源、无需授权的服务器很方便,但对于需要身份验证的服务器来说是完全错误的,因为编码后的配置会暴露出你的明文密钥,任何获得该链接的人都可以直接使用你的充值余额。这就是为什么我们网站上的安装按钮是一个带有环境变量占位符的代码片段,而不是直接的“一键添加至 Cursor”链接。复制代码、导出变量,搞定。

诚实地指出目前产品端的一个局限:目前 MCP 的 generate_image 工具还不支持输入图片,因此基于参考图的生成和图生视频依然需要通过网页端生成器来完成。目前通过 MCP 可以直接使用的是文字生成图像、多轮 edit_image 调整,以及文字生成视频。

本文的演示媒体实际花费了多少?

均采用我们价格页面的标准单次生成价格,这也是 list_models 向 AI 助手返回的真实数据。无任何内部折扣:

资产模型价格
落地页头图演示(通过 MCP 和有效 API Key 生成)Nano Banana Pro, 1K$0.11
商品占位图演示(通过 MCP 生成)Nano Banana Pro, 1K$0.11
封面图 + 2张配图Nano Banana Pro, 1K$0.33
文档页面截图浏览器截图,非生成$0.00
总计$0.55

这次所有的生成都是一次成功,但在实际使用中并不总是如此;在生成商品图时,建议预算一到两次重新生成的额度,并在实际使用前仔细放大检查,因为物体几何形状依然是目前写实模型最容易出现细微偏差的地方。

如果你已经在 Claude 中运行了该服务器,那么上述 Cursor 配置就是唯一需要添加的部分:相同的 API Key、相同的充值余额,以及相同的历史记录。如果你是第一次使用,Claude Code 配置指南中涵盖了另外四个非常实用的应用场景,它们几乎可以一字不差地应用到 Cursor 中。准备好开始了吗?创建一个密钥并让 Cursor 为你生成第一张极具张力的头图吧。

常见问题 (FAQ)

Cursor 是否原生支持带有 Authorization 请求头的远程 MCP 服务器?

是的,完全原生支持。自从 Cursor 添加了 Streamable HTTP 传输协议后,远程服务器在 mcp.json 中就仅仅是一个 url 加上一个可选的 headers 对象,不再需要本地桥接进程,且 ${env:VAR} 语法可以完美保证密钥不会泄露到代码文件中。这也是本指南所采用的配置方式,并已于 2026 年 7 月 11 日通过了官方 Cursor MCP 文档的核对。Cursor 也计划支持远程服务器的 OAuth 认证;我们目前的端点采用 Bearer 密钥认证,并已将 OAuth 2.1 规划为第二种认证选项。

我是否需要 Google API Key 才能在 Cursor 中生成图像?

不需要。本地运行的图像 MCP 服务器直接调用 Gemini API,因此它们需要你自己的 Google API Key,并由你自行管理额度和账单。而使用远程服务器,生成任务运行在 BananaBanana 托管的 Vertex AI 密钥池上,你唯一的凭证就是个人中心里的 bb_live_ 密钥。你用直接访问 Google 原始 API 的权限,换取了无最低消费的单次生成计费、统一的预充值账户余额,以及一个可以一键随时作废的 API Key。

MCP 配置应该是全局的还是项目级的?

两者都支持,区别在于范围和共享方式。~/.cursor/mcp.json 会应用于你的所有项目,适合个人开发环境;项目根目录下的 .cursor/mcp.json 则会随项目代码一起提交,方便克隆项目的其他团队成员直接使用,只需将密钥设为 ${env:…} 变量即可安全提交。我默认建议在团队项目中使用项目级配置,因为提交配置文件并配合人手一个的 API Key,可以让你轻松实现调用日志审计和离职人员 Key 的废弃。

Cursor 能否通过同一个服务器生成视频?

可以,且带有二次确认步骤。generate_video 工具总是先返回一个报价,AI 助手必须使用包含 confirm_cost 的完全相同的金额再次调用才能真正开始扣费。一段 4 秒无声 720p Veo 3.1 Lite 视频的价格为 $0.10 起,最高至带声音的顶级 Veo 3.1 渲染,带有声音的 Omni Flash 视频则是每秒 $0.10(每个片段 $0.30–$1.00)。视频生成需要 1 到 10 分钟,因此 AI 助手会在继续为你编写代码的同时,在后台进行结果轮询。

为什么修改 mcp.json 后 Cursor 中没有显示服务器?

通常是以下三个原因,按可能性排序。第一,环境变量对 Cursor 进程不可见:直接启动 GUI 版的 Cursor 不会读取你的 shell 环境变量,请在系统级别设置它或尝试从终端启动 Cursor。第二,配置未重新加载:请彻底重启 Cursor 或在 MCP 设置中使用 refresh 刷新按钮。第三,JSON 格式有细微错误,例如最经典的多写了末尾逗号。如果服务器显示正常但调用工具返回 401 错误,则是密钥本身有误或已被作废,你可以通过 MCP 服务器页面上的配置片段发送一次原始请求来验证 Key 的有效性。

tutorialmcpcursor