# Product image generator using Replicate and Trigger.dev

> Source: https://trigger.dev/docs/guides/example-projects/product-image-generator

[​](https://trigger.dev/docs/guides/example-projects/product-image-generator#overview)

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.

[​](https://trigger.dev/docs/guides/example-projects/product-image-generator#video)

Video
--------------------------------------------------------------------------------------------

[​](https://trigger.dev/docs/guides/example-projects/product-image-generator#github-repo)

GitHub repo
--------------------------------------------------------------------------------------------------------

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

[View the product image generator repo\
-------------------------------------\
\
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.](https://github.com/triggerdotdev/examples/tree/main/product-image-generator)

[​](https://trigger.dev/docs/guides/example-projects/product-image-generator#tech-stack)

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

[​](https://trigger.dev/docs/guides/example-projects/product-image-generator#how-it-works)

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).

[​](https://trigger.dev/docs/guides/example-projects/product-image-generator#relevant-code)

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)
    )

[​](https://trigger.dev/docs/guides/example-projects/product-image-generator#learn-more)

Learn more
------------------------------------------------------------------------------------------------------

*   [**Waitpoints**](https://trigger.dev/docs/wait-for-token)
     – pause tasks for async webhook callbacks
*   [**React hooks**](https://trigger.dev/docs/realtime/react-hooks/overview)
     – real-time task updates and frontend integration
*   [**Batch operations**](https://trigger.dev/docs/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

Was this page helpful?

YesNo

[Previous](https://trigger.dev/docs/guides/example-projects/openai-agents-sdk-typescript-playground)
[Realtime CSV ImporterThis example Next.js project demonstrates how to use Trigger.dev Realtime to build a CSV Uploader with progress updates streamed to the frontend.\
\
Next](https://trigger.dev/docs/guides/example-projects/realtime-csv-importer)

Ctrl+I

Assistant

Responses are generated using AI and may contain mistakes.