VS Code + NanoBanana MCP

Most AI drawing tools excel at generating from scratch, but the demands you often encounter are not "draw from scratch," but rather "make some adjustments."

For example, you already have a product screenshot and just want to change the English buttons to Chinese. Or you have two images from different angles and want to apply the color scheme from the first image to the second. These "fine-tuning" needs are not very convenient for traditional text-to-image models.

NanoBanana, based on Google Gemini, has the biggest feature of supporting multi-image input editing. You can provide it with several images and tell it how you want to combine them, and it can understand your intent. Now, with the MCP protocol integrated into VS Code, you can accomplish this with a single sentence in the Copilot chat window.

Step 1: Obtain API Key

Open the Ace Data Cloud application list, enter the available applications, and copy the API Key.

Get Ace Data Cloud API Key

Step 2: Install the Plugin

  1. Open the VS Code extension marketplace (Cmd+Shift+X)
  2. Search for NanoBanana MCP, or directly search for the extension ID: acedatacloud.mcp-nanobanana
  3. Click Install, and reload the window as prompted

Step 3: Fill in the API Key

  1. Press Cmd+Shift+P, execute: NanoBanana MCP: Set Ace Data Cloud API Key
  2. Paste the API Key and press enter to save (it will be saved in VS Code SecretStorage / system keychain)

If you want to change the Key, you can execute NanoBanana MCP: Clear Ace Data Cloud API Key and set it again.

Step 4: Verify Connection

  1. Open GitHub Copilot Chat and switch to Agent mode
  2. Directly state your request and mention nanobanana, for example: Use nanobanana to help me complete this task
  3. The first call will automatically route to this plugin and use your saved API Key

Advanced: Manual mcp.json (Optional)

If you prefer manual configuration, you can also write .vscode/mcp.json in your project:

{
  "servers": {
    "nanobanana": {
      "type": "http",
      "url": "https://nanobanana.mcp.acedata.cloud/mcp",
      "headers": {
        "Authorization": "Bearer ${input:acedata-api-key}"
      }
    }
  },
  "inputs": [
    {
      "id": "acedata-api-key",
      "type": "promptString",
      "description": "Ace Data Cloud API Key",
      "password": true
    }
  ]
}

Strengths of NanoBanana

Multi-image Combination Generation

You have an app screenshot and a photo of a hand, and you want to generate an effect image of "holding a phone displaying the app":

> Combine these two images: the first phone screenshot should be displayed on the screen of the second hand-holding phone photo, maintaining a natural perspective effect

nanobanana_edit_image supports multi-image input, and the AI can understand spatial relationships for intelligent synthesis. This type of request is difficult to achieve in Midjourney.

Modify Text in Screenshots

You have a screenshot of a 404 page and want to change it to a custom error page example:

> Change "Page Not Found" in this screenshot to "The backend is slacking off, please try again later," keeping the original font style

Gemini's semantic understanding ability allows it to accurately locate and replace text areas in images.

UI Empty State Illustrations

Many front-end projects require empty state illustrations (prompt pages when there is no data), but designing them specifically is too extravagant:

> Generate a 400x400 empty state illustration, a cat napping next to an empty box, with simple lines and a light blue and gray color scheme

nanobanana_generate_image performs well in simple style illustrations, suitable for UI component illustrations.

Tool List

Tool Description
nanobanana_generate_image Text to image generation
nanobanana_edit_image Image editing (supports multi-image input)

NanoBanana is not positioned to replace Midjourney, but to complement it—when you need to "modify" more than "draw," it is more useful.

Other Editor Configurations

  • Cursor — .cursor/mcp.json, configured using mcpServers format
  • Claude Code — terminal command line configuration, see Claude Code + NanoBanana MCP Tutorial
  • Claude Desktop — configuration file path: macOS ~/Library/Application Support/Claude/claude_desktop_config.json, Windows %APPDATA%\Claude\claude_desktop_config.json, using mcpServers format