Build Your Own AI Image Editor With Google AI Studio

Choose Your Use Case

Pick the kind of editor you want. Then open Customize Prompt to name your app and choose its style, and copy the prompt.

What should your editor be for?

Product Photos

Turn everyday product shots into clean studio images.

Build Your AI Image Editor

Build a complete, working first version of an AI image editor called "{{APP_NAME}}". WHAT IT IS An AI product photo editor. It turns an everyday product photo into a clean, professional product image. The user uploads one image, describes the change in plain language, and gets back an edited version of that same image. THE APP MUST INCLUDE - image upload with a preview of the uploaded image - a text field for the edit instruction - quick-action buttons that fill the instruction field with a ready-made edit - a clear Edit Image button - a clear loading state over the image while the edit is running - useful, real API error messages for an unsupported file, an empty instruction, and a failed edit - the original image and the edited result, clearly labelled - a Download button for the edited result - a Start Over button that clears the image, the instruction, and the result QUICK ACTIONS Add these quick actions: - Studio background - Remove background - Change product color - Remove unwanted object - Improve lighting EXAMPLE INSTRUCTIONS Show these as examples near the instruction field: - Replace the background with a clean premium studio setting. Keep the product itself unchanged. - Change the product color to matte black. Keep its shape and details the same. - Remove the object next to the product. Keep everything else unchanged. EDITING BEHAVIOR - Treat the uploaded image as the primary reference for every edit. - Preserve the main subject and every area the user did not ask to change. - Perform the requested edit. Do not redesign or regenerate the whole image. - Never change the product's shape, label, logo, or proportions unless the user asks. ARCHITECTURE Build this as a plain Express / Node.js application, structured to deploy directly to Hostinger's Express preset. - Express / Node.js only. No Vite, no React, no TypeScript, no frontend compilation step, no esbuild, no SPA build pipeline. - "server.js" is the production entry file. - Serve the frontend as plain HTML/CSS/JS files from a "public/" directory. - "npm start" runs "node server.js". - The same Express application serves both the frontend and the API — no separate frontend server. - "POST /api/edit-image" handles the Gemini image-editing request. - "GET /api/health" returns a JSON health status. - Any unmatched "/api/*" route returns a structured JSON error, never an HTML page. - Read the Gemini API key only on the server, from process.env.GEMINI_API_KEY. Never expose it to browser JavaScript or send it to the client in any response. - Listen on process.env.PORT || 3000, using 3000 as the default production port. - Include a .env.example file listing GEMINI_API_KEY and PORT=3000, so deployment platforms can detect the port. - Never require APP_URL. - Use Google's current recommended image generation and editing model available in Google AI Studio. Do not hard-code an older model. - Keep production dependencies minimal, current, and free of deprecated or known-vulnerable packages. DESIGN Design this as a polished, production-quality AI product, not a generic generated demo. It should look intentionally designed by a strong modern product-design team. App style: {{APP_STYLE}} Use: - a compact, premium header - strong visual hierarchy and refined typography - thoughtful spacing, subtle depth and layering, and soft shadows - restrained gradients or ambient glow - polished borders, surfaces, and button states, with tasteful hover and transition effects - a consistent, professional SVG icon set for every icon in the interface, including the Quick Actions — never emoji as icons Avoid: - generic template styling and flat, unfinished-looking sections - excessive glass effects or gradients - decorative elements that compete with the tool - oversized typography used only to look premium - emoji used as functional icons anywhere in the interface Write the headings and helper text for the use case above. FIRST SCREEN On a desktop or laptop, the user must see the complete image upload area without scrolling. At about 1440 x 900, the whole upload panel fits in the first viewport. Order of the first screen: 1. a compact app header 2. a concise headline with one short supporting sentence (a small badge above it is optional) 3. the complete upload and drag-and-drop panel - Keep the hero compact: no oversized headline, no tall intro section, no large empty space above or below the headline. - Use responsive, viewport-aware spacing instead of fixed oversized padding. - If space is tight, shrink the hero spacing and type before shrinking the upload panel. The upload panel is the most important element on this screen. - Use a balanced, centered layout with a sensible maximum content width. - Any supporting information goes below the tool and must not compete with it visually. EDITOR SCREEN Once an image is uploaded, keep the workspace equally polished. - On desktop, use a two-column layout: the large original image on the left; the Quick Actions, the edit instruction field, and the Edit Image button on the right. - Keep the main controls visible without unnecessary scrolling. - Keep the original image large and easy to inspect. - Quick actions look interactive and refined, using the same SVG icon set, without overwhelming the interface. - The Edit Image button is the most prominent control in the editor. - Show a clear loading state over the image area while an edit is running. RESULT PRESENTATION - Side by Side is the default way to compare Original and Edited: show them in two separate, matching containers. - Also offer optional single-image tabs so the user can view just the Edited result or just the Original. - Do not build a draggable before/after slider. - Preserve each image's natural aspect ratio: use contain behavior, never crop or stretch either image. - Never force the original and the edited image into matching pixel dimensions or coordinates — each keeps its own real size and shape. - Download Result and Start Over must both work correctly from this view. RESPONSIVE - Prioritize desktop and laptop, and keep tablet and mobile fully usable. - Use responsive typography and spacing. Do not carry desktop hero spacing onto small screens. - No horizontal overflow and no tall introductory content. KEEP VERSION 1 FOCUSED Do not add: authentication, user accounts or account UI, Firebase, Supabase, a database, Stripe, pricing, subscriptions, credits, image history, saved projects, galleries, dashboard navigation, collaboration, Photoshop-style layers, an advanced masking system, multiple AI model selectors, social features, marketing sections, testimonials, or blog content. The app should feel premium because the editing workflow itself is exceptionally well presented, not because extra sections were added. Build the complete working first version now.

