在 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 提示），在提示时粘贴一次你的密钥，就搞定了。该文件不包含任何敏感信息，因此可以放心提交。无需本地运行进程，无需自建云账号，也无需订阅：图片生成费用从预充值余额中扣除，价格为 $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 进程并配置带有配额限制的个人上游供应商密钥，这也没什么问题。但远程服务器方案可以省去这一切：接口已经在我们这边运行，且采用与 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，检查工具选择器，你应该能看到 10 个工具（从 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 服务器都会占用这一额度。我们服务器添加了 10 个，这本身微不足道，但如果堆叠了几个工具较多的服务器，请求就会开始失败，直到你在工具选择器中取消勾选某些服务器。尽管 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 认证；自 2026 年 8 月 1 日起，我们的接口除 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 服务器页面 上使用示例片段发起一次原始请求，在几秒内就能确认原因。

我需要自己的云账号才能在 VS Code 中生成图片吗？

不需要。本地运行的图片 MCP 服务器直接与上游供应商通信，这意味着你需要使用自己的 API 密钥、承受配额限制并自行付费。而远程服务器则是在 BananaBanana 托管的密钥池上运行生成，你唯一的凭证就是个人资料页中的 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 检查结果。