Image Generation Quickstart

This quickstart walks you through generating your first image with AI Gateway.

1. Set up your project

   Create a new directory and initialize a Node.js project:

   Terminal

   mkdir ai-image-demo
   cd ai-image-demo
   pnpm init

2. Install dependencies

   Install the AI SDK and development dependencies:

   npmyarnpnpmbun

   Terminal

   npm install ai dotenv @types/node tsx typescript

   Terminal

   yarn add ai dotenv @types/node tsx typescript

   Terminal

   pnpm add ai dotenv @types/node tsx typescript

   Terminal

   bun add ai dotenv @types/node tsx typescript

3. Set up your API key

   Go to the AI Gateway API Keys page in your Vercel dashboard and click Create key to generate a new API key.

   Create a .env.local file and save your API key:

   .env.local

   AI_GATEWAY_API_KEY=your_ai_gateway_api_key

4. Generate an image

   Create an index.ts file. This example uses Nano Banana Pro (google/gemini-3-pro-image), a multimodal model that generates high-quality images:

   index.ts

   import { generateText } from 'ai';
   import fs from 'node:fs';
   import 'dotenv/config';
    
   async function main() {
     const result = await generateText({
       model: 'google/gemini-3-pro-image',
       prompt: 'A serene mountain landscape at sunset with a calm lake reflection',
     });
    
     // Nano Banana models return images in result.files with uint8Array
     const imageFiles = result.files.filter((f) =>
       f.mediaType?.startsWith('image/'),
     );
    
     if (imageFiles.length > 0) {
       const extension = imageFiles[0].mediaType?.split('/')[1] || 'png';
       fs.writeFileSync(`output.${extension}`, imageFiles[0].uint8Array);
       console.log(`Image saved to output.${extension}`);
     }
   }
    
   main().catch(console.error);

   Run your script:

   Terminal

   pnpm tsx index.ts

   The generated image will be saved in your project directory.

5. Next steps

   • See supported image generation models
   • Learn about multimodal LLMs that can generate images alongside text
   • Explore image editing capabilities with OpenAI models

Fast image generation with Gemini 2.5 Flash. Uses the same generateText function and saves images the same way as Nano Banana Pro:

import { generateText } from 'ai';
import fs from 'node:fs';
import 'dotenv/config';
 
const result = await generateText({
  model: 'google/gemini-2.5-flash-image',
  prompt: 'Create an illustration of a hummingbird at sunrise',
});
 
// Nano Banana models return images in result.files with uint8Array
const imageFiles = result.files.filter((f) =>
  f.mediaType?.startsWith('image/'),
);
 
if (imageFiles.length > 0) {
  fs.writeFileSync('output.png', imageFiles[0].uint8Array);
}

Fast, high-quality image generation from Black Forest Labs. Image-only models use experimental_generateImage and return images in result.images with base64 encoding:

import { experimental_generateImage as generateImage } from 'ai';
import fs from 'node:fs';
import 'dotenv/config';
 
const result = await generateImage({
  model: 'bfl/flux-2-flex',
  prompt: 'A vibrant coral reef with tropical fish',
  aspectRatio: '4:3',
});
 
// Image-only models return images in result.images with base64
const image = result.images[0];
const buffer = Buffer.from(image.base64, 'base64');
fs.writeFileSync('output.png', buffer);

Professional-grade image generation. Same pattern as Flux:

import { experimental_generateImage as generateImage } from 'ai';
import fs from 'node:fs';
import 'dotenv/config';
 
const result = await generateImage({
  model: 'recraft/recraft-v3',
  prompt: 'A minimalist logo design for a tech startup',
});
 
const buffer = Buffer.from(result.images[0].base64, 'base64');
fs.writeFileSync('output.png', buffer);

Google's Imagen model for high-fidelity image generation:

import { experimental_generateImage as generateImage } from 'ai';
import fs from 'node:fs';
import 'dotenv/config';
 
const result = await generateImage({
  model: 'google/imagen-4.0-generate-001',
  prompt: 'A photorealistic image of a mountain landscape at golden hour',
  aspectRatio: '16:9',
});
 
const buffer = Buffer.from(result.images[0].base64, 'base64');
fs.writeFileSync('output.png', buffer);

How you save images depends on the model type:

For more details, see the Image Generation Capabilities docs.