在 VS Code 中生成图片：Copilot MCP 配置指南

VS Code 的 MCP 服务器就像一个外部工具箱，GitHub Copilot 的 agent 模式可以直接在聊天中调用它。只需在仓库中添加一个 JSON 文件，Copilot 就能获得其背后模型本身不具备的工具，包括图片生成。Copilot 可以整天帮你编写组件或重构测试，但它背后的任何模型都无法直接生成图片文件。一旦加入图像生成服务器，“为这个 README 制作一个 16:9 的横幅”就变成了一条简单的聊天指令，并最终在 assets/ 中生成一个真正的文件。

如果你只是来找配置的，以下就是完整的设置步骤。先在你的 BananaBanana 个人资料页 创建一个 API 密钥，然后将以下内容放入项目根目录下的 .vscode/mcp.json 中：

{
  "inputs": [
    {
      "type": "promptString",
      "id": "bb-api-key",
      "description": "BananaBanana API key (bb_live_...)",
      "password": true
    }
  ],
  "servers": {
    "bananabanana": {
      "type": "http",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:bb-api-key}"
      }
    }
  }
}

启动服务器（VS Code 会在文件内部直接显示 Start 提示），在提示时粘贴一次你的密钥，就搞定了。该文件不包含任何敏感信息，因此可以放心提交。无需本地运行进程，无需 Google Cloud 账号，也无需订阅：图片生成费用从预充值余额中扣除，价格为 $0.03 起，视频为 $0.10 起。下方展示的两张示例图片都是在我撰写本文时，通过此配置所指向的同一个 HTTP 接口，使用活跃密钥生成的。详细的运行轨迹（traces）和 $0.55 的媒体账单可以在下文找到。

为什么要让 GitHub Copilot 学会生成图片？

因为项目仓库总是在最不凑巧的时候需要图片。比如一张 README 首图，好让项目主页不至于一打开全是满屏的徽章（shields）；又或者是文档网站的横幅。除去屏幕截图，以前每次搞这些都需要绕弯路：打开浏览器标签页、写提示词、下载、重命名、拖进仓库、再回到编辑器。如果不出意外的话，每个素材也得花上 10 分钟。

有了 MCP 服务器，Copilot 可以在 agent 模式下自动跑完这个闭环。它会撰写提示词、调用 generate_image、将文件拉入你指定的文件夹，并修改 markdown 中的引用路径。你只需要审查一下 diff（代码差异）即可。

更重要的原因在于团队协作，这也是为什么本指南会作为独立文章存在，而不是写在 Cursor 教程 的某个段落里。.vscode/mcp.json 是一个工作区文件。只需提交一次，每个克隆该仓库的开发者在首次打开时就能获得这个图片工具箱，VS Code 会提示每个人输入自己的密钥。一份配置，每人一个密钥，git 中不留任何秘密。

用于图片生成的本地 MCP 服务器确实存在，如果你乐意自己运行一个 Node 进程并配置带有配额限制的个人 Google API 密钥，这也没什么问题。但远程服务器方案可以省去这一切：接口已经在我们这边运行，且采用与 BananaBanana 网页生成器 相同的流水线，你唯一的凭证就是一个可以随时撤销的 bb_live_ 密钥。

如何在 VS Code 中配置 mcp.json？

配置详情已对照 2026年7月11日 的 VS Code MCP 官方文档 进行核对。共需三个步骤。

第一步，注册并打开 Profile → MCP API Keys。密钥仅显示一次，并且在我们这边是哈希加密存储的，所以请立即复制保存。新账户的余额中赠送 $0.20，这足够在最便宜的模型上生成六张测试图片。

第二步，创建配置。以下两个位置均可：

• 项目仓库中的 .vscode/mcp.json，这个非常适合提交到 git；
• 用户级别的 mcp.json（命令面板 → MCP: Open User Configuration），它会应用于你打开的每一个工作区。

最顶部的代码片段使用了 inputs 机制，这真的是我在配置所有 MCP 客户端中遇到的最优雅的敏感信息处理方式。${input:bb-api-key} 会让 VS Code 在服务器首次启动时提示输入该值。"password": true 会隐藏你输入的内容，且该值会被保存在加密存储中，而不是直接写入文件。相比之下，Cursor 的 ${env:…} 环境变量解析则依赖于编辑器是否能真正读取到你的 shell 环境（这也是 GUI 启动的应用程序中经典的“无声失败”原因）。VS Code 完美避开了这个问题。

