Skip to content
Avatar of vercel-labsvercel-labs/ai-sdk-image-generator

AI SDK Image Generator

An open-source AI image generator built with Next.js, the AI SDK, and various AI providers (Replicate, Fireworks, Google Vertex AI, OpenAI)

Framework
Use Case
ai-sdk-image-generator-screenshot

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:

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:

    npm install
    # or
    yarn install
    # or
    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.

    # Standard API keys
    OPENAI_API_KEY=...
    REPLICATE_API_TOKEN=...
    FIREWORKS_API_KEY=...
    # Google Vertex AI settings
    GOOGLE_CLIENT_EMAIL=... # From your service account JSON file
    GOOGLE_PRIVATE_KEY=... # From your service account JSON file
    GOOGLE_VERTEX_PROJECT=... # Your Google Cloud project ID
    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:

    npm run dev
    # or
    yarn dev
    # or
    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:

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

ai-sdk-image-generator-screenshot
Avatar of vercel-labsvercel-labs/ai-sdk-image-generator

AI SDK Image Generator

An open-source AI image generator built with Next.js, the AI SDK, and various AI providers (Replicate, Fireworks, Google Vertex AI, OpenAI)

Framework
Use Case

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:

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:

    npm install
    # or
    yarn install
    # or
    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.

    # Standard API keys
    OPENAI_API_KEY=...
    REPLICATE_API_TOKEN=...
    FIREWORKS_API_KEY=...
    # Google Vertex AI settings
    GOOGLE_CLIENT_EMAIL=... # From your service account JSON file
    GOOGLE_PRIVATE_KEY=... # From your service account JSON file
    GOOGLE_VERTEX_PROJECT=... # Your Google Cloud project ID
    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:

    npm run dev
    # or
    yarn dev
    # or
    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:

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

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential