Skip to main content
The Vercel AI SDK is the TypeScript toolkit for building AI-powered applications. It provides a unified API for image generation that works seamlessly with Lumenfall through the OpenAI provider.

​
Installation

npm install ai @ai-sdk/openai

​
Configuration

Use createOpenAI from @ai-sdk/openai to create a custom provider that points to Lumenfall: 
import { createOpenAI } from "@ai-sdk/openai";

const lumenfall = createOpenAI({
  apiKey: process.env.LUMENFALL_API_KEY,
  baseURL: "https://api.lumenfall.ai/openai/v1",
});

​
Generate images

Use the generateImage function from the AI SDK with your Lumenfall provider: 
import { generateImage } from "ai";
import { createOpenAI } from "@ai-sdk/openai";

const lumenfall = createOpenAI({
  apiKey: process.env.LUMENFALL_API_KEY,
  baseURL: "https://api.lumenfall.ai/openai/v1",
});

const { image } = await generateImage({
  model: lumenfall.image("gemini-3-pro-image"),
  prompt: "A serene mountain landscape at sunset with dramatic clouds",
  size: "1024x1024",
});

console.log(image.base64);
In AI SDK versions prior to 6, the function was named experimental_generateImage. It was promoted to stable and renamed to generateImage in AI SDK 6.

​
Generation options

const { image } = await generateImage({
  model: lumenfall.image("gemini-3-pro-image"),
  prompt: "A beautiful garden with roses",
  size: "1792x1024",
  providerOptions: {
    openai: {
      quality: "hd",
      style: "natural",
    },
  },
});

​
Generate multiple images

The SDK automatically batches requests when generating multiple images: 
const { images } = await generateImage({
  model: lumenfall.image("gpt-image-1.5"),
  prompt: "Abstract art with vibrant colors",
  n: 4,
  size: "512x512",
});

for (const image of images) {
  console.log(image.base64);
}

​
Using different models

// Use Gemini 3 Pro Image
const { image: gemini } = await generateImage({
  model: lumenfall.image("gemini-3-pro-image"),
  prompt: "A futuristic cityscape",
});

// Use GPT Image 1.5
const { image: gptImage } = await generateImage({
  model: lumenfall.image("gpt-image-1.5"),
  prompt: "A watercolor painting of flowers",
});

// Use Flux.2 Max
const { image: flux } = await generateImage({
  model: lumenfall.image("flux.2-max"),
  prompt: "A photorealistic portrait",
});

​
Edit images

Image editing was introduced in AI SDK 6. For earlier versions, use the OpenAI SDK directly for image editing.
AI SDK 6 extends generateImage to support image editing by accepting reference images alongside your text prompt: 
import { generateImage } from "ai";
import { createOpenAI } from "@ai-sdk/openai";
import fs from "fs";

const lumenfall = createOpenAI({
  apiKey: process.env.LUMENFALL_API_KEY,
  baseURL: "https://api.lumenfall.ai/openai/v1",
});

const imageBuffer = fs.readFileSync("original.png");

const { image } = await generateImage({
  model: lumenfall.image("gpt-image-1.5"),
  prompt: "Add a rainbow in the sky",
  providerOptions: {
    openai: {
      image: imageBuffer,
    },
  },
});

​
With a mask

const imageBuffer = fs.readFileSync("original.png");
const maskBuffer = fs.readFileSync("mask.png");

const { image } = await generateImage({
  model: lumenfall.image("gpt-image-1.5"),
  prompt: "A sunlit indoor lounge area with a pool",
  providerOptions: {
    openai: {
      image: imageBuffer,
      mask: maskBuffer,
    },
  },
});

​
Next.js API Route

Create an API route for image generation: 
// app/api/generate-image/route.ts
import { generateImage } from "ai";
import { createOpenAI } from "@ai-sdk/openai";
import { NextResponse } from "next/server";

const lumenfall = createOpenAI({
  apiKey: process.env.LUMENFALL_API_KEY,
  baseURL: "https://api.lumenfall.ai/openai/v1",
});

export async function POST(request: Request) {
  const { prompt, model = "gemini-3-pro-image" } = await request.json();

  const { image } = await generateImage({
    model: lumenfall.image(model),
    prompt,
    size: "1024x1024",
  });

  return NextResponse.json({
    image: image.base64,
  });
}

​
React component example

"use client";

import { useState } from "react";

export function ImageGenerator() {
  const [prompt, setPrompt] = useState("");
  const [imageData, setImageData] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);

    const response = await fetch("/api/generate-image", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    });

    const { image } = await response.json();
    setImageData(image);
    setLoading(false);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Describe the image you want..."
      />
      <button type="submit" disabled={loading}>
        {loading ? "Generating..." : "Generate"}
      </button>
      {imageData && (
        <img src={`data:image/png;base64,${imageData}`} alt={prompt} />
      )}
    </form>
  );
}

​
Error handling

import { generateImage } from "ai";
import { createOpenAI } from "@ai-sdk/openai";

const lumenfall = createOpenAI({
  apiKey: process.env.LUMENFALL_API_KEY,
  baseURL: "https://api.lumenfall.ai/openai/v1",
});

try {
  const { image } = await generateImage({
    model: lumenfall.image("gemini-3-pro-image"),
    prompt: "A beautiful sunset",
  });
} catch (error) {
  if (error instanceof Error) {
    console.error("Image generation failed:", error.message);
  }
}

​
Environment variables

Add these to your .env.local: 
LUMENFALL_API_KEY=lmnfl_your_api_key
Never expose your API key in client-side code. JavaScript running in the browser can be inspected by anyone, and embedded API keys can be easily extracted. Anyone with access to your API key can make requests at your expense.Always make API calls from server-side routes (API routes, Server Actions, or server components) where the API key remains on the server and is never sent to the browser.

​
Using AI SDK versions prior to 6

If you’re using AI SDK versions prior to 6, use the experimental_generateImage function with an alias: 
import { experimental_generateImage as generateImage } from "ai";
import { createOpenAI } from "@ai-sdk/openai";

const lumenfall = createOpenAI({
  apiKey: process.env.LUMENFALL_API_KEY,
  baseURL: "https://api.lumenfall.ai/openai/v1",
});

const { image } = await generateImage({
  model: lumenfall.image("gemini-3-pro-image"),
  prompt: "A serene mountain landscape at sunset",
  size: "1024x1024",
});

​
Migrating to AI SDK 6+

When upgrading to AI SDK 6 or later:
  1. Replace experimental_generateImage with generateImage
  2. The function signature remains the same
// Before (AI SDK < 6)
import { experimental_generateImage as generateImage } from "ai";

// After (AI SDK 6+)
import { generateImage } from "ai";

​
Next steps

OpenAI SDK

Use the OpenAI SDK directly for more control.

Available Models

See all available image generation models.