VS Code + NanoBanana MCP

Most AI image generation tools excel at creating from scratch, but your common needs are often not to "draw from zero," but to "make some changes."

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

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

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

Step 2: Obtain and Enter the API Key

  1. Open Ace Data Cloud Console / Applications
  2. Copy your API Key (the same key can be used for all Ace Data Cloud MCP)
  3. Press Cmd+Shift+P, run: NanoBanana MCP: Set Ace Data Cloud API Key
  4. Paste the API Key and press Enter to save (stored in VS Code SecretStorage / system keychain)

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

Step 3: Verify Connectivity

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

Advanced: Manual mcp.json Configuration (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
    }
  ]
}

Step 3: Verify Connectivity

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

Advanced: Manual mcp.json Configuration (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-token}"
      }
    }
  },
  "inputs": [
    {
      "id": "acedata-token",
      "type": "promptString",
      "description": "Ace Data Cloud API key",
      "password": true
    }
  ]
}

Step 3: Verify Connectivity

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

Advanced: Manual mcp.json Configuration (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-token}"
      }
    }
  },
  "inputs": [
    {
      "id": "acedata-token",
      "type": "promptString",
      "description": "Ace Data Cloud API key",
      "password": true
    }
  ]
}

NanoBanana’s Strengths

Multi-image Combination Generation

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

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

nanobanana_edit_image supports multi-image input, and the AI can understand spatial relationships for intelligent composition. This kind of requirement 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 "Backend is slacking off, please try again later," keeping the original font style

Gemini’s semantic understanding allows it to accurately locate the text area in the image and replace it.

UI Empty State Illustration

Many frontend projects need empty state illustrations (prompt pages when no data is available), but dedicated design is too extravagant:

> Generate a 400x400 empty state illustration of a cat napping beside 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 images.

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 "edit" more than "create," it is more convenient.

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 — config file path: macOS ~/Library/Application Support/Claude/claude_desktop_config.json, Windows %APPDATA%\Claude\claude_desktop_config.json, using mcpServers format