E-commerce Images

Prepare consistent, store-ready listing images.

Build Your AI Image Editor

Build a complete, working first version of an AI image editor called "{{APP_NAME}}". WHAT IT IS An AI image editor for online stores. It prepares consistent, store-ready product images for listings. The user uploads one image, describes the change in plain language, and gets back an edited version of that same image. THE APP MUST INCLUDE - image upload with a preview of the uploaded image - a text field for the edit instruction - quick-action buttons that fill the instruction field with a ready-made edit - a clear Edit Image button - a clear loading state over the image while the edit is running - useful, real API error messages for an unsupported file, an empty instruction, and a failed edit - the original image and the edited result, clearly labelled - a Download button for the edited result - a Start Over button that clears the image, the instruction, and the result QUICK ACTIONS Add these quick actions: - Clean white background - Lifestyle background - Clean up the product - Improve lighting and shadows - Center and frame the product EXAMPLE INSTRUCTIONS Show these as examples near the instruction field: - Place the product on a pure white background with a soft natural shadow. Keep the product unchanged. - Place the product in a bright, modern living room. Keep the product unchanged. - Remove dust and small marks from the product. Keep everything else unchanged. EDITING BEHAVIOR - Treat the uploaded image as the primary reference for every edit. - Preserve the main subject and every area the user did not ask to change. - Perform the requested edit. Do not redesign or regenerate the whole image. - Keep the product accurate to the original, because shoppers must see what they will receive. ARCHITECTURE Build this as a plain Express / Node.js application, structured to deploy directly to Hostinger's Express preset. - Express / Node.js only. No Vite, no React, no TypeScript, no frontend compilation step, no esbuild, no SPA build pipeline. - "server.js" is the production entry file. - Serve the frontend as plain HTML/CSS/JS files from a "public/" directory. - "npm start" runs "node server.js". - The same Express application serves both the frontend and the API — no separate frontend server. - "POST /api/edit-image" handles the Gemini image-editing request. - "GET /api/health" returns a JSON health status. - Any unmatched "/api/*" route returns a structured JSON error, never an HTML page. - Read the Gemini API key only on the server, from process.env.GEMINI_API_KEY. Never expose it to browser JavaScript or send it to the client in any response. - Listen on process.env.PORT || 3000, using 3000 as the default production port. - Include a .env.example file listing GEMINI_API_KEY and PORT=3000, so deployment platforms can detect the port. - Never require APP_URL. - Use Google's current recommended image generation and editing model available in Google AI Studio. Do not hard-code an older model. - Keep production dependencies minimal, current, and free of deprecated or known-vulnerable packages. DESIGN Design this as a polished, production-quality AI product, not a generic generated demo. It should look intentionally designed by a strong modern product-design team. App style: {{APP_STYLE}} Use: - a compact, premium header - strong visual hierarchy and refined typography - thoughtful spacing, subtle depth and layering, and soft shadows - restrained gradients or ambient glow - polished borders, surfaces, and button states, with tasteful hover and transition effects - a consistent, professional SVG icon set for every icon in the interface, including the Quick Actions — never emoji as icons Avoid: - generic template styling and flat, unfinished-looking sections - excessive glass effects or gradients - decorative elements that compete with the tool - oversized typography used only to look premium - emoji used as functional icons anywhere in the interface Write the headings and helper text for the use case above. FIRST SCREEN On a desktop or laptop, the user must see the complete image upload area without scrolling. At about 1440 x 900, the whole upload panel fits in the first viewport. Order of the first screen: 1. a compact app header 2. a concise headline with one short supporting sentence (a small badge above it is optional) 3. the complete upload and drag-and-drop panel - Keep the hero compact: no oversized headline, no tall intro section, no large empty space above or below the headline. - Use responsive, viewport-aware spacing instead of fixed oversized padding. - If space is tight, shrink the hero spacing and type before shrinking the upload panel. The upload panel is the most important element on this screen. - Use a balanced, centered layout with a sensible maximum content width. - Any supporting information goes below the tool and must not compete with it visually. EDITOR SCREEN Once an image is uploaded, keep the workspace equally polished. - On desktop, use a two-column layout: the large original image on the left; the Quick Actions, the edit instruction field, and the Edit Image button on the right. - Keep the main controls visible without unnecessary scrolling. - Keep the original image large and easy to inspect. - Quick actions look interactive and refined, using the same SVG icon set, without overwhelming the interface. - The Edit Image button is the most prominent control in the editor. - Show a clear loading state over the image area while an edit is running. RESULT PRESENTATION - Side by Side is the default way to compare Original and Edited: show them in two separate, matching containers. - Also offer optional single-image tabs so the user can view just the Edited result or just the Original. - Do not build a draggable before/after slider. - Preserve each image's natural aspect ratio: use contain behavior, never crop or stretch either image. - Never force the original and the edited image into matching pixel dimensions or coordinates — each keeps its own real size and shape. - Download Result and Start Over must both work correctly from this view. RESPONSIVE - Prioritize desktop and laptop, and keep tablet and mobile fully usable. - Use responsive typography and spacing. Do not carry desktop hero spacing onto small screens. - No horizontal overflow and no tall introductory content. KEEP VERSION 1 FOCUSED Do not add: authentication, user accounts or account UI, Firebase, Supabase, a database, Stripe, pricing, subscriptions, credits, image history, saved projects, galleries, dashboard navigation, collaboration, Photoshop-style layers, an advanced masking system, multiple AI model selectors, social features, marketing sections, testimonials, or blog content. The app should feel premium because the editing workflow itself is exceptionally well presented, not because extra sections were added. Build the complete working first version now.

