Generate Images in VS Code: Copilot MCP Setup Guide

An MCP server for VS Code is an external toolbox that GitHub Copilot's agent mode can call from chat: one JSON file in your repo, and Copilot gains tools its models don't have, image generation included. Copilot writes components and refactors tests all day, but no model behind it can produce an image file. Add a generation server and "make a 16:9 banner for this README" becomes a chat instruction that ends with a real file in assets/.

Here's the whole setup, if that's all you came for. Create an API key in your BananaBanana profile, then put this in .vscode/mcp.json at the repo root:

{
  "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}"
      }
    }
  }
}

Start the server (VS Code shows a Start hint right inside the file), paste your key once when prompted, done. The file contains no secret, so it's safe to commit. No local process, no Google Cloud account, no subscription: images bill from $0.03 off a prepaid balance, video from $0.10. Both demo images below were generated on a live key through the same HTTP endpoint this config points at, while I wrote the text; traces and the $0.55 media bill are further down.

Why teach GitHub Copilot to generate images?

Because repos need images at the least convenient moments. A README hero so the project page doesn't open with a wall of shields. A banner for the docs site. Screenshots aside, every one of these used to be a detour: browser tab, prompt, download, rename, drag into the repo, back to the editor. Ten minutes per asset if nothing goes wrong.

With an MCP server, Copilot runs that loop in agent mode. It writes the prompt, calls generate_image, pulls the file into the folder you named, and edits the markdown reference. You review a diff.

The bigger reason is the team angle, and it's the reason this guide exists as a separate article rather than a paragraph in the Cursor one. .vscode/mcp.json is a workspace file. Commit it once and every developer who clones the repo gets the image toolbox on first open, with VS Code asking each person for their own key. One config, one key per human, zero secrets in git.

Local MCP servers for image generation exist too, and they're fine if you enjoy running a Node process and bringing your own Google API key with your own quotas. The remote option skips all of it: the endpoint already runs on our side, on the same pipeline as the BananaBanana web generator, and your only credential is a revocable bb_live_ key.

How do you set up mcp.json in VS Code?

Config details are checked against the official VS Code MCP docs as of July 11, 2026. Three steps.

First, register and open Profile → MCP API Keys. The key is shown once and stored hashed on our side, so copy it right away. New accounts start with $0.10 on the balance; that's three test images on the cheapest model.

Second, create the config. Two locations work:

• .vscode/mcp.json in the repo, which is the one worth committing;
• a user-level mcp.json (Command Palette → MCP: Open User Configuration) that follows you into every workspace.

The snippet at the top uses the inputs mechanism, and it's genuinely the nicest secret handling of any MCP client I've configured. ${input:bb-api-key} tells VS Code to prompt for the value the first time the server starts. "password": true masks what you type, and the value goes into encrypted storage, not into the file. Compare that with Cursor, where ${env:…} interpolation depends on the editor actually seeing your shell environment (a classic silent failure for GUI-launched apps). VS Code sidesteps the problem entirely.

Third, start the server: Command Palette → MCP: List Servers → bananabanana → Start, or click the inline hint in the JSON file. Open Copilot Chat in agent mode, check the tools picker, and you should see seven tools, list_models through list_generations. Our MCP server page keeps a compatibility table for every client we've verified; VS Code's row is the one this article expands:

Nothing showing up? The quirks section covers the three usual causes, and one of them is a GitHub org policy you can't fix from inside the editor.

Use case: README and docs assets straight into the repo

The scenario I built this article around: your team open-sources a CLI tool, and the repo needs a README hero plus an image for the docs quickstart. In Copilot Chat (agent mode) you ask for the banner, the agent composes a photography-style prompt and calls the tool. This is the actual trace, real job id and all:

→ 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/…"}]}

About twenty seconds from call to file. Here's that exact output, first take:

One honest note before you ship something like this: zoom in and the on-screen "terminal output" is plausible-looking gibberish. At README width nobody will ever notice. As a full-bleed docs hero where text is readable, they might. Readable UI text in generated images is still a weak spot for every photorealistic model, so keep screens small or ask for an abstract screen instead.

The docs quickstart image is the same move with a calmer brief: overhead flat-lay, keyboard, a printed diagram with sticky notes, tea. One call, $0.11:

Both demos ran on Nano Banana Pro because they ship on this page. For internal wikis and issue templates I'd drop to nano-banana-2-lite at $0.03 and not think twice; the Lite guide maps where the cheap model is good enough. Signed file URLs stay valid for 24 hours, and a fresh get_result call reissues them.

