ezsite.aiezsite.ai › Blog › How to Clone Nano Banana Website with AI Website Cloner in 2025
← All articlesHow to Clone Nano Banana Website with AI Website Cloner in 2025
Many people are puzzled after seeing Nanobanan.ai:
Hey, Want to Build Your Own AI Image Website? Let's Do This!
So you've seen Nanobanan.ai and you're thinking, "Wow, how the heck did they build something that cool?"
I get it – I had the same reaction! But here's the thing: it's totally doable, and I'm gonna show you exactly how to build your own version from scratch.
Here's What We're Gonna Do Today
Don't worry if you've never done this before – I've got your back! We're gonna tackle this step by step:
🎯 Our Mission
Hook up some serious AI power: We're talking Gemini 2.5 Flash – the good stuff that can turn your text into images AND transform existing images
Build a killer landing page: Something that actually looks professional, not like your first HTML project from 2005
Get it ready for the real world: Because what's the point if nobody can actually use it, right?
Why Should You Trust Me on This?
Look, I'm not just gonna give you some half-baked tutorial that leaves you hanging. We're gonna go through the entire process – and I mean everything.
Think of me as your coding buddy who's gonna sit right next to you and walk you through each step. By the time we're done, you'll not only have your own AI image site running, but you'll actually understand how the whole thing works.
Ready to dive in? Great! Grab your coffee, roll up your sleeves, and let's build something awesome together. Trust me, it's gonna be way easier than you think!
Prompt Construction
We now need to go to Easysite.ai (or any other AI programming tools like Cursor, Claude Code, Bolt, Lovable, etc. - the principle is the same) to send cloning instructions. Try to prepare the prompt content as comprehensively as possible, giving AI everything needed for design and development in one go.
Here we need to think about what content to include in our prompts. Prompts aren't about rote memorization, but about designing and assembling them based on our needs. Our requirements here are:
Clone Target: We need to replicate as close to 100% as possible, so the content we provide should ideally be in this order of effectiveness: Code > Screenshots
To simplify the operation, we'll use the "clone by URL" approach to provide the AI image generation model, replicating Nano Banana through code parsing + screenshots.
Find APIs for online model providers and provide input examples and output examples, so the AI knows the format and calling requirements.
Technical Solution:
For better results and easier maintenance later, we commonly use React/Vue + Node Server. For other technical solutions, you can use Chat Mode to ask AI.
This section is explaining the strategic approach to creating effective prompts for AI development tools:
Priority of reference materials: Actual code is better than screenshots for replication Method: Using URL-based cloning with code parsing and visual references
API Integration:
Need to find and document API endpoints with clear input/output examples Tech Stack: Recommending modern web development stack (React/Vue frontend with Node.js backend)
Model Search: Gemini 2.5 Flash Image Preview
Image Editor is an image-to-image model that requires uploading an image;
The base model is text-to-image.
Get input examples and output examples:
Finally, generate your own API KEY in your personal account, and you can combine it into the model context we need:
- Get Your Own API KEY: https://aistudio.google.com/
- Image-to-image model (example input + example output)
https://ai.google.dev/gemini-api/docs/image-generation#rest
- Text-to-image model (example input + example output)
https://ai.google.dev/gemini-api/docs/image-generation#rest
This section is outlining the technical components needed for the AI image generation integration:
- Model Identification: Specifying the exact Gemini 2.5 Flash model
Edit version: Requires image upload for image-to-image generation
- Base version: Text-to-image generation
- Documentation Requirements: Need to gather:
API authentication (API key)
- Working examples of both model types with their input/output formats
Step by Step Clone Nano Banana on EasySite.AI:
Open EasySite.ai
Select Clone Tab: Enter https://nanobanana.ai
Select all sub pages that you want to clone
Use following prompt:
- Remove Batch Processing feature
- Images can be uploaded up to a maximum of 9 pictures
- Pay attention to the dynamic interactive parts on the website, such as proper tab implementation and maintaining consistent active states
- Unified expand/collapse interactions for the FAQ section
- Unified image upload component interactions, especially for multiple image uploads and deletion of uploaded images
- The second screenshot shows the style after switching to the text-to-image tab
- Technology: Tech stack uses React + Tailwind CSS + Node Server
- Image Generation Models: gemini-2.5-flash-image-preview
- Use this GEMINI API KEY: <YOUR API KEY> ;
- implement the API key in node-server;
- use following API for text to image feature:
POST"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent" \-H "x-goog-api-key: $GEMINI_API_KEY" \-H "Content-Type: application/json" \-d '{"contents": [{"parts": [{"text": "Create a picture of a nano banana dish in a fancy restaurant with a Gemini theme"}]}]}'
Output Format:
{ candidates:[ content:"xx", "parts":[ { "text": "xxx" }, { "inlineData": { // const imageUrl = data:${inlineData.mimeType};base64,${inlineData.data}; "data":"", // base64 string "mimeType":"image/png" }}]]}
Use following Rest API for image to image feature:
POST \"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent" \-H "x-goog-api-key: $GEMINI_API_KEY" \-H 'Content-Type: application/json' \-d "{\"contents\": [{\"parts\":[{\"text\": \"'Create a picture of my cat eating a nano-banana in a fancy restaurant under the Gemini constellation\"},{\"inline_data\": {\"mime_type\":\"image/jpeg\",\"data\": \"$IMG_BASE64\"}}]}]}"
Tips: $IMG_BASE64: BASE64 String
Ouput Format；
{ candidates:[ content:"xx", "parts":[ { "text": "xxx" }, { "inlineData": { // const imageUrl = data:${inlineData.mimeType};base64,${inlineData.data}; "data":"", // base64 string "mimeType":"image/png" }}]]}