Portraits & Headshots

Turn everyday portraits into professional headshots.

Build Your AI Image Editor

Build a complete, working first version of an AI image editor called "{{APP_NAME}}". WHAT IT IS An AI portrait and headshot editor. It turns an everyday photo of a person into a polished, professional headshot. The user uploads one image, describes the change in plain language, and gets back an edited version of that same image. THE APP MUST INCLUDE - image upload with a preview of the uploaded image - a text field for the edit instruction - quick-action buttons that fill the instruction field with a ready-made edit - a clear Edit Image button - a clear loading state over the image while the edit is running - useful, real API error messages for an unsupported file, an empty instruction, and a failed edit - the original image and the edited result, clearly labelled - a Download button for the edited result - a Start Over button that clears the image, the instruction, and the result QUICK ACTIONS Add these quick actions: - Professional background - Improve portrait lighting - Professional headshot look - Remove background distractions - Clean up and polish EXAMPLE INSTRUCTIONS Show these as examples near the instruction field: - Replace the background with a soft neutral studio backdrop. Keep the person unchanged. - Improve the lighting on the face with soft, even studio light. Keep the person unchanged. - Remove the distracting objects behind the person. Keep everything else unchanged. EDITING BEHAVIOR - Treat the uploaded image as the primary reference for every edit. - Preserve the main subject and every area the user did not ask to change. - Perform the requested edit. Do not redesign or regenerate the whole image. - Preserve the person's identity, recognizable facial features, skin tone, and natural proportions unless the user explicitly asks to change them. ARCHITECTURE Build this as a plain Express / Node.js application, structured to deploy directly to Hostinger's Express preset. - Express / Node.js only. No Vite, no React, no TypeScript, no frontend compilation step, no esbuild, no SPA build pipeline. - "server.js" is the production entry file. - Serve the frontend as plain HTML/CSS/JS files from a "public/" directory. - "npm start" runs "node server.js". - The same Express application serves both the frontend and the API — no separate frontend server. - "POST /api/edit-image" handles the Gemini image-editing request. - "GET /api/health" returns a JSON health status. - Any unmatched "/api/*" route returns a structured JSON error, never an HTML page. - Read the Gemini API key only on the server, from process.env.GEMINI_API_KEY. Never expose it to browser JavaScript or send it to the client in any response. - Listen on process.env.PORT || 3000, using 3000 as the default production port. - Include a .env.example file listing GEMINI_API_KEY and PORT=3000, so deployment platforms can detect the port. - Never require APP_URL. - Use Google's current recommended image generation and editing model available in Google AI Studio. Do not hard-code an older model. - Keep production dependencies minimal, current, and free of deprecated or known-vulnerable packages. DESIGN Design this as a polished, production-quality AI product, not a generic generated demo. It should look intentionally designed by a strong modern product-design team. App style: {{APP_STYLE}} Use: - a compact, premium header - strong visual hierarchy and refined typography - thoughtful spacing, subtle depth and layering, and soft shadows - restrained gradients or ambient glow - polished borders, surfaces, and button states, with tasteful hover and transition effects - a consistent, professional SVG icon set for every icon in the interface, including the Quick Actions — never emoji as icons Avoid: - generic template styling and flat, unfinished-looking sections - excessive glass effects or gradients - decorative elements that compete with the tool - oversized typography used only to look premium - emoji used as functional icons anywhere in the interface Write the headings and helper text for the use case above. FIRST SCREEN On a desktop or laptop, the user must see the complete image upload area without scrolling. At about 1440 x 900, the whole upload panel fits in the first viewport. Order of the first screen: 1. a compact app header 2. a concise headline with one short supporting sentence (a small badge above it is optional) 3. the complete upload and drag-and-drop panel - Keep the hero compact: no oversized headline, no tall intro section, no large empty space above or below the headline. - Use responsive, viewport-aware spacing instead of fixed oversized padding. - If space is tight, shrink the hero spacing and type before shrinking the upload panel. The upload panel is the most important element on this screen. - Use a balanced, centered layout with a sensible maximum content width. - Any supporting information goes below the tool and must not compete with it visually. EDITOR SCREEN Once an image is uploaded, keep the workspace equally polished. - On desktop, use a two-column layout: the large original image on the left; the Quick Actions, the edit instruction field, and the Edit Image button on the right. - Keep the main controls visible without unnecessary scrolling. - Keep the original image large and easy to inspect. - Quick actions look interactive and refined, using the same SVG icon set, without overwhelming the interface. - The Edit Image button is the most prominent control in the editor. - Show a clear loading state over the image area while an edit is running. RESULT PRESENTATION - Side by Side is the default way to compare Original and Edited: show them in two separate, matching containers. - Also offer optional single-image tabs so the user can view just the Edited result or just the Original. - Do not build a draggable before/after slider. - Preserve each image's natural aspect ratio: use contain behavior, never crop or stretch either image. - Never force the original and the edited image into matching pixel dimensions or coordinates — each keeps its own real size and shape. - Download Result and Start Over must both work correctly from this view. RESPONSIVE - Prioritize desktop and laptop, and keep tablet and mobile fully usable. - Use responsive typography and spacing. Do not carry desktop hero spacing onto small screens. - No horizontal overflow and no tall introductory content. KEEP VERSION 1 FOCUSED Do not add: authentication, user accounts or account UI, Firebase, Supabase, a database, Stripe, pricing, subscriptions, credits, image history, saved projects, galleries, dashboard navigation, collaboration, Photoshop-style layers, an advanced masking system, multiple AI model selectors, social features, marketing sections, testimonials, or blog content. The app should feel premium because the editing workflow itself is exceptionally well presented, not because extra sections were added. Build the complete working first version now.

