> ## Documentation Index
> Fetch the complete documentation index at: https://trigger.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Product image generator using Replicate and Trigger.dev

> AI-powered product image generator that transforms basic product photos into professional marketing shots using Replicate's image generation models

## Overview

This project demonstrates how to build an AI-powered product image generator that transforms basic product photos into professional marketing shots. Users upload a product image and receive three professionally styled variations: clean product shots, lifestyle scenes, and hero shots with dramatic lighting.

## Video

<video controls className="w-full aspect-video" src="https://content.trigger.dev/product-image-generator-example.mp4" />

## GitHub repo

Clone this repo and follow the instructions in the `README.md` file to get started.

<Card title="View the product image generator repo" icon="GitHub" href="https://github.com/triggerdotdev/examples/tree/main/product-image-generator">
  Click here to view the full code in our examples repository on GitHub. You can fork it and use it
  as a starting point for your project.
</Card>

## Tech stack

* [**Next.js**](https://nextjs.org/) – frontend React framework
* [**Replicate**](https://replicate.com/docs) – AI image generation using the `google/nano-banana` image-to-image model
* [**UploadThing**](https://uploadthing.com/) – file upload management and server callbacks
* [**Cloudflare R2**](https://developers.cloudflare.com/r2/) – scalable image storage with public URLs

## How it works

The application orchestrates image generation through two main tasks: [`generateImages`](https://github.com/triggerdotdev/examples/blob/main/product-image-generator/app/trigger/generate-images.ts) coordinates batch processing, while [`generateImage`](https://github.com/triggerdotdev/examples/blob/main/product-image-generator/app/trigger/generate-images.ts) handles individual style generation.

Each generation task enhances prompts with style-specific instructions, calls Replicate's `google/nano-banana` image-to-image model, creates waitpoint tokens for async webhook handling, and uploads results to Cloudflare R2. The frontend displays real-time progress updates via React hooks as tasks complete.

Style presets include clean product shots (white background), lifestyle scenes (person holding product), and hero shots (dramatic lighting).

## Relevant code

* **Image generation tasks** – batch processing with waitpoints for Replicate webhook callbacks ([`app/trigger/generate-images.ts`](https://github.com/triggerdotdev/examples/blob/main/product-image-generator/app/trigger/generate-images.ts))
* **Upload handler** – UploadThing integration that triggers batch generation ([`app/api/uploadthing/core.ts`](https://github.com/triggerdotdev/examples/blob/main/product-image-generator/app/api/uploadthing/core.ts))
* **Real-time progress UI** – live task updates using React hooks ([`app/components/GeneratedCard.tsx`](https://github.com/triggerdotdev/examples/blob/main/product-image-generator/app/components/GeneratedCard.tsx))
* **Custom prompt interface** – user-defined style generation ([`app/components/CustomPromptCard.tsx`](https://github.com/triggerdotdev/examples/blob/main/product-image-generator/app/components/CustomPromptCard.tsx))
* **Main app component** – layout and state management ([`app/ProductImageGenerator.tsx`](https://github.com/triggerdotdev/examples/blob/main/product-image-generator/app/ProductImageGenerator.tsx))

## Learn more

* [**Waitpoints**](/wait-for-token) – pause tasks for async webhook callbacks
* [**React hooks**](/realtime/react-hooks/overview) – real-time task updates and frontend integration
* [**Batch operations**](/triggering#tasks-batchtrigger) – parallel task execution patterns
* [**Replicate API**](https://replicate.com/docs/get-started/nextjs) – AI model integration
* [**UploadThing**](https://docs.uploadthing.com/) – file upload handling and server callbacks