第三步，启动服务器：命令面板 → MCP: List Servers → bananabanana → Start，或者直接点击 JSON 文件中的行内提示。在 agent 模式下打开 Copilot Chat，检查工具选择器，你应该能看到 7 个工具（从 list_models 到 list_generations）。我们的 MCP 服务器页面 维护了一份针对所有已验证客户端的兼容性表格，VS Code 对应的正是本文所展开介绍的那一行：

什么都没显示？“常见问题”部分涵盖了三种最常见的原因，其中一种是 GitHub 组织政策，你无法在编辑器内部自行解决。

使用场景：将 README 和文档素材直接生成到仓库中

我为本文构建的场景是：你的团队开源了一个 CLI 工具，仓库需要一张 README 主图以及一张用于文档快速入门（quickstart）的图片。在 Copilot Chat（agent 模式）中，你提出生成横幅的需求，智能体就会撰写一段摄影风格的提示词并调用相关工具。以下是真实的运行轨迹（包含真实的任务 ID 和所有细节）：

→ generate_image {"prompt": "A wide photorealistic hero banner for a GitHub
   README of an open-source terminal application: a sleek dark laptop on a
   light oak desk showing colorful command-line output, soft morning window
   light from the left, shallow depth of field, 50mm lens, generous clean
   negative space on the right side for a project title, no text, no logos",
   "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgq90ou00036k7f86f0y54w", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.18}
