Ship a Full-Stack App with One Prompt

Copy this prompt into your AI coding agent, or open it in one below.

Give this to your AI Create a to-do list app using Puter.js
Tutorials

Free, Unlimited Nano Banana (Pro, 2, and 2 Lite) API

On this page

In this tutorial, we'll show you how to add Nano Banana image generation to your app for free, without any API keys. Nano Banana is Google's lineup of image generation models that create high-quality images from text descriptions. Using Puter.js, you can access its models, such as Nano Banana 2 (Gemini 3.1 Flash), Nano Banana 2 Lite (Gemini 3.1 Flash Lite Image), Nano Banana Pro (Gemini 3 Pro), and Nano Banana (Gemini 2.5 Flash Image), directly from your frontend code, with no server-side setup or Google AI Studio setup.

Puter.js uses the User-Pays model, where users of your application cover their own AI costs. Each user signs in with their own Puter account when they use the AI, so there are no API keys for you to manage. This means you as a developer don't pay anything for your users' usage, making your app practically free to run. You can scale to unlimited users and pay nothing for the AI or server usage.

Getting Started

To use Puter.js, import our npm module in your project:

// npm install @heyputer/puter.js
import { puter } from '@heyputer/puter.js';

Or alternatively, add our script via CDN if you are working directly with HTML, simply add it to the <head> or <body> section of your code:

<script src="https://js.puter.com/v2/"></script>

Nothing else is required to start using Puter.js for free access to Nano Banana image generation capabilities.

Example 1: Image generation with Nano Banana Pro

Nano Banana Pro (Gemini 3 Pro Image) excels at generating sharp, legible text, allowing you to create posters or product mockups. It also comes with real-world knowledge and deep reasoning capabilities, ensuring your image information is accurate and precise.

puter.ai.txt2img("A vintage movie poster for 'The Last Voyage', featuring bold art deco typography with the tagline 'An Adventure Beyond Time' and 'Coming Soon 2024' at the bottom", { 
    model: "gemini-3-pro-image-preview"
})
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Nano Banana Pro Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img("A vintage movie poster for 'The Last Voyage', featuring bold art deco typography with the tagline 'An Adventure Beyond Time' and 'Coming Soon 2024' at the bottom", { 
            model: "gemini-3-pro-image-preview"
        })
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 2: Image generation with Nano Banana 2

Nano Banana 2 (Gemini 3.1 Flash Image) combines Pro-level quality with the speed of the Flash architecture, featuring advanced world knowledge, precise text rendering, and subject consistency.

<html>
<body>
    <h1>Nano Banana 2 Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img("A serene Japanese garden with cherry blossoms", {
            model: "gemini-3.1-flash-image-preview"
        })
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 3: Fast, low-cost image generation with Nano Banana 2 Lite

Nano Banana 2 Lite (Gemini 3.1 Flash Lite Image) is the fastest and lowest-cost model in the Nano Banana family, which makes it a good fit for high-volume or latency-sensitive apps and batch image generation.

<html>
<body>
    <h1>Nano Banana 2 Lite Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img("A red panda sleeping on a tree branch", {
            model: "google/gemini-3.1-flash-lite-image"
        })
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 4: Comparing Nano Banana models

You can compare different Nano Banana models to compare the results.

<html>
<body>
    <h2>Model Comparison</h2>
    <div id="images"></div>
    
    <script src="https://js.puter.com/v2/"></script>
    <script>
        const prompt = "A cyberpunk street scene with neon lights";
        const container = document.getElementById('images');

        // Nano Banana Pro (Gemini 3 Pro Image)
        puter.ai.txt2img(prompt, { model: "gemini-3-pro-image-preview" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>Nano Banana Pro (Gemini 3 Pro Image)</h3>';
Show 33 more lines...
<html>
<body>
    <h2>Model Comparison</h2>
    <div id="images"></div>
    
    <script src="https://js.puter.com/v2/"></script>
    <script>
        const prompt = "A cyberpunk street scene with neon lights";
        const container = document.getElementById('images');

        // Nano Banana Pro (Gemini 3 Pro Image)
        puter.ai.txt2img(prompt, { model: "gemini-3-pro-image-preview" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>Nano Banana Pro (Gemini 3 Pro Image)</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });

        // Nano Banana 2 (Gemini 3.1 Flash Image)
        puter.ai.txt2img(prompt, { model: "gemini-3.1-flash-image-preview" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>Nano Banana 2 (Gemini 3.1 Flash Image)</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });

        // Nano Banana 2 Lite (Gemini 3.1 Flash Lite Image)
        puter.ai.txt2img(prompt, { model: "google/gemini-3.1-flash-lite-image" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>Nano Banana 2 Lite (Gemini 3.1 Flash Lite Image)</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });

        // Nano Banana (Gemini 2.5 Flash Image)
        puter.ai.txt2img(prompt, { model: "google/gemini-2.5-flash-image" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>Nano Banana (Gemini 2.5 Flash Image)</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });
    </script>
</body>
</html>
Collapse code

Example 5: Text and Image-to-Image generation

The following example shows how to generate an image from a text prompt and an image by providing input_image and input_image_mime_type parameters:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img("Turn this image into a watercolor painting", { 
            model: "google/gemini-3.1-flash-image-preview",
            input_image: "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",
            input_image_mime_type: "image/png"
        }).then((image)=>{
            document.body.appendChild(image);
        });
    </script>
</body>
</html>

Available Models

Puter.js gives you access to the following Google image models through the puter.ai.txt2img() function:

google/gemini-3.1-flash-lite-image
google/gemini-3.1-flash-image-preview
google/gemini-3-pro-image-preview
google/gemini-2.5-flash-image
google/imagen-4.0-ultra
google/imagen-4.0
google/imagen-4.0-fast
google/imagen-4.0-preview

Nano Banana Free API Key

Google via their AI Studio gives you an API key for free, with no credit card required. That key works with a limited selection of their models, so some use cases are free to build. Nano Banana is not one of them: it sits outside the free tier, so once you generate an image you have to enable billing and pay per image. Creating the key costs nothing; using it for image generation does.

With Puter.js, you can add Nano Banana to your app without an API key. There is nothing to create and no billing to enable, and each user covers their own image generation through their Puter account, so your app runs at no cost to you regardless of how many users you have.

Conclusion

To add Nano Banana to your app for free, include Puter.js and call puter.ai.txt2img() with a prompt and a Gemini image model. There are no Google API keys, no billing to enable, and no backend to set up. Through the User-Pays model, each user covers their own image generation, so your app stays free to run as it scales to any number of users.

You can find all AI features supported by Puter.js in the documentation.

Ship a Full-Stack App with One Prompt

Give this to your AI Build an AI chat app using Puter.js