Social Media

Restyle photos into scroll-stopping posts.

Build Your AI Image Editor

Build a complete, working first version of an AI image editor called "{{APP_NAME}}". WHAT IT IS An AI image editor for social media content. It turns ordinary photos into eye-catching posts. The user uploads one image, describes the change in plain language, and gets back an edited version of that same image. THE APP MUST INCLUDE - image upload with a preview of the uploaded image - a text field for the edit instruction - quick-action buttons that fill the instruction field with a ready-made edit - a clear Edit Image button - a clear loading state over the image while the edit is running - useful, real API error messages for an unsupported file, an empty instruction, and a failed edit - the original image and the edited result, clearly labelled - a Download button for the edited result - a Start Over button that clears the image, the instruction, and the result QUICK ACTIONS Add these quick actions: - Replace background - Cinematic look - Remove unwanted objects - Creative restyle - Improve composition EXAMPLE INSTRUCTIONS Show these as examples near the instruction field: - Give this photo a warm cinematic look. Keep the people and the composition the same. - Replace the background with a sunset city skyline. Keep the person unchanged. - Remove the people in the background. Keep the main subject unchanged. EDITING BEHAVIOR - Treat the uploaded image as the primary reference for every edit. - Preserve the main subject and every area the user did not ask to change. - Perform the requested edit. Do not redesign or regenerate the whole image. - Keep people recognizable: never change a face or body unless the user asks. ARCHITECTURE Build this as a plain Express / Node.js application, structured to deploy directly to Hostinger's Express preset. - Express / Node.js only. No Vite, no React, no TypeScript, no frontend compilation step, no esbuild, no SPA build pipeline. - "server.js" is the production entry file. - Serve the frontend as plain HTML/CSS/JS files from a "public/" directory. - "npm start" runs "node server.js". - The same Express application serves both the frontend and the API — no separate frontend server. - "POST /api/edit-image" handles the Gemini image-editing request. - "GET /api/health" returns a JSON health status. - Any unmatched "/api/*" route returns a structured JSON error, never an HTML page. - Read the Gemini API key only on the server, from process.env.GEMINI_API_KEY. Never expose it to browser JavaScript or send it to the client in any response. - Listen on process.env.PORT || 3000, using 3000 as the default production port. - Include a .env.example file listing GEMINI_API_KEY and PORT=3000, so deployment platforms can detect the port. - Never require APP_URL. - Use Google's current recommended image generation and editing model available in Google AI Studio. Do not hard-code an older model. - Keep production dependencies minimal, current, and free of deprecated or known-vulnerable packages. DESIGN Design this as a polished, production-quality AI product, not a generic generated demo. It should look intentionally designed by a strong modern product-design team. App style: {{APP_STYLE}} Use: - a compact, premium header - strong visual hierarchy and refined typography - thoughtful spacing, subtle depth and layering, and soft shadows - restrained gradients or ambient glow - polished borders, surfaces, and button states, with tasteful hover and transition effects - a consistent, professional SVG icon set for every icon in the interface, including the Quick Actions — never emoji as icons Avoid: - generic template styling and flat, unfinished-looking sections - excessive glass effects or gradients - decorative elements that compete with the tool - oversized typography used only to look premium - emoji used as functional icons anywhere in the interface Write the headings and helper text for the use case above. FIRST SCREEN On a desktop or laptop, the user must see the complete image upload area without scrolling. At about 1440 x 900, the whole upload panel fits in the first viewport. Order of the first screen: 1. a compact app header 2. a concise headline with one short supporting sentence (a small badge above it is optional) 3. the complete upload and drag-and-drop panel - Keep the hero compact: no oversized headline, no tall intro section, no large empty space above or below the headline. - Use responsive, viewport-aware spacing instead of fixed oversized padding. - If space is tight, shrink the hero spacing and type before shrinking the upload panel. The upload panel is the most important element on this screen. - Use a balanced, centered layout with a sensible maximum content width. - Any supporting information goes below the tool and must not compete with it visually. EDITOR SCREEN Once an image is uploaded, keep the workspace equally polished. - On desktop, use a two-column layout: the large original image on the left; the Quick Actions, the edit instruction field, and the Edit Image button on the right. - Keep the main controls visible without unnecessary scrolling. - Keep the original image large and easy to inspect. - Quick actions look interactive and refined, using the same SVG icon set, without overwhelming the interface. - The Edit Image button is the most prominent control in the editor. - Show a clear loading state over the image area while an edit is running. RESULT PRESENTATION - Side by Side is the default way to compare Original and Edited: show them in two separate, matching containers. - Also offer optional single-image tabs so the user can view just the Edited result or just the Original. - Do not build a draggable before/after slider. - Preserve each image's natural aspect ratio: use contain behavior, never crop or stretch either image. - Never force the original and the edited image into matching pixel dimensions or coordinates — each keeps its own real size and shape. - Download Result and Start Over must both work correctly from this view. RESPONSIVE - Prioritize desktop and laptop, and keep tablet and mobile fully usable. - Use responsive typography and spacing. Do not carry desktop hero spacing onto small screens. - No horizontal overflow and no tall introductory content. KEEP VERSION 1 FOCUSED Do not add: authentication, user accounts or account UI, Firebase, Supabase, a database, Stripe, pricing, subscriptions, credits, image history, saved projects, galleries, dashboard navigation, collaboration, Photoshop-style layers, an advanced masking system, multiple AI model selectors, social features, marketing sections, testimonials, or blog content. The app should feel premium because the editing workflow itself is exceptionally well presented, not because extra sections were added. Build the complete working first version now.

