vscode-nanobanana

Nano Banana Image Generator

A VS Code extension that generates images with Gemini API. It can build prompts for image generation through the GitHub Copilot Language Model API, then generate and open the output image in VS Code.

Features

• Right-click command from editor selection: Generate Image with Nano Banana Pro
  • Optional final refinement step: edit the just-generated image with an extra instruction (reference image based)
• Right-click on image (.png, .jpg, .jpeg) in Editor or Explorer: Edit Image with Nano Banana Pro
• Open Nano Banana Image Editor from image context menu for visual annotations (rectangle, circle, text) + prompt-based editing
• Secure Gemini API key storage (SecretStorage)
• Style picker (12 built-in styles)
• Aspect ratio picker
• Configurable image size (1K, 2K, 4K)
• Cancellable generation progress UI
• Prompt generation with VS Code Copilot LM API (vscode.lm)
• Runtime i18n for extension messages

Supported UI Languages

• English (en)
• Traditional Chinese (zh-TW)
• Simplified Chinese (zh-CN)
• Japanese (ja)
• Korean (ko)
• Thai (th)
• Vietnamese (vi)

Language behavior:

• Default: auto-detect from current VS Code display language
• Optional override: nanoBanana.displayLanguage

Commands

• nanoBanana.generateFromSelection
• nanoBanana.setGeminiApiKey
• nanoBanana.selectCopilotPromptModel (loads currently available models from VS Code Language Model API)
• nanoBanana.editImageWithReference (edit selected/open image as a Gemini reference image)
• nanoBanana.openImageEditor (open the visual annotation editor for image-to-image editing)

Command labels are localized through package.nls.*.json.

Settings

• nanoBanana.modelId (dropdown: gemini-3-pro-image-preview, gemini-2.5-flash-image; default: gemini-3-pro-image-preview)
• nanoBanana.geminiApiBaseUrl (default: https://generativelanguage.googleapis.com/v1beta)
• nanoBanana.copilotPromptModel (string; default: auto. Use command nanoBanana.selectCopilotPromptModel to load live model list)
• nanoBanana.imageOutputFormat (default: png)
• nanoBanana.outputDirectory (optional; default: empty. When empty, files are saved to system temp folder)
• nanoBanana.imageSize (default: 1K, options: 1K, 2K, 4K)
• nanoBanana.defaultStyle (dropdown; default: article-cover)
• nanoBanana.rememberLastStyle (default: true)
• nanoBanana.defaultAspectRatio (default: 1:1)
• nanoBanana.rememberLastAspectRatio (default: true)
• nanoBanana.displayLanguage (default: auto)

Gemini API Key Setup

Nano Banana requires a Gemini API key for image generation and image editing.

1. Go to Google AI Studio and create an API key: https://aistudio.google.com/apikey
2. In VS Code, open Command Palette and run: Nano Banana: Set Gemini API Key
3. Paste your API key and confirm
4. Start generating/editing images with Nano Banana commands

Notes:

• The key is stored in VS Code SecretStorage, not in your workspace files.
• Never commit your API key to source control.

Development

npm install
npm run typecheck
npm run test
npm run build

Packaging / Publishing

npm run package:vsix
npm run publish:vscode

License

This project is licensed under the MIT License.

This site is open source. Improve this page.