Video works from the same chat. generate_video never charges on the first call: it returns a quote, and the agent has to repeat the call with confirm_cost accepting the exact amount. A silent 720p clip starts at $0.10; Omni Flash with sound is a flat $1.00.

VS Code quirks worth knowing before you roll this out

Collected while testing the setup above, in the order they're likely to bite.

1. The top-level key is servers, not mcpServers. Every other major client (Claude, Cursor, Windsurf) uses mcpServers, so configs copied from another tool's docs fail in VS Code, and the JSON schema hints are easy to ignore. Same trap in reverse when you copy VS Code snippets elsewhere. The type: "http" field is also worth keeping explicit for remote servers.

2. Changing a stored input value is weirdly hard. The first prompt stores your key in encrypted storage, and there's no obvious "edit secret" button afterwards. The working path: open .vscode/mcp.json, hover over the server, and use the inline controls to restart with cleared inputs, or wipe stored values via MCP: List Servers → server → disconnect and re-add. It's rougher over Remote SSH, where re-prompting has known issues per the VS Code issue tracker. Rotating a revoked key takes a minute of clicking you didn't plan for.

3. On Copilot Business or Enterprise, MCP is off until an admin flips a policy. The "MCP servers in Copilot" policy is disabled by default for organization-issued seats, per GitHub's policy docs. The confusing part is the failure mode: the server starts fine, the config validates, and the tools simply never appear in chat. If you're on a personal Copilot plan (including Free), none of this applies.

4. There's a hard cap of 128 tools per chat request. Built-in tools, extension tools and every enabled MCP server all count against it, per the agent tools docs. Our server adds seven, which is nothing on its own, but stack a few chatty servers and requests start failing until you deselect entire servers in the tools picker. VS Code can group overflow behind virtual tools; in my experience it's still better to keep only the servers you actually use enabled.

5. Tools run in agent mode, and each call asks for confirmation. MCP tools don't fire from plain ask mode, so if the model keeps describing images instead of making them, check the mode dropdown first. Confirmations have a dropdown to allow a tool for the session, the workspace, or always. For free tools like list_models and get_result, "always" is fine. For generate_image I'd keep per-call confirmation on, since every call spends real money; video is double-locked by confirm_cost on our side regardless.

What did this article's demo media cost?

Standard per-generation prices, the same numbers list_models reports to the agent:

Everything landed on the first attempt this time. That won't always happen, so budget a reroll on anything with visible screens or object geometry, and look at results at full size before they hit the main branch.

If you already use this server in another editor, the .vscode/mcp.json above is the only new part: same key, same balance, same generation history. Coming from zero, the Claude Code walkthrough has four more use cases that transfer almost verbatim. Ready when you are: create a key and ask Copilot for your first README banner.

FAQ

Does VS Code support remote MCP servers with an Authorization header?

Yes, natively. A remote server is type: "http" plus url and an optional headers object in mcp.json, and ${input:…} references keep the secret out of the file, verified against the official VS Code MCP docs on July 11, 2026. VS Code also supports OAuth for remote servers; our endpoint currently authenticates with Bearer keys, with OAuth 2.1 planned as a second option.

Is it safe to commit .vscode/mcp.json to git?

Yes, if the key lives in an inputs reference rather than the file. The committed JSON carries only the placeholder; VS Code prompts each developer for their own value on first start and keeps it in encrypted storage. That per-person split is worth having anyway: every key gets its own usage log and optional daily USD cap in Profile → MCP API Keys, and offboarding is a one-click revoke that affects nobody else.

Why don't the MCP tools show up in Copilot Chat?

Three causes cover most cases. You're not in agent mode, and other chat modes don't expose MCP tools. The server was never started, so run MCP: List Servers and check its state. Or your Copilot seat comes from an organization and the "MCP servers in Copilot" policy is still disabled, which fails silently; only an org admin can enable it. If tools appear but calls return 401, the key itself is wrong or revoked, and a raw request from the snippet on the MCP server page will confirm that in seconds.

Do I need a Google API key to generate images in VS Code?

No. Locally-run image MCP servers talk to the Gemini API directly, which means your own Google key, quotas and billing. The remote server runs generation on BananaBanana's managed pool of Vertex AI keys, and your only credential is the bb_live_ key from your profile: per-generation prices, no minimum spend, one prepaid balance shared with the web app.

Can GitHub Copilot generate video through the same server?

Yes, with a cost confirmation step. generate_video first returns a quote, and the agent must repeat the call with confirm_cost matching the exact amount before anything is charged. Prices run from $0.10 for a short silent 720p clip to $4.40 for a top-end Veo 3.1 render with audio, and Omni Flash with sound is a flat $1.00. Clips take one to ten minutes, so the agent polls get_result while it keeps working on your code.