Image generation has become a core feature of modern AI applications. But integrating with multiple image providers — each with different APIs, pricing, and capabilities — can be a pain.
LLM Gateway simplifies this by giving you a single, OpenAI-compatible API for image generation across providers like Google Gemini, Alibaba Qwen, ByteDance Seedream, and more. In this guide, we'll walk through generating images using both the OpenAI SDK and the Vercel AI SDK.
Prerequisites
- Sign up at llmgateway.io and create a project
- Copy your API key
- Export it in your environment:
export LLM_GATEWAY_API_KEY="llmgtwy_XXXXXXXXXXXXXXXX"
Option 1: The Images API (/v1/images/generations)
This is the simplest approach — a drop-in replacement for OpenAI's image generation endpoint.
Using curl
curl -X POST "https://api.llmgateway.io/v1/images/generations" \
-H "Authorization: Bearer $LLM_GATEWAY_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"model": "gemini-3-pro-image-preview",
"prompt": "A cute cat wearing a tiny top hat",
"n": 1,
"size": "1024x1024"
}'
Using the OpenAI SDK (Node.js)
import OpenAI from "openai";
import { writeFileSync } from "fs";
const client = new OpenAI({
baseURL: "https://api.llmgateway.io/v1",
apiKey: process.env.LLM_GATEWAY_API_KEY,
});
const response = await client.images.generate({
model: "gemini-3-pro-image-preview",
prompt: "A futuristic city skyline at sunset with flying cars",
n: 1,
size: "1024x1024",
});
response.data.forEach((image, i) => {
if (image.b64_json) {
const buf = Buffer.from(image.b64_json, "base64");
writeFileSync(`image-${i}.png`, buf);
}
});
That's it — point baseURL to LLM Gateway and use the standard OpenAI SDK. No new libraries needed.
Option 2: The Vercel AI SDK (generateImage)
If you're already using the Vercel AI SDK, LLM Gateway has a native provider package: @llmgateway/ai-sdk-provider.
npm install @llmgateway/ai-sdk-provider ai
Simple Image Generation
import { createLLMGateway } from "@llmgateway/ai-sdk-provider";
import { generateImage } from "ai";
import { writeFileSync } from "fs";
const llmgateway = createLLMGateway({
apiKey: process.env.LLM_GATEWAY_API_KEY,
});
const result = await generateImage({
model: llmgateway.image("gemini-3-pro-image-preview"),
prompt: "A cozy cabin in a snowy mountain landscape at night with aurora borealis",
size: "1024x1024",
n: 1,
});
result.images.forEach((image, i) => {
const buf = Buffer.from(image.base64, "base64");
writeFileSync(`image-${i}.png`, buf);
});
Conversational Image Generation with streamText
The real power comes when you combine image generation with chat. Using the chat completions approach, you can build conversational image generation — ask the model to create an image, then refine it through follow-up messages.
Here's a Next.js API route:
import { streamText, type UIMessage, convertToModelMessages } from "ai";
import { createLLMGateway } from "@llmgateway/ai-sdk-provider";
interface ChatRequestBody {
messages: UIMessage[];
}
export async function POST(req: Request) {
const body = await req.json();
const { messages }: ChatRequestBody = body;
const llmgateway = createLLMGateway({
apiKey: process.env.LLM_GATEWAY_API_KEY,
baseUrl: "https://api.llmgateway.io/v1",
});
try {
const result = streamText({
model: llmgateway.chat("gemini-3-pro-image-preview"),
messages: convertToModelMessages(messages),
});
return result.toUIMessageStreamResponse();
} catch {
return new Response(
JSON.stringify({ error: "LLM Gateway Chat request failed" }),
{ status: 500 },
);
}
}
On the frontend, use the useChat hook from @ai-sdk/react and render images from the assistant's response parts:
import { useChat } from "@ai-sdk/react";
export const ImageChat = () => {
const { messages, status, sendMessage } = useChat();
return (
<div>
{messages.map((m) => {
if (m.role === "assistant") {
const textContent = m.parts
.filter((p) => p.type === "text")
.map((p) => p.text)
.join("");
const imageParts = m.parts.filter(
(p) => p.type === "file" && p.mediaType?.startsWith("image/"),
);
return (
<div key={m.id}>
{textContent && <p>{textContent}</p>}
{imageParts.map((part, idx) => (
<img
key={idx}
src={`data:${part.mediaType};base64,${part.url}`}
alt="Generated image"
/>
))}
</div>
);
}
return (
<div key={m.id}>
{m.parts.map((p, i) =>
p.type === "text" ? <p key={i}>{p.text}</p> : null
)}
</div>
);
})}
</div>
);
};
You can also use the pre-built <Image /> component from ai-elements for a polished rendering experience.
Option 3: Image Editing
LLM Gateway also supports editing existing images via /v1/images/edits. Pass an image URL (HTTPS or base64 data URL) along with your edit prompt:
curl -X POST "https://api.llmgateway.io/v1/images/edits" \
-H "Authorization: Bearer $LLM_GATEWAY_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"images": [
{
"image_url": "https://example.com/source-image.png"
}
],
"prompt": "Add a watercolor effect to this image",
"model": "gemini-3-pro-image-preview",
"quality": "high",
"size": "1024x1024"
}'
Switching Providers
The best part: switching image providers is a one-line change. Just swap the model string:
// Google Gemini
model: "gemini-3-pro-image-preview"
// Alibaba Qwen (from $0.03/image)
model: "alibaba/qwen-image-plus"
// ByteDance Seedream (up to 4K output)
model: "bytedance/seedream-4-5"
// Z.AI CogView (great for text in images)
model: "zai/cogview-4"
Each provider has different strengths:
| Provider | Model | Price | Best For |
|---|---|---|---|
gemini-3-pro-image-preview | Varies | General purpose, high quality | |
| Alibaba | alibaba/qwen-image-max | $0.075/image | Highest quality |
| Alibaba | alibaba/qwen-image-plus | $0.03/image | Best value |
| ByteDance | bytedance/seedream-4-5 | $0.045/image | Up to 4K, multi-image fusion |
| Z.AI | zai/cogview-4 | $0.01/image | Cheapest, bilingual text rendering |
Customizing Output
Use the image_config parameter (chat completions) or standard size/quality params (images API) to control output:
# Google: aspect ratio + resolution
"image_config": {
"aspect_ratio": "16:9",
"image_size": "4K"
}
# Alibaba: pixel dimensions + seed for reproducibility
"image_config": {
"image_size": "1024x1536",
"seed": 42
}
Wrapping Up
With LLM Gateway, image generation becomes provider-agnostic. Whether you're using the OpenAI SDK, Vercel AI SDK, or raw HTTP — you get one API, multiple providers, and the flexibility to switch models without changing your code.
Resources:
- LLM Gateway Image Generation Docs
- Browse available image models
- Try it in the Playground
- AI SDK Provider on npm