Build an AI Image Editor With Google AI Studio

Keep the First Version Simple

Keep the first version extremely simple. The app only needs to let the user:

Upload an image Describe the edit Generate the edited image Compare the result with the original Download the result

Google's current Gemini image models accept both images and text and can return edited or generated images, which makes this type of workflow a natural fit.

Example Edits You Can Offer

A few example edits to keep in mind while planning the app:

- Change the background

- Remove an object

- Add an object

- Change colors

- Change the environment

- Turn a basic product photo into a studio photo

- Change the style of an image

- Improve lighting

- Create a different composition

Choose a Simple Demo

For the video, use an obvious transformation. The stronger the Before/After, the easier the video is to understand.

Original

A product photographed on a normal table.

Example Prompt

Replace the background with a premium minimal studio setting. Keep the product itself unchanged.

Result

Professional-looking product image.

Start Building in Google AI Studio

Open Google AI Studio, go to Build, and create a new Web app. Use the following prompt.

Build the AI Image Editor

Builds a clean AI image-editing web app: upload, preview, a natural-language edit instruction, generation through Google's current recommended Gemini image model, a displayed result, Before/After comparison, download, and start over — plus a few example prompts. Requires the Gemini API key to stay server-side only, a responsive layout, and clear error handling. Explicitly forbids Firebase, Supabase, authentication, a database, user accounts, payments, image history, social features, and unnecessary APIs. Builds the complete working first version without overdesigning it.

Build a clean, professional AI image editing web app. The app should let a user: - upload one image - preview the uploaded image - enter a natural-language editing instruction - send the image and instruction to Google's current recommended Gemini image-generation/editing model - display the generated edited image - compare the original and edited images - download the edited image - start over with another image Use the current recommended Nano Banana image model available through the Gemini API. Keep the app extremely simple. The main interface should contain: - image upload area - original image preview - editing prompt field - a clear Generate / Edit Image button - loading state while the image is being generated - edited image result - Download button - Start Over button Add a few example prompts such as: - Replace the background with a professional studio - Remove the object in the background - Change the wall color to warm beige - Turn this into a premium product photo Requirements: - use the existing Google AI Studio server-side Gemini integration - keep the Gemini API key on the server side - never expose the API key in browser code - preserve the uploaded image's aspect ratio where practical - clearly separate the original image from the generated result - make the interface responsive - handle generation errors clearly Do not add: - Firebase - Supabase - authentication - a database - user accounts - payment functionality - image history - social features - unnecessary APIs Do not overdesign the app. Build the complete working first version.

How the Server-Side Integration Works

Google AI Studio's current web-app environment includes a server-side Node.js runtime, and Gemini API keys created for apps are placed in that server-side environment rather than exposed to client code.

Use the Current Image Model

Google currently describes Gemini 3.1 Flash Image (Nano Banana 2) as its go-to general-purpose image model, balancing quality, latency, and cost.

NOTE

If AI Studio already selects an appropriate current image model automatically, do not replace it with an older model merely to follow an old tutorial.

Test With a Real Image

Run the app and upload a real test image. Start with a simple instruction such as:

Example instruction

Replace the background with a clean luxury photography studio. Keep the main product unchanged.

Generate the result, then check whether the tool actually behaves like an image editor rather than a random image generator.

Preserve What Should Stay the Same

A common problem is that the AI may unnecessarily modify parts of the image. For example, if you only want the background changed, the product itself should remain as consistent as possible.

Improve the Image-Editing Behavior

Makes the uploaded image the primary reference for every edit: preserves the main subject, its shape, its important details, its colors, and its general position unless the user explicitly asked to change them, avoids unnecessarily changing unrelated parts of the image on an object-removal request, and stops the model from rewriting the user's request into a different creative prompt. Preserves the existing UI and functionality.

Improve the image-editing behavior of this app. The user's uploaded image should always be treated as the primary reference. When the user asks for a targeted edit, instruct the image model to preserve everything that the user did not explicitly ask to change. Examples: If the user asks: "Change the background to a professional studio" preserve: - the main subject - its shape - its important details - its colors unless requested otherwise - its general position where practical If the user asks to remove one object, avoid unnecessarily changing unrelated parts of the image. Do not rewrite the user's request into a completely different creative prompt. Keep edits faithful to the original image and the requested change. Preserve the existing UI and functionality.