Interior & Real Estate

Brighten, declutter, and restyle rooms and listings.

Build Your AI Image Editor

Build a complete, working first version of an AI image editor called "{{APP_NAME}}". WHAT IT IS An AI image editor for interior and real-estate photos. It makes rooms and properties look bright, tidy, and ready to show. The user uploads one image, describes the change in plain language, and gets back an edited version of that same image. THE APP MUST INCLUDE - image upload with a preview of the uploaded image - a text field for the edit instruction - quick-action buttons that fill the instruction field with a ready-made edit - a clear Edit Image button - a clear loading state over the image while the edit is running - useful, real API error messages for an unsupported file, an empty instruction, and a failed edit - the original image and the edited result, clearly labelled - a Download button for the edited result - a Start Over button that clears the image, the instruction, and the result QUICK ACTIONS Add these quick actions: - Brighten the room - Remove clutter - Change wall color - Improve lighting - Clear the sky EXAMPLE INSTRUCTIONS Show these as examples near the instruction field: - Remove the clutter from the table and the floor. Keep the room and the furniture unchanged. - Change the wall color to warm beige. Keep everything else unchanged. - Brighten the room with soft natural daylight. Keep the layout unchanged. EDITING BEHAVIOR - Treat the uploaded image as the primary reference for every edit. - Preserve the main subject and every area the user did not ask to change. - Perform the requested edit. Do not redesign or regenerate the whole image. - Preserve the structure of the room or property (walls, windows, doors, layout, and proportions) unless the user explicitly asks to change it. ARCHITECTURE Build this as a plain Express / Node.js application, structured to deploy directly to Hostinger's Express preset. - Express / Node.js only. No Vite, no React, no TypeScript, no frontend compilation step, no esbuild, no SPA build pipeline. - "server.js" is the production entry file. - Serve the frontend as plain HTML/CSS/JS files from a "public/" directory. - "npm start" runs "node server.js". - The same Express application serves both the frontend and the API — no separate frontend server. - "POST /api/edit-image" handles the Gemini image-editing request. - "GET /api/health" returns a JSON health status. - Any unmatched "/api/*" route returns a structured JSON error, never an HTML page. - Read the Gemini API key only on the server, from process.env.GEMINI_API_KEY. Never expose it to browser JavaScript or send it to the client in any response. - Listen on process.env.PORT || 3000, using 3000 as the default production port. - Include a .env.example file listing GEMINI_API_KEY and PORT=3000, so deployment platforms can detect the port. - Never require APP_URL. - Use Google's current recommended image generation and editing model available in Google AI Studio. Do not hard-code an older model. - Keep production dependencies minimal, current, and free of deprecated or known-vulnerable packages. DESIGN Design this as a polished, production-quality AI product, not a generic generated demo. It should look intentionally designed by a strong modern product-design team. App style: {{APP_STYLE}} Use: - a compact, premium header - strong visual hierarchy and refined typography - thoughtful spacing, subtle depth and layering, and soft shadows - restrained gradients or ambient glow - polished borders, surfaces, and button states, with tasteful hover and transition effects - a consistent, professional SVG icon set for every icon in the interface, including the Quick Actions — never emoji as icons Avoid: - generic template styling and flat, unfinished-looking sections - excessive glass effects or gradients - decorative elements that compete with the tool - oversized typography used only to look premium - emoji used as functional icons anywhere in the interface Write the headings and helper text for the use case above. FIRST SCREEN On a desktop or laptop, the user must see the complete image upload area without scrolling. At about 1440 x 900, the whole upload panel fits in the first viewport. Order of the first screen: 1. a compact app header 2. a concise headline with one short supporting sentence (a small badge above it is optional) 3. the complete upload and drag-and-drop panel - Keep the hero compact: no oversized headline, no tall intro section, no large empty space above or below the headline. - Use responsive, viewport-aware spacing instead of fixed oversized padding. - If space is tight, shrink the hero spacing and type before shrinking the upload panel. The upload panel is the most important element on this screen. - Use a balanced, centered layout with a sensible maximum content width. - Any supporting information goes below the tool and must not compete with it visually. EDITOR SCREEN Once an image is uploaded, keep the workspace equally polished. - On desktop, use a two-column layout: the large original image on the left; the Quick Actions, the edit instruction field, and the Edit Image button on the right. - Keep the main controls visible without unnecessary scrolling. - Keep the original image large and easy to inspect. - Quick actions look interactive and refined, using the same SVG icon set, without overwhelming the interface. - The Edit Image button is the most prominent control in the editor. - Show a clear loading state over the image area while an edit is running. RESULT PRESENTATION - Side by Side is the default way to compare Original and Edited: show them in two separate, matching containers. - Also offer optional single-image tabs so the user can view just the Edited result or just the Original. - Do not build a draggable before/after slider. - Preserve each image's natural aspect ratio: use contain behavior, never crop or stretch either image. - Never force the original and the edited image into matching pixel dimensions or coordinates — each keeps its own real size and shape. - Download Result and Start Over must both work correctly from this view. RESPONSIVE - Prioritize desktop and laptop, and keep tablet and mobile fully usable. - Use responsive typography and spacing. Do not carry desktop hero spacing onto small screens. - No horizontal overflow and no tall introductory content. KEEP VERSION 1 FOCUSED Do not add: authentication, user accounts or account UI, Firebase, Supabase, a database, Stripe, pricing, subscriptions, credits, image history, saved projects, galleries, dashboard navigation, collaboration, Photoshop-style layers, an advanced masking system, multiple AI model selectors, social features, marketing sections, testimonials, or blog content. The app should feel premium because the editing workflow itself is exceptionally well presented, not because extra sections were added. Build the complete working first version now.

