AI SDK Image Generator

AI SDK Image Generator is an open-source Next.js application template from the Vercel team that provides a complete AI image generation app with a single UI connected to multiple AI providers through the Vercel AI SDK.

What is the AI SDK Image Generator?

AI SDK Image Generator is an open-source application template built with Next.js App Router version 15 and the AI SDK by Vercel. It implements the generateImage function from the AI SDK to call Replicate, Google Vertex AI, OpenAI, and Fireworks from one text prompt input, and it returns the generated images in a web UI. The template is maintained by Vercel staff, including Walter Korman and Nico Albanese, and is designed to be deployed to Vercel with a single click or run locally.

Key Features

• Multi-provider support — Uses the AI SDK's generateImage function so Replicate, Google Vertex AI, OpenAI, and Fireworks can be swapped with only a few lines of code; providers are configured in the codebase and can be added or removed.
• Single-input simultaneous generation — One prompt triggers image generation across all configured providers at once, making side-by-side output comparison easy.
• Modern UI stack — Built with shadcn/ui components styled by Tailwind CSS, giving a responsive interface without extra design work.
• Next.js App Router — Built on Next.js version 15 with the App Router, following current React Server Component conventions.
• One-click Vercel deployment — A deploy button clones the repository and pre-fills the required environment variables, including API keys for each provider, in the Vercel setup flow.
• Local development setup — The README includes step-by-step instructions for cloning, installing with npm, yarn, or pnpm, creating an .env.local file, and running the dev server on localhost:3000.
• Google Vertex AI configuration — Provides specific guidance for setting GOOGLE_CLIENT_EMAIL, GOOGLE_PRIVATE_KEY, GOOGLE_VERTEX_PROJECT, and GOOGLE_VERTEX_LOCATION from a service account JSON.

Who is it for?

• Next.js developers — who want a ready-made reference implementation of the AI SDK image generation API instead of building one from scratch.
• Indie hackers and product teams — who need to quickly launch a multi-provider AI image generator and compare model outputs without manual provider integrations.
• AI SDK learners — who want to study how generateImage works with different providers and how environment variables and provider configuration are structured in a real app.

What can you do with it?

• Launch an AI image generation demo — Deploy to Vercel and get a working URL that accepts text prompts and returns images from the providers you have keyed.
• Compare provider outputs — Use the single-input feature to generate images from Replicate, OpenAI, Vertex AI, and Fireworks at once, useful for evaluating quality and cost differences.
• Build a production feature on it — Replace the demo UI with your own product front end while keeping the provider-agnostic generateImage call as your image-generation backend.

How does the AI SDK Image Generator work?

The template's UI presents a text prompt input, and when submitted it calls the generateImage function from the Vercel AI SDK. That function is configured in code to route requests to the providers you've enabled (Replicate, Google Vertex AI, OpenAI, Fireworks), and the resulting images appear in the interface. The README notes that you can add or remove providers by updating the codebase configuration.

FAQ

Is the AI SDK Image Generator open-source?

Yes, it is an open-source template maintained by the Vercel team and community contributors. The repository welcomes contributions through issues and pull requests, and the code is freely available for use and modification.

Which AI providers are supported?

Replicate, Google Vertex AI, OpenAI, and Fireworks are included by default. All are integrated through the Vercel AI SDK's generateImage function, and you can add or remove providers by updating the configuration in the codebase.

What do I need to run it locally?

You need Node.js, a package manager (npm, yarn, or pnpm), and API keys for the providers you plan to use. The README instructs you to create an .env.local file based on .env.example, adding keys like OPENAI_API_KEY and REPLICATE_API_TOKEN, then run the development server and open localhost:3000.

How do I deploy it?

Use the Deploy with Vercel button on the README page, which clones the repository and prompts you for the required environment variables. You can also set those variables manually in your Vercel dashboard before or after deployment.

Can I use Google Vertex AI with this template?

Yes, the template includes Google Vertex AI setup instructions. You get a service account JSON from the Google Cloud Console, then set GOOGLE_CLIENT_EMAIL, GOOGLE_PRIVATE_KEY, GOOGLE_VERTEX_PROJECT, and GOOGLE_VERTEX_LOCATION in your environment variables.