AI SDK Image Generator

Features

• Supports image generation using generateImage from the AI SDK by Vercel, allowing multiple AI providers to be used interchangeably with just a few lines of code.
• A single input to generate images across multiple providers simultaneously.
• shadcn/ui components for a modern, responsive UI powered by Tailwind CSS.
• Built with the latest Next.js App Router (version 15).

Model Providers

This template includes the following providers by default:

• Replicate
• Google Vertex AI
• OpenAI
• Fireworks

You can easily add or remove providers (and their associated models) by updating the configuration in the codebase.

Deploy Your Own

You can deploy your own version of the AI SDK Image Generator to Vercel by clicking the button below:

Running Locally

1. Clone the repository and install dependencies:

   1
   npm install
   2
   # or
   3
   yarn install
   4
   # or
   5
   pnpm install

2. Create an .env.local file (or set Environment Variables in your Vercel dashboard) to store any necessary API keys for the providers you plan to use. There is an .env.example file that you can use as a reference.

   1
   # Standard API keys
   2
   OPENAI_API_KEY=...
   3
   REPLICATE_API_TOKEN=...
   4
   FIREWORKS_API_KEY=...
   5
   
   6
   # Google Vertex AI settings
   7
   GOOGLE_CLIENT_EMAIL=...        # From your service account JSON file
   8
   GOOGLE_PRIVATE_KEY=...         # From your service account JSON file
   9
   GOOGLE_VERTEX_PROJECT=...      # Your Google Cloud project ID
   10
   GOOGLE_VERTEX_LOCATION=...     # e.g., "us-central1"

   For Google Vertex AI setup:

   • Get your service account credentials from the Google Cloud Console
   • The values for GOOGLE_CLIENT_EMAIL and GOOGLE_PRIVATE_KEY can be found in your service account JSON file
   • Set GOOGLE_VERTEX_LOCATION to your preferred region (e.g., "us-central1")
   • Set GOOGLE_VERTEX_PROJECT to your Google Cloud project ID

   For more details on Google Vertex AI configuration, see the AI SDK documentation.

3. Run the development server:

   1
   npm run dev
   2
   # or
   3
   yarn dev
   4
   # or
   5
   pnpm dev

4. Open http://localhost:3000 to view your new AI image generator application.

Authors

This repository is maintained by the Vercel team and community contributors. Special thanks to:

• Walter Korman (@shaper) - Vercel
• Nico Albanese (@nicoalbanese10) - Vercel

Contributions are welcome! Feel free to open issues or submit pull requests to enhance functionality or fix bugs.