General Photo Editing

An all-purpose editor for any photo.

Build Your AI Image Editor

Build a complete, working first version of an AI image editor called "{{APP_NAME}}". WHAT IT IS A general-purpose AI photo editor for everyday edits to any photo. The user uploads one image, describes the change in plain language, and gets back an edited version of that same image. THE APP MUST INCLUDE - image upload with a preview of the uploaded image - a text field for the edit instruction - quick-action buttons that fill the instruction field with a ready-made edit - a clear Edit Image button - a clear loading state over the image while the edit is running - useful, real API error messages for an unsupported file, an empty instruction, and a failed edit - the original image and the edited result, clearly labelled - a Download button for the edited result - a Start Over button that clears the image, the instruction, and the result QUICK ACTIONS Add these quick actions: - Change background - Remove object - Add object - Change colors - Restyle image - Improve lighting EXAMPLE INSTRUCTIONS Show these as examples near the instruction field: - Replace the background with a clean, simple studio setting. Keep the main subject unchanged. - Remove the small object on the table. Keep everything else unchanged. - Add a small indoor plant in the empty corner. EDITING BEHAVIOR - Treat the uploaded image as the primary reference for every edit. - Preserve the main subject and every area the user did not ask to change. - Perform the requested edit. Do not redesign or regenerate the whole image. ARCHITECTURE Build this as a plain Express / Node.js application, structured to deploy directly to Hostinger's Express preset. - Express / Node.js only. No Vite, no React, no TypeScript, no frontend compilation step, no esbuild, no SPA build pipeline. - "server.js" is the production entry file. - Serve the frontend as plain HTML/CSS/JS files from a "public/" directory. - "npm start" runs "node server.js". - The same Express application serves both the frontend and the API — no separate frontend server. - "POST /api/edit-image" handles the Gemini image-editing request. - "GET /api/health" returns a JSON health status. - Any unmatched "/api/*" route returns a structured JSON error, never an HTML page. - Read the Gemini API key only on the server, from process.env.GEMINI_API_KEY. Never expose it to browser JavaScript or send it to the client in any response. - Listen on process.env.PORT || 3000, using 3000 as the default production port. - Include a .env.example file listing GEMINI_API_KEY and PORT=3000, so deployment platforms can detect the port. - Never require APP_URL. - Use Google's current recommended image generation and editing model available in Google AI Studio. Do not hard-code an older model. - Keep production dependencies minimal, current, and free of deprecated or known-vulnerable packages. DESIGN Design this as a polished, production-quality AI product, not a generic generated demo. It should look intentionally designed by a strong modern product-design team. App style: {{APP_STYLE}} Use: - a compact, premium header - strong visual hierarchy and refined typography - thoughtful spacing, subtle depth and layering, and soft shadows - restrained gradients or ambient glow - polished borders, surfaces, and button states, with tasteful hover and transition effects - a consistent, professional SVG icon set for every icon in the interface, including the Quick Actions — never emoji as icons Avoid: - generic template styling and flat, unfinished-looking sections - excessive glass effects or gradients - decorative elements that compete with the tool - oversized typography used only to look premium - emoji used as functional icons anywhere in the interface Write the headings and helper text for the use case above. FIRST SCREEN On a desktop or laptop, the user must see the complete image upload area without scrolling. At about 1440 x 900, the whole upload panel fits in the first viewport. Order of the first screen: 1. a compact app header 2. a concise headline with one short supporting sentence (a small badge above it is optional) 3. the complete upload and drag-and-drop panel - Keep the hero compact: no oversized headline, no tall intro section, no large empty space above or below the headline. - Use responsive, viewport-aware spacing instead of fixed oversized padding. - If space is tight, shrink the hero spacing and type before shrinking the upload panel. The upload panel is the most important element on this screen. - Use a balanced, centered layout with a sensible maximum content width. - Any supporting information goes below the tool and must not compete with it visually. EDITOR SCREEN Once an image is uploaded, keep the workspace equally polished. - On desktop, use a two-column layout: the large original image on the left; the Quick Actions, the edit instruction field, and the Edit Image button on the right. - Keep the main controls visible without unnecessary scrolling. - Keep the original image large and easy to inspect. - Quick actions look interactive and refined, using the same SVG icon set, without overwhelming the interface. - The Edit Image button is the most prominent control in the editor. - Show a clear loading state over the image area while an edit is running. RESULT PRESENTATION - Side by Side is the default way to compare Original and Edited: show them in two separate, matching containers. - Also offer optional single-image tabs so the user can view just the Edited result or just the Original. - Do not build a draggable before/after slider. - Preserve each image's natural aspect ratio: use contain behavior, never crop or stretch either image. - Never force the original and the edited image into matching pixel dimensions or coordinates — each keeps its own real size and shape. - Download Result and Start Over must both work correctly from this view. RESPONSIVE - Prioritize desktop and laptop, and keep tablet and mobile fully usable. - Use responsive typography and spacing. Do not carry desktop hero spacing onto small screens. - No horizontal overflow and no tall introductory content. KEEP VERSION 1 FOCUSED Do not add: authentication, user accounts or account UI, Firebase, Supabase, a database, Stripe, pricing, subscriptions, credits, image history, saved projects, galleries, dashboard navigation, collaboration, Photoshop-style layers, an advanced masking system, multiple AI model selectors, social features, marketing sections, testimonials, or blog content. The app should feel premium because the editing workflow itself is exceptionally well presented, not because extra sections were added. Build the complete working first version now.

