Generate images with Gemini's Nano Banana models in AI Gateway

Another day, another modality. AI Gateway now returns images from Google’s Gemini image models, so your app can ask for a picture with the same ngrok access key and credits it already uses for text.

We asked one of them to announce the launch. It went with glitter:

Send a prompt to Gemini’s GenerateContent API at /v1beta/models/<MODEL_ID>:generateContent or to the Interactions API at /v1beta/interactions. The image comes back inline in the response as base64 data, next to whatever the model wants to say about its work.

These four models draw on ngrok-managed inference:

Google calls them Nano Banana Pro, Nano Banana 2, Nano Banana 2.1, and Nano Banana 2 Lite. (We didn’t pick the names, but we’re not complaining.) Prices are per million tokens. Google counts a generated image as image output tokens, and AI Gateway bills those at the image output rate. Images you send in are billed at the text input rate. Check Models for current pricing. With your own Google key attached to the gateway, Google bills you directly.

In the playground, pick one of these models and send a prompt. Generate images switches on and stays on, because these models always reply with pictures. Each image gets Download and Edit image buttons. Edit image sends the picture back to the model with your next prompt, so you can art-direct it instead of starting over.

We asked Gemini 3.1 Flash Image for a robot lost in a server room, then used Edit image to give it a happier ending:

Get started

Create an ngrok account or sign in. Create an access key that allows Google, and confirm your account has credits. To use your own Google key instead, attach it to the gateway.

To meet the robot before you write any code, send the prompt below in the playground with Gemini 3.1 Flash Image.

This example uses Google’s Gen AI SDK for TypeScript, because image output is a native Gemini feature. The Google Gen AI SDK guide covers the rest of the SDK setup. Install the SDK and a TypeScript runner:

npm install @google/genai && npm install --save-dev tsx

Save your ngrok access key in .env.local. Keep this file out of version control:

AI_GATEWAY_API_KEY=your_access_key_here

The example asks for the same lost robot and saves it to disk. responseModalities asks Gemini for text and an image in the same reply. Use an ES module project ("type": "module" in package.json) for top-level await. Save this example as index.ts:

1import { writeFile } from "node:fs/promises";2import { GoogleGenAI, Modality } from "@google/genai";3 4const client = new GoogleGenAI({⋯5	apiKey: process.env.AI_GATEWAY_API_KEY,6	httpOptions: {⋯7		baseUrl: "https://gateway.ngrok.ai",8		apiVersion: "v1beta",9	},10});11 12const response = await client.models.generateContent({⋯13	model: "gemini-3.1-flash-image",14	contents: "Draw a flat illustration for a 404 page: a small robot holding a paper map, lost in a server room.",15	config: { responseModalities: [Modality.TEXT, Modality.IMAGE] },16});17 18for (const part of response.candidates?.[0]?.content?.parts ?? []) {⋯19	if (part.text) {⋯20		console.log(part.text);21	}22	if (part.inlineData?.data) {⋯23		const file = part.inlineData.mimeType === "image/jpeg" ? "404-robot.jpg" : "404-robot.png";24		await writeFile(file, Buffer.from(part.inlineData.data, "base64"));25		console.log(`Saved ${file}`);26	}27}

Run the example from your project directory:

node --env-file=.env.local --import tsx index.ts

Each part of the reply holds either text or an image. The loop prints the text and decodes inlineData.data into an image file. The output looks something like this illustrative run. Your robot gets lost in a new way every time:

1Here's a friendly robot looking for its way back to the right page.2Saved 404-robot.png

To see how the other models draw the same robot, change model to "gemini-3-pro-image", "gemini-nano-banana-2.1", or "gemini-3.1-flash-lite-image".

Open Logs, find the request that drew your robot, and inspect its model, provider, status, token usage, and cost.