Virtually Try Clothes on with Gemini Nano Banana Via RCS

Introduction

I was really excited to start building with Gemini after all the AI-related announcements at Google I/O 2025. In this blog post, I’ll show you how to use Gemini Nano Banana, officially referred to as Gemini 2.5 Flash Image in the Gemini API, to generate and edit images by combining one or more photos with text instructions.

There's an iconic scene in the movie Clueless Game where Cher, the protagonist, talks about the everyday life of a teenage girl choosing her school outfits and shows an app where she's added a selfie. Then she can choose her own outfits, which are shown to her virtually on a very old computer. Buying clothes online for me is a guessing game; I never know if they will look good on me, and returns are a hassle. After this blog post, we'll be able to preview outfits on a person, whether to build your own virtual wardrobe, try clothes before buying, or for many other reasons we can think of!

This post is a setup guide, not a complete step-by-step build. You’ll clone the project, add your environment variables, and start a Node.js server that uses Gemini and Imagen to add new clothes to your photo. The server then sends the result image to your phone as an RCS image using the Vonage Messages API. There is no web frontend, just your phone, your Vonage account, and the server.

Note: You can find the complete code in the GitHub repository.

RCS Conversation

Overview

Here’s how the app works. You’ll text your RBM agent two images: first, a selfie, and then one of the clothing items you'd like to try out.

The server fetches both images from the inbound webhooks, asks Gemini 2.5 Flash Image to composite the garment onto the person, stores the resulting PNG in memory, and replies with an RCS standalone Rich Card that displays the try-on image and a couple of suggested replies. 

How the Gemini Integration Works

When you navigate to Google AI Studio, log in, and create a new chat. Choose the model. I've used “Gemini 2.5 Flash Image". To learn more, visit the Gemini Developer API documentation page. 

If you'd like to try it out without thinking of code yet, you can try sending the image of the person and the piece of garment you want them to wear, and see the final result in the conversation chat, you could then click on ‘<\>Get Code' at the top right and select your programming language of choice to use the code of this project alongside sending RCS messages or any other way you'd prefer.

Prerequisites

• A registered RCS Business Messaging (RBM) agent. Your Vonage account manager can enable this.

• A phone with RCS capabilities for testing.

• Node.js 18+.

• Gemini API Key.

• ngrok.

  Vonage API Account

  To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

  

  Ready to start building?

  Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Create the Vonage application

To create an application, go to the Create an Application page on the Vonage Dashboard and define a Name for your Application.

• Click on "generate public and private key". A private key (.key file) will be generated. Download and store it securely. This key is needed for authentication when making API requests. Note: Private keys will not work unless the application is saved.

• Choose the 'Messages’ capability, and we'll add the required webhooks (e.g., event URLs, answer URLs, or inbound message URLs). These will be described in the tutorial under “Configure Webhooks on the Vonage Dashboard”.

• To save and deploy, click "Generate new application" to finalize the setup. Your application is now ready to use with Vonage APIs.

Spin up an ngrok Tunneling Instance

If you haven’t used ngrok before, learn how to start testing with ngrok. I’ve added the steps to run an instance below the image in the next section.

Run the following command to start an ngrok tunneling instance.

ngrok http 3000

In the output, you’ll find a URL that starts with https:// and ends in .ngrok.app/. Make a note of it as you’ll need it for the next step to configure your webhooks. 

Forwarding https://94cd51b63460.ngrok.app/ -> http://localhost:8000    

Configure Webhooks on the Vonage Dashboard

Open the Vonage application you’ve created, click on “Edit”, scroll down to capabilities, toggle the Messages option under capabilities, and set your server's public URL from ngrok as the endpoint for inbound messages and events. it should look like: https://94cd51b63460.ngrok.app/webhooks/inbound for inbound and https://94cd51b63460.ngrok.app/webhooks/status for status. If you’d like to learn more about webhooks, you can find information on our Vonage documentation.

Set up the Node Project

Clone the project, change into its directory, and install the dependencies listed in package.json.

git clone https://github.com/Vonage-Community/blog-messages_rcs_nodejs-try_on.git

cd blog-messages_rcs_nodejs-try_on

npm install 

Populate the Environment Variables File

Create a .env file in your project root and add and populate the following environment variables.

VONAGE_APPLICATION_ID=your-app-id

VONAGE_PRIVATE_KEY_PATH=./private.key

RCS_SENDER_ID=your-rcs-sender-id

GEMINI_API_KEY=your-gemini-api-key

VONAGE_API_SIGNATURE_SECRET=your-signature-secret

PUBLIC_BASE_URL=https://your-ngrok-subdomain.ngrok-free.app

PHONE_NUMBER=+<your_e164_number>

PORT=3000

Code Logic and Workflow

The index.js file contains the moving parts to implement our workflow: receiving the two images via RCS messages, using Gemini's Nano-Banana model for the try-on magic, and then sending back an RCS Rich card message containing the final generated look on the selfie. In your project, you'll also have a vonage.js file that includes dotenv and the Vonage Client Setup.

The handleInboundMessage(request) function listens for the Vonage webhook, securely validates that the incoming request came from Vonage verifying its signature's JWT (you can learn more about verifying the request), and extracts the user's selfie URL and phone number.

The core function of our application is the generateTryOnImage(selfieUrl, clothingUrl). It calls the Nano-Banana Gemini API. It sends both images along with a precise text instruction to the Gemini-2.5-flash-image model. The API generates the new final image and returns the image data to the server. We can obtain results comparable to photo editing software without the required skills, in a quick, programmatic approach.

The createAndSendRCSCard(newImageUrl, userPhoneNumber) method returns the final result: it uses the AI-generated image data and sends it back to the user via the Vonage Messages API.

Test it Out

Run the server by typing the following command in your command prompt or terminal.

node index.js

Ensure your ngrok tunnel is still running and that its HTTPS URL is set in the Vonage Dashboard under the Messages API Capabilities for both inbound and status webhooks. Optionally, open https://<your-ngrok-url>/test to kick off the conversation (this just starts the conversation thread; it doesn’t preload any images).You'll see a {"ok":true,"to":"phone_number"} on that page. If the message was sent correctly, you should have received an RCS message on your RCS-enabled phone.

From your phone, you can send a selfie (a picture of the person or character who will be wearing the piece of clothing) to the RBM agent, and then send a photo of the clothing. And finally, you’ll receive an RCS Rich Card with the edited preview.

Possible Extension

This was such a cool project to build, with endless possibilities for what you can do with it. With RCS already set up, consider adding other RCS message types. You can use a quick reply to ask “Top / Bottom / Full look?” and condition your prompt accordingly. 

You could even have very specific requests to see how they'd look on a specific piece of clothing: "Try the green slip dress at knee length with a plain background." And you can request even more precise edits using Imagen, for instance, if you need more control over details like fabric, lighting, or background. I created a blog post showcasing an Imagen use to visualize the weather you should check out.

Conclusion

There's a lot AI has to offer. Go ahead and try some more projects using it. Check our Vonage Blog for more ideas. I've been very excited about AI in general and experimenting a lot with Gemini. I create so many bedtime stories for my kid before bedtime. You can also learn to Build a Storytelling Service With RCS Rich Cards and Gemini, and I've been using Storybooks within Gemini a lot lately.