> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rork.com/llms.txt
> Use this file to discover all available pages before exploring further.

# NanoBanana AI Image App Tutorial

> Build a custom AI image app that uses Google's popular NanoBanana API.

export const CtaBanner = () => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: "24px",
  flexWrap: "wrap",
  margin: "40px 0 8px",
  padding: "22px 28px",
  borderRadius: "16px",
  background: "linear-gradient(135deg,rgba(249,115,22,0.10),rgba(255,255,255,0.03),rgba(249,115,22,0.06))",
  border: "1px solid rgba(255,255,255,0.08)"
}}>
    <div>
      <div style={{
  fontSize: "19px",
  fontWeight: 700,
  color: "#fff",
  letterSpacing: "-0.3px",
  lineHeight: 1.3
}}>
        Build your app with Rork today.
      </div>
      <div style={{
  fontSize: "14px",
  color: "rgba(255,255,255,0.6)",
  marginTop: "4px",
  lineHeight: 1.5
}}>
        Ship iOS, Android, and web apps by chatting with AI.
      </div>
    </div>
    <a href="https://rork.com" style={{
  flexShrink: 0,
  display: "inline-block",
  padding: "10px 24px",
  background: "linear-gradient(135deg,#fff,#f0f0f0)",
  color: "#000",
  fontSize: "14px",
  fontWeight: 600,
  borderRadius: "100px",
  textDecoration: "none",
  whiteSpace: "nowrap"
}}>
      Try Rork for Free
    </a>
  </div>;

# Build a NanoBanana AI Image App

> Create a powerful **Rork** from scratch with this nano banana AI image app. This shouldn't take more than 10 minutes to get to a solid version.

## Create your Rork app

⏰ *Estimated time: 10 minute*

Follow the steps in this guide to create an AI Image NanoBanana app that uses natural language to let you edit images.

<Steps>
  <Step title="Determine Your Apps Main Style Niche">
    Every viral and successful AI image editing app in the App Store market focuses on a popular niche that a lot of people want to see themselves as. For example

    * *Celebs Style*: Take a selfie with any Celebrity now
    * *Playing Cards Style*: Turn your pictures into playing cards
    * *Polaroid Style*: Turn your photos into realistic looking polaroids

    Choosing a style is the first step in creating this app because it will prompt our initial message to Rork. The simpler and quicker it is to explain what the style is to others, the better it will be.

    For our app, we will be building a graduation photos app. Perfect for college kids who are about to graduate from their schools.
  </Step>

  <Step title="Enter The Initial Prompt">
    Open the [Home Page](https://rork.com/) and enter the following prompt:

    > Create an IOS Graduation Photoshoot Image AI app.
    >
    > * lets people submit or take a photo of themselves
    > * optionally, lets them add which the color of their schools gown and cap
    > * NanoBanana takes that photo and input and then generates 4 images
    > * returns 4 photoset high quality professional photoshoot set of graduation photos.
    > * give an option so they can save and also store each one locally

    <img src="https://mintcdn.com/rork/g1bSoHP9w5uca8vb/Screenshot2025-10-24at2.05.41PM.png?fit=max&auto=format&n=g1bSoHP9w5uca8vb&q=85&s=6ff01d34efd5478632ed3d1fd77bb29f" alt="Screenshot2025 10 08at10 56 56AM Pn" width="1814" height="1026" data-path="Screenshot2025-10-24at2.05.41PM.png" />
  </Step>

  <Step title="Open The Project On Your Phone">
    Instantly, **Rork** handles all the design and development and will start building your app. You can test the app directly on your phone using the Rork app or Expo Go. Just scan the QR code to get it opened on your phone. The app wont fully load until it's finished developing. This should take just a few minutes depending on the complexity of your application.

    <img src="https://mintcdn.com/rork/g1bSoHP9w5uca8vb/Screenshot2025-10-23at9.14.02PM.png?fit=max&auto=format&n=g1bSoHP9w5uca8vb&q=85&s=329cd059ac7d9896054f98527b1a3801" alt="Screenshot2025 10 08at10 59 27AM Pn" width="3444" height="1734" data-path="Screenshot2025-10-23at9.14.02PM.png" />
  </Step>

  <Step title="Test The Final App">
    Once finished, you should see a beautiful simple graduation photoshoot AI image app with an easy to use flow. Try it out and make sure it works. Rork automatically connects your app to the top LLMs like ChatGPT, NanoBanana, and more when you build inside Rork.

    ## Things to Try

    * Take a selfie and then choose your cap and gown color
    * Try a wacky combination of two different colors
    * Save your photos to your phone and make sure thats working

    In just one prompt we got an awesome app that generates graduation photoshoots!

    <img src="https://mintcdn.com/rork/xCxNy6FTenbzUpIB/wowdone.png?fit=max&auto=format&n=xCxNy6FTenbzUpIB&q=85&s=fa96b930386409a5abcc95680006bbf5" alt="Finished Pn" width="811" height="800" data-path="wowdone.png" />
  </Step>
</Steps>

## Additional Features

The beauty of Rork is being able to iterate on your apps beyond their initial prototype. You can build full production apps inside of Rork. Here are some additional features you can add to your app.

<Steps>
  <Step title="Add A Custom Color Picker">
    Our initial app only gave us 4 color options to choose from, but some schools may be a completely different color, or maybe, a user wants a really specific color. So, lets add a custom color picker.

    **Here is the custom color picker prompt:**

    > Please add a custom color picker beyond the 4 options that lets user enter hex or choose from a color picking component.
  </Step>
</Steps>

<CtaBanner />