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

> Four Gemini image models now draw and redraw pictures on your ngrok credits, from your code or the playground.

- Date: 2026-10-28
- Author: Brenden Ehlers
- Products: AI Gateway
- URL: https://ngrok.com/changelog/ai-gateway-gemini-image-output

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:

![A Gemini-generated banner that reads "Chaotic engineering: now with Gemini image gen!" under a glittering ngrok.ai logo. A robot slides out of a playground portal on the left, and party robots on server racks on the right shout "We're live!" and "It's a wrap!"](https://ngrok.com/blog-assets/images/2026-10-28-ai-gateway-gemini-image-output/gemini-image-gen-banner.jpg)

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:

| Model ID                      | Input | Text output | Image output |
| ----------------------------- | ----- | ----------- | ------------ |
| `gemini-3-pro-image`          | $2.00 | $12.00      | $120.00      |
| `gemini-3.1-flash-image`      | $0.50 | $3.00       | $60.00       |
| `gemini-nano-banana-2.1`      | $1.50 | $7.50       | $30.00       |
| `gemini-3.1-flash-lite-image` | $0.25 | $1.50       | $30.00       |

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**](https://app.ngrok.ai/models) for current pricing. With your own Google key attached to the gateway, Google bills you directly.

In the [playground](https://app.ngrok.ai/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:

![The AI Gateway playground in dark mode with two turns from Gemini 3.1 Flash Image. The first prompt asks for a flat 404 page illustration of a small robot holding a paper map, lost in a server room, and the reply shows the robot under "404 Oopsy! Page Not Found." The second turn attaches that image with the prompt "Same robot, but it found the exit and is doing a tiny victory dance," and the reply shows the same robot cheering under an EXIT sign with its map dropped on the floor.](https://ngrok.com/blog-assets/images/2026-10-28-ai-gateway-gemini-image-output/playground-edit-image-dark.jpg)

## Get started

[Create an ngrok account or sign in](https://app.ngrok.ai/). Create an [**access key**](https://app.ngrok.ai/keys) 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](https://app.ngrok.ai/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](https://ngrok.com/docs/ai-gateway/sdks/google) covers the rest of the SDK setup. Install the SDK and a TypeScript runner:

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

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

```bash
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`:

```typescript
import { writeFile } from "node:fs/promises";
import { GoogleGenAI, Modality } from "@google/genai";

const client = new GoogleGenAI({
	apiKey: process.env.AI_GATEWAY_API_KEY,
	httpOptions: {
		baseUrl: "https://gateway.ngrok.ai",
		apiVersion: "v1beta",
	},
});

const response = await client.models.generateContent({
	model: "gemini-3.1-flash-image",
	contents: "Draw a flat illustration for a 404 page: a small robot holding a paper map, lost in a server room.",
	config: { responseModalities: [Modality.TEXT, Modality.IMAGE] },
});

for (const part of response.candidates?.[0]?.content?.parts ?? []) {
	if (part.text) {
		console.log(part.text);
	}
	if (part.inlineData?.data) {
		const file = part.inlineData.mimeType === "image/jpeg" ? "404-robot.jpg" : "404-robot.png";
		await writeFile(file, Buffer.from(part.inlineData.data, "base64"));
		console.log(`Saved ${file}`);
	}
}
```

Run the example from your project directory:

```bash
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:

```text
Here's a friendly robot looking for its way back to the right page.
Saved 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**](https://app.ngrok.ai/usage), find the request that drew your robot, and inspect its model, provider, status, token usage, and cost.