Construct an AI Headshot App in 15 Minutes (with Google Nano Banana)

Pricey subscribers,

In the present day, I need to present you tips on how to construct an app that turns your photographs into skilled headshots utilizing Google’s nano banana picture mannequin.

It is a nice app to construct in case you’re new to AI coding as a result of it’s simply actually enjoyable to create skilled headshots for your loved ones and associates.

I’ve made this tutorial 100% free and included all my AI prompts beneath to make this as easy for you as attainable. Watch now:

Timestamps:

• (00:00) An summary of our AI headshot app

• (00:46) Step 1: Work with AI to draft the spec

• (04:00) Step 2: Constructing the UI and scaffolding

• (05:55) Step 3: Creating 3 prompts for headshot kinds

• (09:10) Step 4: Hooking up Google’s Nano Banana API

• (11:49) Step 5: Fixing bugs and points

• (12:35) Testing the whole app finish to finish

Watch now on YouTube or learn the written information beneath. P.S. I get up at 6 am to make these tutorials so subscribe to my YouTube in case you take pleasure in them. 🙏

Due to Linear for sponsoring this article!

Groups on the quickest rising corporations on the planet (together with OpenAI, Ramp, Cursor, and extra) are utilizing Linear to collaborate with AI brokers that may:

• Analyze buyer suggestions from a number of sources

• Auto-triage tickets and assign homeowners

• Construct full options from scratch

It’s the very best device that I’ve tried for planning and constructing merchandise. See for your self what the distinction is by attempting Linear Enterprise for six months totally free.

Strive Linear Enterprise for Free

Let’s construct an app utilizing Google’s nano banana API the place you may:

1. Add a selfie

2. Choose from 3 skilled headshot kinds (company, inventive, govt)

3. Get a refined headshot to obtain

Begin by pasting this immediate into your AI coding device (I exploit Cursor with Claude Code):

Create a spec.md for an expert headshot AI app the place I can add a photograph, choose from one in all three kinds (company basic, inventive skilled, govt portrait), after which get an expert headshot that I can instantly evaluate to my authentic photograph.

Embrace the necessities, tech stack, and a couple of milestones. First milestone is to arrange the UI and 2nd is so as to add Google’s nano banana picture to picture API: https://ai.google.dev/gemini-api/docs/image-generation. 

Use React for frontend and Categorical for backend.

When getting AI to put in writing the spec, I prefer to ask it to incorporate:

1. Necessities, tech stack, and milestones.

2. Directions to construct the UI within the first milestone so I can see the app replace dwell.

3. Hyperlinks to related documentation (e.g., Google’s nano banana API docs).

As soon as AI drafts the spec, be sure that to evaluate and simplify it. AI usually needs to construct greater than you ask for which might result in issues down the road.

Now let’s ask AI to “Construct milestone 1 and run localhost. Use TailwindCSS 3.”

Tip: I requested AI to make use of “Tailwind 3” (an older frontend react framework) as a result of it’s dangerous at understanding new frameworks (Tailwind 4 simply shipped this yr).

In case you’re run into Tailwind points, don’t surrender. Paste the error messages that you just see within the browser for AI to repair and ultimately, it’s best to get a UI the place you may add a photograph and choose a method:

The precise picture era received’t work as a result of we haven’t built-in the API but.

Now that we now have the UI arrange, let’s ask AI to create a immediate.md file with 3 kinds:

Create a immediate.md file with prompts for 3 kinds:

1. Company: Commonplace LinkedIn-style headshot with impartial background.
2. Inventive: Shut-up with delicate bokeh background and pure lighting.
3. Editorial: Dramatic black and white portrait with inventive lighting.

To your comfort, I’ve included prompts for all three kinds beneath so that you can simply copy and paste into your immediate.md file:

Rework this photograph into a refined profile shot sustaining the precise facial options and id. Topic framed chest-up with headroom, eyes trying instantly at digital camera whereas physique angles barely away. White t-shirt with black leather-based jacket, open smile. Impartial studio background. Excessive-angle perspective with delicate, subtle lighting creating mild catchlights. 85mm lens aesthetic with shallow depth of discipline - sharp concentrate on eyes, delicate bokeh background. Pure pores and skin texture with seen hair element. Vivid, ethereal really feel. Make topic look nice and correct to their authentic look.

Rework this photograph right into a close-up portrait with shallow depth of discipline creating delicate bokeh background. Heat, pure lighting highlighting topic’s options. Informal apparel and real, partaking smile. Topic fills extra of the body. Background hints at inventive workspace or out of doors setting with lovely blur. Protect pure pores and skin texture and genuine options. Fashionable, approachable inventive skilled aesthetic. Make topic look nice and correct to their authentic look.

Rework this photograph right into a dramatic black and white portrait in editorial fashion. Protect topic’s genuine options and character. Apply these specs: monochromatic remedy with wealthy grayscale tones, deep charcoal or black background with delicate gradation, dramatic aspect lighting creating sturdy shadows and highlights on face (Rembrandt or cut up lighting), protect all pure pores and skin texture and element - no smoothing, sharp focus capturing fantastic particulars in eyes and facial options, relaxed and contemplative expression - not smiling, informal skilled apparel (darkish textured jacket, no tie), hand gesture close to chest or face for dynamic composition, excessive distinction with deep blacks and shiny highlights, cinematic movie grain for texture. Preserve editorial pictures aesthetic - inventive however skilled. Make topic look nice and correct to their authentic look.

Tip: To strive one other fashion, simply paste a headshot that you just like into AI and ask it to “Create an AI immediate to recreate this fashion.”

Let’s construct milestone 2 subsequent. First, let’s get a Gemini API key by going to Google AI Studio → Get API key → Create API key:

Subsequent, ask AI to construct milestone 2 and paste the API key into the immediate:

Construct milestone 2. Use this API key: [YOUR_KEY]

Keep in mind to observe the directions within the docs to construct image-to-image: https://ai.google.dev/gemini-api/docs/image-generation

If you wish to give extra context to AI, you can even simply paste on this total part of the Google’s docs as a part of your immediate:

Listed here are some errors that you just may run into whereas constructing this app:

1. Picture era is random. AI is likely to be utilizing the improper Gemini mannequin. Ask it to make use of “gemini-2.5-flash-image-preview.” If it says that Gemini can’t do image-to-image era, inform it that it’s improper and refer it to the docs once more.

2. The UI appears dangerous. Strive pasting a screenshot of my UI within the “What we’ll construct” part up high after which ask AI to make the app look nearer to the screenshot.

You’ll be able to watch me check the whole app right here with some photographs of myself and my associates. In case you adopted this tutorial intently, you now know tips on how to get AI to:

1. Write a spec

2. Construct a full stack app

3. Hook up an actual API

Now go generate some headshots of your folks and tag me on social 📸

If you wish to preserve constructing, take a look at the “AI tutorial” part of my YouTube channel for less difficult to observe tutorials.