Add a Before / After Comparison

The result is much more impressive when the user can immediately compare it.

Add a Before / After Comparison

Adds a simple side-by-side Original/Edited comparison to the result area — stacked cleanly on mobile, both images large enough to inspect — without a complicated image editor or canvas, and without touching the existing generation or download functionality.

Improve the result area with a simple Before / After comparison. Show: Original and: Edited side by side on larger screens and stacked cleanly on mobile. Keep both images large enough to inspect. Do not add a complicated image editor or canvas. Preserve the existing generation and download functionality.

A slider comparison is optional, but not necessary for the first version.

Improve the Prompt Experience

You can also add example prompts by category so users do not need to learn prompt engineering before they can use the tool.

Product Photos

Place this product on a clean white studio background.

Interior

Change the wall color to light beige and keep everything else unchanged.

Creative

Turn the environment into a cinematic nighttime scene.

Cleanup

Remove the object behind the main subject.

Do not make users learn complicated prompt engineering before they can use the tool.

Test 1 — Background Change

Upload an image and ask:

Prompt

Replace the background with a minimal studio background.

Check

Check that the main subject remains recognizable.

Test 2 — Remove Something

Ask:

Prompt

Remove the small object on the table. Keep everything else unchanged.

Check

Check whether the unwanted object disappears without unnecessary changes.

Test 3 — Add Something

Ask:

Prompt

Add a small indoor plant in the empty corner.

Check

Check that the new object integrates naturally.

Test 4 — Style Change

Ask:

Prompt

Give this image a warm cinematic look while preserving the composition.

Test 5 — Start Over

Upload another image and make sure the previous result does not incorrectly remain attached to the new image.

Run the Final Production Audit

Final Production-Readiness Audit

Runs a final production-readiness audit of the AI image editor covering image upload, AI editing fidelity, security (Gemini API calls stay server-side, no key or secret in the frontend bundle), interface (labeling, Before/After, loading, errors, Download, Start Over, mobile layout, no horizontal overflow), scope (no unnecessary database, auth, or external service), and technical health (production build succeeds, no important runtime errors) — without adding new functionality. Finishes with a READY / NOT READY verdict.

Run a final production-readiness audit of this AI image editor. Verify: Image upload - supported image uploads work - the image preview works - replacing the uploaded image works - invalid files produce a useful error AI editing - the uploaded image is actually sent as image context - the user's editing instruction is respected - targeted edits preserve unrelated parts of the image where practical - the app displays the generated image correctly - failed generation does not leave the interface stuck Security - Gemini API calls happen through trusted server-side code - no Gemini API key is exposed in frontend code - no secret is included in the browser bundle Interface - original and edited images are clearly labeled - Before / After comparison works - loading state works - errors are understandable - Download works - Start Over works - mobile layout works - there is no unintended horizontal overflow Scope - no unnecessary database was added - no authentication was added - no unnecessary external service was added Technical - production build succeeds - no important runtime errors remain Do not add new functionality during this audit. Finish with: AI Image Editor status: READY / NOT READY If NOT READY, list only the remaining important issues.

What Not to Add Yet

Do not immediately add:

- Accounts

- Saved projects

- Image galleries

- Credits

- Stripe

- Multiple models

- Advanced masking

- Photoshop-style layers

- Team collaboration

NOTE

Those can turn a very easy video into a complicated SaaS project. The first version only needs: Upload → Describe Edit → Generate → Download.

Where Else This Tool Can Be Used

Once the basic app works, the same tool can be used for:

- Product photography

- E-commerce images

- Social-media images

- Thumbnails

- Interior design concepts

- Real-estate photos

- Removing unwanted objects

- Changing backgrounds

- Creative image transformations

Nano Banana's current models are specifically designed for both generation and conversational image editing, so this is not a workaround — it's building around one of the core capabilities Google provides.