Gemini 2.0 Flash Image Generation and Editing Next.js Implementation

This is a Next.js quickstart project that allows you build modern AI image generation and editing apps using Google’s Gemini API and Next.js.

Users input text prompts to create original images or upload existing files with modification instructions. The AI preserves conversation context across interactions, enabling progressive adjustments without restarting creative parameters.

Features

Installation

Prerequisites

• Node.js (14.x or higher)
• npm or yarn
• Google AI Studio API key

Local Setup

1. Clone the repository:

git clone https://github.com/google-gemini/gemini-image-editing-nextjs-quickstart.git
cd gemini-image-editing-nextjs-quickstart

2. Set up environment variables:

cp .env.example .env

3. Add your Google AI Studio API key to the .env file:

GEMINI_API_KEY=your_google_api_key

4. Install dependencies and start the development server:

npm install
npm run dev

Open http://localhost:3000 in your browser to use the application.

Deployment Options

Vercel Deployment

The quickest way to deploy the application is through Vercel:

1. Click the “Deploy with Vercel“.
2. Configure your environment variables during the setup process
3. Your application will be deployed and accessible via a Vercel URL

Docker Deployment

For containerized deployment:

1. Build the Docker image:

docker build -t nextjs-gemini-image-editing .

2. Run the container with your API key:

docker run -p 3000:3000 -e GEMINI_API_KEY=your_google_api_key nextjs-gemini-image-editing

Related Resources

• Google Gemini API Documentation: Official documentation for the Gemini API. Learn about the different models and capabilities. Google AI for Developers
• Next.js Documentation: The official documentation for Next.js. Get details on features, API references, and guides. Next.js
• shadcn/ui: Learn about this collection of reusable components. It’s built with Radix UI and Tailwind CSS. shadcn/ui
• Google Generative AI SDK: The official JavaScript SDK for interacting with Google’s generative AI models, including Gemini 2.0 Flash. https://ai.google.dev/tutorials/web_quickstart

FAQs

Q: What’s the difference between image generation and image editing in this framework?
A: Image generation creates new images from text descriptions, while image editing allows you to modify existing images by providing text instructions. Both features use the same Gemini 2.0 Flash model but serve different purposes in the creative workflow.

Q: Do I need coding experience to use this tool?
A: The hosted demo requires no coding experience – you can simply use the UI to generate and edit images. However, to customize or deploy your own version, basic knowledge of JavaScript and Next.js would be beneficial.

Q: Where can I test the tool online?
A: A demo is available at Hugging Face Spaces.

Preview