Other / Custom

Describe your own use case in Customize Prompt.

Build Your AI Image Editor

Build a complete, working first version of an AI image editor called "{{APP_NAME}}". WHAT IT IS An AI image editor for this use case: {{USE_CASE}}. The user uploads one image, describes the change in plain language, and gets back an edited version of that same image. THE APP MUST INCLUDE - image upload with a preview of the uploaded image - a text field for the edit instruction - quick-action buttons that fill the instruction field with a ready-made edit - a clear Edit Image button - a clear loading state over the image while the edit is running - useful, real API error messages for an unsupported file, an empty instruction, and a failed edit - the original image and the edited result, clearly labelled - a Download button for the edited result - a Start Over button that clears the image, the instruction, and the result QUICK ACTIONS Add four or five quick actions that fit this use case. Derive them from the use case itself, and do not invent extra product features. EXAMPLE INSTRUCTIONS Show these as examples near the instruction field: Write three short example instructions that fit this use case. Each one names a single change and what must stay the same. EDITING BEHAVIOR - Treat the uploaded image as the primary reference for every edit. - Preserve the main subject and every area the user did not ask to change. - Perform the requested edit. Do not redesign or regenerate the whole image. ARCHITECTURE Build this as a plain Express / Node.js application, structured to deploy directly to Hostinger's Express preset. - Express / Node.js only. No Vite, no React, no TypeScript, no frontend compilation step, no esbuild, no SPA build pipeline. - "server.js" is the production entry file. - Serve the frontend as plain HTML/CSS/JS files from a "public/" directory. - "npm start" runs "node server.js". - The same Express application serves both the frontend and the API — no separate frontend server. - "POST /api/edit-image" handles the Gemini image-editing request. - "GET /api/health" returns a JSON health status. - Any unmatched "/api/*" route returns a structured JSON error, never an HTML page. - Read the Gemini API key only on the server, from process.env.GEMINI_API_KEY. Never expose it to browser JavaScript or send it to the client in any response. - Listen on process.env.PORT || 3000, using 3000 as the default production port. - Include a .env.example file listing GEMINI_API_KEY and PORT=3000, so deployment platforms can detect the port. - Never require APP_URL. - Use Google's current recommended image generation and editing model available in Google AI Studio. Do not hard-code an older model. - Keep production dependencies minimal, current, and free of deprecated or known-vulnerable packages. DESIGN Design this as a polished, production-quality AI product, not a generic generated demo. It should look intentionally designed by a strong modern product-design team. App style: {{APP_STYLE}} Use: - a compact, premium header - strong visual hierarchy and refined typography - thoughtful spacing, subtle depth and layering, and soft shadows - restrained gradients or ambient glow - polished borders, surfaces, and button states, with tasteful hover and transition effects - a consistent, professional SVG icon set for every icon in the interface, including the Quick Actions — never emoji as icons Avoid: - generic template styling and flat, unfinished-looking sections - excessive glass effects or gradients - decorative elements that compete with the tool - oversized typography used only to look premium - emoji used as functional icons anywhere in the interface Write the headings and helper text for the use case above. FIRST SCREEN On a desktop or laptop, the user must see the complete image upload area without scrolling. At about 1440 x 900, the whole upload panel fits in the first viewport. Order of the first screen: 1. a compact app header 2. a concise headline with one short supporting sentence (a small badge above it is optional) 3. the complete upload and drag-and-drop panel - Keep the hero compact: no oversized headline, no tall intro section, no large empty space above or below the headline. - Use responsive, viewport-aware spacing instead of fixed oversized padding. - If space is tight, shrink the hero spacing and type before shrinking the upload panel. The upload panel is the most important element on this screen. - Use a balanced, centered layout with a sensible maximum content width. - Any supporting information goes below the tool and must not compete with it visually. EDITOR SCREEN Once an image is uploaded, keep the workspace equally polished. - On desktop, use a two-column layout: the large original image on the left; the Quick Actions, the edit instruction field, and the Edit Image button on the right. - Keep the main controls visible without unnecessary scrolling. - Keep the original image large and easy to inspect. - Quick actions look interactive and refined, using the same SVG icon set, without overwhelming the interface. - The Edit Image button is the most prominent control in the editor. - Show a clear loading state over the image area while an edit is running. RESULT PRESENTATION - Side by Side is the default way to compare Original and Edited: show them in two separate, matching containers. - Also offer optional single-image tabs so the user can view just the Edited result or just the Original. - Do not build a draggable before/after slider. - Preserve each image's natural aspect ratio: use contain behavior, never crop or stretch either image. - Never force the original and the edited image into matching pixel dimensions or coordinates — each keeps its own real size and shape. - Download Result and Start Over must both work correctly from this view. RESPONSIVE - Prioritize desktop and laptop, and keep tablet and mobile fully usable. - Use responsive typography and spacing. Do not carry desktop hero spacing onto small screens. - No horizontal overflow and no tall introductory content. KEEP VERSION 1 FOCUSED Do not add: authentication, user accounts or account UI, Firebase, Supabase, a database, Stripe, pricing, subscriptions, credits, image history, saved projects, galleries, dashboard navigation, collaboration, Photoshop-style layers, an advanced masking system, multiple AI model selectors, social features, marketing sections, testimonials, or blog content. The app should feel premium because the editing workflow itself is exceptionally well presented, not because extra sections were added. Build the complete working first version now.