→ get_result {"job_id": "cmrgq90ou00036k7f86f0y54w"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

从调用到生成文件大约需要 20 秒。以下就是首次尝试生成的原图输出：

在发布这样的图片之前，需要坦诚地提醒一点：如果你放大看，屏幕上的“终端输出”其实是一些看起来像模像样的乱码。在 README 的常规宽度下，没人会注意到这一点。但如果作为文字清晰可读的全宽文档首图，读者可能会发现。在生成的图片中呈现清晰可读的 UI 文本，依然是目前所有写实模型的弱点，因此请尽量让屏幕画面占比小一些，或者要求生成抽象的屏幕内容。

文档快速入门的图片也是类似的操作，不过需求风格更温和：俯视平铺（flat-lay）、键盘、一张带有便利贴的印刷架构图、一杯茶。一次调用，费用为 $0.11：

这两个演示示例都是在 Nano Banana Pro 上运行的，因为它们直接展示在此页面上。如果是为了内部 wiki 和 issue 模板，我会毫不犹豫地降级到仅需 $0.03 的 nano-banana-2-lite。我们的 Lite 指南 详细列出了在哪些场景下低成本模型就已经足够好用。带签名的文件 URL 有效期为 24 小时，通过重新调用 get_result 可以重新发放。

在同一个聊天窗口中也可以生成视频。generate_video 在首次调用时绝不会直接扣费：它会先返回一个报价，智能体必须使用 confirm_cost 重新发起调用以确认接受该准确金额。一段无声的 720p 视频起价为 $0.10；而带有声音的 Omni Flash 资费为每秒 $0.10，生成一段 3 秒的片段即为 $0.30。

在部署前值得了解的 VS Code 常见问题

这些是在测试上述配置时收集的，按可能踩坑的先后顺序排列。

1. 顶层键名为 servers，而不是 mcpServers。 几乎所有其他主流客户端（Claude、Cursor、Windsurf）都使用 mcpServers。因此，从其他工具文档中复制的配置在 VS Code 中会失效，而且 JSON schema 提示也很容易被忽略。反过来，当你把 VS Code 的配置片段复制到其他地方时，也会踩入同样的陷阱。此外，对于远程服务器，建议显式保留 type: "http" 字段。

2. 修改已保存的输入值异常困难。 首次提示输入后，你的密钥会被保存在加密存储中，之后并没有显眼的“编辑密钥”按钮。可行的解决途径是：打开 .vscode/mcp.json，将鼠标悬停在服务器上，使用行内控件选择清除输入并重新启动；或者通过 MCP: List Servers → 选择服务器 → 断开连接（disconnect）并重新添加。在 Remote SSH 环境下这个问题会更加棘手，因为根据 VS Code 问题追踪器，重新提示输入存在已知问题。更新一个已失效的密钥可能会消耗你几分钟意料之外的点击操作。

3. 在 Copilot Business 或 Enterprise 版本上，MCP 处于关闭状态，直到管理员启用相关政策。 根据 GitHub 政策文档，组织分发的账号默认会禁用“Copilot 中的 MCP 服务器”政策。令人困惑的是其失败表现：服务器正常启动，配置也验证通过，但相关工具就是不会在聊天中出现。如果你使用的是个人 Copilot 计划（包括 Free 免费版），则无需担心此问题。

4. 每次聊天请求有 128 个工具的上限。 根据 智能体工具文档，内置工具、扩展工具以及每个启用的 MCP 服务器都会占用这一额度。我们服务器添加了 7 个，这本身微不足道，但如果堆叠了几个工具较多的服务器，请求就会开始失败，直到你在工具选择器中取消勾选某些服务器。尽管 VS Code 可以将溢出的工具归类到虚拟工具后面，但根据我的经验，最好只启用你实际需要的服务器。

5. 工具在 agent 模式下运行，且每次调用都会请求确认。 MCP 工具在普通的问答模式下无法触发，所以如果模型一直在描述图片而不是真正开始制作，请先检查模式下拉菜单。确认弹窗提供了一个下拉选项，允许你将该工具设置为“仅在此会话允许”、“在此工作区允许”或“始终允许”。对于像 list_models 和 get_result 这样的免费工具，选择“始终允许”完全没问题。但对于 generate_image，我建议保持“每次调用均需确认”，因为每次调用都会消耗真实资金；而对于视频，无论如何我们这边都通过 confirm_cost 进行了双重确认。

本文的演示媒体花费了多少？

以下是标准的单次生成价格，也是 list_models 汇报给智能体的相同数值：

这一次所有素材都是一稿通过。但这并非常态，因此在处理包含屏幕显示或复杂几何构图的内容时，请预留出重试（reroll）的预算，并在合并到主分支之前仔细查看全尺寸的生成结果。

如果你已经在其他编辑器中使用了这个服务器，那么上文的 .vscode/mcp.json 就是唯一的新内容：相同的密钥、相同的余额、相同的生成历史。如果是从零开始，我们的 Claude Code 实战指南 还提供了另外四个几乎可以直接套用的使用场景。准备好了吗：立即 创建一个密钥 并让 Copilot 为你生成第一张 README 横幅吧。

常见问题

VS Code 是否原生支持带 Authorization 头的远程 MCP 服务器？

是的，原生支持。远程服务器在 mcp.json 中定义为 type: "http"、url 以及可选的 headers 对象，并且通过 ${input:…} 引用可以将敏感密钥排除在文件之外，这一点已在 2026年7月11日 针对 VS Code MCP 官方文档进行了核对验证。VS Code 同时也支持远程服务器的 OAuth 认证；我们的接口目前采用 Bearer 密钥进行身份验证，并计划在未来提供 OAuth 2.1 作为第二选择。

将 .vscode/mcp.json 提交到 git 安全吗？

安全，前提是你的密钥存放在 inputs 引用中，而不是直接写在文件里。提交的 JSON 文件只包含占位符；VS Code 会在首次启动时提示每个开发者输入自己的密钥，并将其保存在加密存储中。这种按成员隔离的方式也非常实用：在 Profile → MCP API Keys 中，每个密钥都有其独立的运行日志和可选的每日美元消费额度上限，且人员离职时只需一键撤销，不会影响其他任何人。

为什么 Copilot Chat 中没有出现 MCP 工具？

绝大多数情况归结于以下三个原因。首先，你可能未处于 agent 模式，普通的聊天模式不会显露 MCP 工具。第二，服务器可能根本没有启动，请运行 MCP: List Servers 检查其状态。第三，你的 Copilot 账号可能是由组织提供的，而“Copilot 中的 MCP 服务器”政策仍处于禁用状态，这会导致无声的失败，只有组织管理员才能启用它。如果工具显示了但调用返回 401，则是密钥本身有误或已被撤销，你可以通过在 MCP 服务器页面 上使用示例片段发起一次原始请求，在几秒内就能确认原因。

我需要 Google API 密钥才能在 VS Code 中生成图片吗？

不需要。本地运行的图片 MCP 服务器直接与 Gemini API 通信，这意味着你需要使用自己的 Google 密钥、承受配额限制并自行付费。而远程服务器则是在 BananaBanana 托管的 Vertex AI 密钥池上运行生成，你唯一的凭证就是个人资料页中的 bb_live_ 密钥：按生成次数计费，无最低消费限制，且与网页端应用共享同一个预充值余额。

GitHub Copilot 是否可以通过同一个服务器生成视频？

可以，但包含一个费用确认步骤。generate_video 会先返回一段报价，智能体必须以匹配准确金额的 confirm_cost 重新发起调用，之后才会扣费。价格范围从无声 720p 短视频的 $0.10，到顶级带音频的 Veo 3.1 渲染的 $4.40 不等，而带声音的 Omni Flash 按每秒 $0.10 计费（每段片段 $0.30–$1.00）。由于视频片段的生成需要一到十分钟，因此智能体在继续为你编写代码的同时，会在后台轮询调用 get_result 检查结果。