Generate Images with Gemini CLI and Nano Banana Extension

How to Generate Images with Gemini CLI and Nano Banana Extension

This tutorial will guide you through installing and using the Nano Banana extension for the Gemini CLI, enabling you to generate images directly from your terminal. You’ll learn how to set up the extension, configure API keys, and use new commands to create various types of images for your projects.

Prerequisites

• Gemini CLI installed
• An API key for Google AI Studio (the same one used for Gemini CLI authentication can be reused)
• Node.js and npm installed (for global extension installation)

Step 1: Install the Nano Banana Extension

The first step is to install the Nano Banana extension. This extension adds new image generation capabilities to your Gemini CLI. You’ll install it globally, not just within a specific project.

1. Open your terminal.
2. Visit the Gemini CLI extensions page and search for the “Nano Banana” extension.
3. Locate the installation command for the extension. It will typically look like this:

   gemini install nanobanana

4. Copy this command.
5. Paste the command into your terminal and press Enter.
6. After the installation completes, you should see a new folder for the nanobanana extension appear in your global Gemini extensions directory (often found within a .gemini folder on your system).

Step 2: Configure Your API Key

The Nano Banana extension requires an API key to function, as image generation services have associated costs. You can use the same API key you generated for the Gemini CLI.

1. Ensure you have your Google AI Studio API key. If you don’t have one, follow the instructions from earlier lessons (like Lesson 6) to create one.
2. Locate your project’s .env file. If it doesn’t exist, create it in the root of your project.
3. Add a new environment variable to the .env file for the Nano Banana API key. Name it NANOBANANA_GEMINI_API_KEY (all uppercase).
4. Paste your API key as the value for this variable.

   Example: NANOBANANA_GEMINI_API_KEY=YOUR_API_KEY_HERE

5. Save the .env file.

Expert Note: Be cautious about sharing your API key. The tutorial creator plans to delete their key after recording, and you should take similar precautions to avoid unauthorized usage and potential charges.

Step 3: Explore Nano Banana Commands

Once the extension is installed and configured, new commands become available within the Gemini CLI. You can access these by initiating a Gemini chat session.

1. Open your terminal and start a new Gemini chat instance by typing gemini.
2. In the chat interface, type a forward slash (/).
3. Press the up arrow key (↑) or scroll through the available commands. You will see new commands added by the Nano Banana extension, such as:
   • /diagram: To generate diagrams.
   • /edit: To edit existing images.
   • /generate: To generate new images from prompts.
   • /icon: To create icons.

Step 4: Generate Images with a Prompt

Now you can use the /generate command to create images. You can also provide context from your project files to help Gemini understand your request better.

1. In the Gemini chat, select the relevant file(s) or code snippets you want to provide context for. For example, if you want to generate images for combo cards on a homepage, select the homepage file.
2. Type the /generate command.
3. Follow the command with a clear prompt describing the images you want. For instance:

   I need three images for the food combinations on the homepage. One for cheese and marmite, one for crisps and chocolate, and one for strawberries and pepper.

4. Press Enter.
5. Gemini will likely ask for permission to use the Nano Banana MCP (Multi-modal Content Processing) tool. Choose to allow it, either for this instance or always.
6. After processing, Gemini will indicate that the images have been generated and saved, usually in a specific output directory like nano_banana_output.

Step 5: Review Generated Images

Check the output directory to see the images created by the Nano Banana extension.

1. Navigate to the output directory specified by Gemini (e.g., nano_banana_output) using your file explorer.
2. You should find the generated images, often named or organized based on your prompt (e.g., one for cheese and marmite, one for crisps and chocolate, etc.).
3. Open the images to review their quality and relevance to your prompt.

Tip: The cost per image typically ranges from 15 to 20 cents, depending on the image quality and resolution.

Step 6: Use Generated Images in Your Project

Once you are satisfied with the generated images, you can instruct Gemini to use them within your project files.

1. Re-open the Gemini chat interface.
2. Ensure the relevant project file (e.g., your homepage file) is in context.
3. Ask Gemini to incorporate the newly generated images. For example:

   Can you add the three new images to the combo cards on the homepage?

4. Gemini will process this request, potentially moving the images to appropriate directories (like public) and updating your code with image URLs or references.
5. You might encounter an MCP error context 7. This is a known issue that can usually be resolved by restarting your Gemini chat session.

Step 7: Preview Your Changes

Finally, check your project in a web browser to see the generated images integrated into your website.

1. Open your project in a web browser.
2. Navigate to the section where the images were supposed to be added (e.g., the combo cards on the homepage).
3. Verify that the images have been correctly displayed.

Congratulations! You have successfully installed and used the Nano Banana extension to generate and integrate images into your project using the Gemini CLI.

Source: Gemini CLI Tutorial #10 – Using the Nanobanana Extension (YouTube)