Gemini 2.0 Flash Image Generation and Editing

Gemini 2.0 Flash Image Generation and Editing is an open-source Next.js application that shows how to generate and edit images with Google's Gemini 2.0 Flash model using the Google Generative AI JavaScript SDK. It runs as a web app with a chat-style interface and was published by google-gemini on GitHub, with a hosted demo available on Hugging Face Spaces.

What is Gemini 2.0 Flash Image Generation and Editing?

This template is a quickstart project that combines a Next.js frontend with the Gemini 2.0 Flash model to perform native image generation and editing. It takes a text prompt or an uploaded image plus an instruction as input, and returns AI-generated or edited images that you can download directly in the browser. The app tracks conversation history so each edit can build on the previous result.

Key Features

• Text-to-image generation — create images from natural-language prompts using the Gemini 2.0 Flash model, with the response configured to return both text and image parts.
• Image editing via instructions — upload an image and describe a change in natural language; the model outputs an edited version of the original.
• Conversation history — the app maintains context across turns, enabling iterative refinements (e.g., "add more greenery" after an initial city render).
• Responsive UI — built with Next.js and shadcn/ui components, which are styled with Tailwind CSS and Radix UI primitives.
• Download results — generated and edited images are saved locally as PNG files, as shown in the included JavaScript SDK example.
• Deployment options — one-click deploy to Vercel via a clone button, or run locally with npm and Docker using a GEMINI_API_KEY environment variable.
• Apache 2.0 license — the project is publicly open-source, so you can use, modify, and distribute it freely.

Who is this for?

• Developers — build a reference implementation for integrating Gemini's native image generation into a Next.js app, or copy the JavaScript SDK call into their own services.
• Product teams — quickly prototype AI image features like photo editing, design exploration, or content generation inside a web interface.
• Content creators — use the hosted demo to generate illustrations and edit visuals without writing code, then download the PNG results.
• AI hobbyists — learn how to set up a GEMINI_API_KEY, manage conversation context, and handle text/image response parts from the Gemini model.

What can you do with it?

• Generate hero images from prompts: type a detailed scene like "a 3d rendered pig with wings and a top hat flying over a futuristic scifi city" and download the resulting PNG.
• Edit uploaded photos: upload a product shot and ask the model to change the background, remove an object, or adjust lighting, with the edited image returned in-browser.
• Iterate on designs conversationally: keep chatting to refine an image step-by-step, since the conversation context carries previous generations and edits.
• Deploy a demo for users: use the Vercel or Docker setup to stand up a public AI image tool at a custom domain.

How does it work?

1. Copy the .env.example file and add your GEMINI_API_KEY.
2. Install dependencies with npm install and run the dev server with npm run dev, or use Docker to build and run the container.
3. In the web UI, either type a prompt or upload an image, then send the request.
4. The Next.js backend calls Gemini 2.0 Flash through the Google Generative AI JavaScript SDK, with responseModalities set to "Text" and "Image" so the model returns both text and inline image data.
5. The app displays the returned image, keeps the conversation history in memory, and lets you download the result.

FAQ

Do I need a GEMINI_API_KEY?

Yes, the app requires a Google AI Studio API key to authenticate calls to the Gemini model. You can get one from the Google AI Studio API key page and store it in the .env file or as a Vercel environment variable.

Which Gemini model does this template use?

The code uses the gemini-2.0-flash-exp model, the experimental version of Gemini 2.0 Flash, selected in the generationConfig along with responseModalities including "Text" and "Image".

Can I edit an existing image?

Yes, the app supports image editing. You upload an image, provide natural-language instructions, and the model returns an edited version, with the conversation history allowing you to make follow-up changes.

How can I deploy this template?

You can deploy it to Vercel using the one-click clone button, which will prompt you to set the GEMINI_API_KEY, or build and run the Docker image with docker run -p 3000:3000 -e GEMINI_API_KEY=your_google_api_key nextjs-gemini-image-editing.

Is the template free to use?

The template code itself is open source under the Apache License 2.0, so you can use it at no cost. Note that calling the Gemini API may incur charges depending on your Google AI plan and usage.