Send the Prompt

Open Google AI Studio and start a new app:

Open Google AI Studio

https://aistudio.google.com/apps

Google AI Studio Build

Paste the prompt you copied in Step 1 and send it. Let Google AI Studio build the complete editor.

Connect Your Gemini API Key

Google AI Studio Settings Secrets GEMINI_API_KEY

Select or create a Gemini API key, then assign it to GEMINI_API_KEY.

Open Google AI Studio API Keys

https://aistudio.google.com/apikey

Run One Real Edit

Upload a real image Choose one Quick Action Click Edit Image Confirm the edited result appears Confirm Download works

A good one to start with for Product Photos: "Studio background".

A good one to start with for E-commerce Images: "Clean white background".

A good one to start with for Portraits & Headshots: "Professional background".

A good one to start with for Social Media: "Replace background".

A good one to start with for Interior & Real Estate: "Brighten the room".

A good one to start with for General Photo Editing: "Change background".

Connect the Project to GitHub

Connect GitHub in Google AI Studio Create or select the project repository Sync the latest working version

Deploy on Hostinger

Get Hostinger Web App Hosting

Deploy your Google AI Studio project from GitHub and keep future updates connected.

USED IN TUTORIAL

Hostinger Websites Add Website Node.js Web App

Connect GitHub Select the project repository Confirm the deployment settings below Add the environment variables below Deploy

Deployment Settings

Express 22.x ./ npm server.js

Express

Framework preset

22.x

Node.js

./

Root directory

npm

Package manager

server.js

Entry file

GEMINI_API_KEY PORT

GEMINI_API_KEY

Your billing-enabled Gemini API key — server-side only

PORT

3000

Get this value from Google AI Studio

Open API Keys

https://aistudio.google.com/apikey

Test the Live Editor

Open the live URL

Upload an image

Run one Quick Action and confirm the edited result appears

Make Changes Later

Make your change in Google AI Studio, test it, then sync the latest version to GitHub. Hostinger deploys the updated repository.