Free, Unlimited Image Generation API

Nariman Jelveh, Reynaldi Chernando

Updated: June 30, 2026

On this page

Getting Started Example 1: Generate a simple image Example 2: Use different models and quality settings List of Image Generation Models Conclusion Related

This tutorial will show you how to use Puter.js to add AI image generation to your apps for free, without needing API keys or servers. Puter.js provides access to powerful image generation models including GPT Image 2, Nano Banana Pro, FLUX.2 [pro], Grok Imagine Image, and Stable Diffusion 3 directly from your frontend code.

Puter.js uses the User-Pays model, where users of your application cover their own AI costs. Each user authenticates with their own Puter account, 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.

Puter.js is also a great fit for AI coding assistants, agents, and vibe coding platforms such as Claude Code, Codex, OpenCode, Lovable, Replit, Bolt.new, and others. Since Puter.js needs no keys and no backend, AI-generated apps and programs that rely on it run end-to-end with no third-party service to sign up for, nothing to provision, and no API keys to paste in. That removes a significant category of security issues along with the setup friction that normally prevents these apps from working out of the box.

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 image generation capabilities.

Example 1: Generate a simple image

To generate an image using GPT Image, use the puter.ai.txt2img() function:

puter.ai.txt2img("A peaceful mountain landscape at sunset")
    .then(imageElement => {
        document.body.appendChild(imageElement);
    });

Full code example:

<html>
<body>
    <h1>AI Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img("A peaceful mountain landscape at sunset")
            .then(imageElement => {
                document.body.appendChild(imageElement);
            });
    </script>
</body>
</html>

The above example uses the default model to generate an image. You can specify different models and quality settings as shown in the next example.

Example 2: Use different models and quality settings

You can specify different image generation models and quality levels:

<html>
<body>
    <h2>Different Models Comparison</h2>
    <div id="images"></div>
    
    <script src="https://js.puter.com/v2/"></script>
    <script>
        const prompt = "A futuristic city with flying cars";
        const container = document.getElementById('images');
        container.innerHTML = '';

        // GPT Image with low quality
        puter.ai.txt2img(prompt, { model: "openai/gpt-image-2", quality: "low" })
            .then(img => {
                const div = document.createElement('div');

Show 43 more lines...

<html>
<body>
    <h2>Different Models Comparison</h2>
    <div id="images"></div>
    
    <script src="https://js.puter.com/v2/"></script>
    <script>
        const prompt = "A futuristic city with flying cars";
        const container = document.getElementById('images');
        container.innerHTML = '';

        // GPT Image with low quality
        puter.ai.txt2img(prompt, { model: "openai/gpt-image-2", quality: "low" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>GPT Image (Quality set to low)</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });

        // Nano Banana Pro (Gemini 3 Pro Image)
        puter.ai.txt2img(prompt, { model: "google/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);
            });

        // FLUX.2 [pro]
        puter.ai.txt2img(prompt, { model: "black-forest-labs/flux-2-pro" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>FLUX.2 [pro]</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });

        // Grok Imagine Image
        puter.ai.txt2img(prompt, { model: "x-ai/grok-imagine-image" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>Grok Imagine Image</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });

        // Stable Diffusion 3
        puter.ai.txt2img(prompt, { model: "stabilityai/stable-diffusion-3-medium" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>Stable Diffusion 3</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });
    </script>
</body>
</html>

Collapse code

List of Image Generation Models

The following image generation models are supported by Puter.js, which can be used with the puter.ai.txt2img() function:

x-ai/grok-imagine-image-quality
x-ai/grok-imagine-image
openai/gpt-image-2
qwen/qwen-image-2.0-pro
qwen/qwen-image-2.0
google/gemini-3.1-flash-image-preview
black-forest-labs/flux-2-klein-9b-base
black-forest-labs/flux-2-klein-4b
wan-ai/wan2.6-image
google/gemini-3-pro-image-preview
openai/gpt-image-1.5
openai/gpt-image-1-mini
bytedance-seed/seedream-4.0
google/imagen-4.0-ultra
google/imagen-4.0-fast

Show 26 more lines...

x-ai/grok-imagine-image-quality
x-ai/grok-imagine-image
openai/gpt-image-2
qwen/qwen-image-2.0-pro
qwen/qwen-image-2.0
google/gemini-3.1-flash-image-preview
black-forest-labs/flux-2-klein-9b-base
black-forest-labs/flux-2-klein-4b
wan-ai/wan2.6-image
google/gemini-3-pro-image-preview
openai/gpt-image-1.5
openai/gpt-image-1-mini
bytedance-seed/seedream-4.0
google/imagen-4.0-ultra
google/imagen-4.0-fast
google/imagen-4.0
leonardoai/lucid-origin
qwen/qwen-image
black-forest-labs/flux.1-kontext-pro
black-forest-labs/flux.1-kontext-max
black-forest-labs/flux.2-max
black-forest-labs/flux.2-flex
black-forest-labs/flux-2-pro
black-forest-labs/flux-2-dev
google/imagen-4.0-preview
bytedance-seed/seedream-3.0
openai/gpt-image-1
google/gemini-2.5-flash-image
hidream-ai/hidream-i1-full
hidream-ai/hidream-i1-fast
hidream-ai/hidream-i1-dev
ideogram/ideogram-3.0
leonardoai/phoenix-1.0
rundiffusion/juggernaut-pro-flux
rundiffusion/juggernaut-lightning-flux
black-forest-labs/flux-1.1-pro
black-forest-labs/flux.1-krea-dev
black-forest-labs/flux-schnell
stabilityai/stable-diffusion-3-medium
stabilityai/stable-diffusion-xl-base-1.0
lykon/dreamshaper

Collapse code

Conclusion

To add AI image generation to your app for free, include Puter.js and call puter.ai.txt2img(prompt), optionally passing a model such as openai/gpt-image-2 or google/gemini-3-pro-image-preview. No API keys or backend are needed: under the User-Pays model, each user covers their own usage, so the feature costs you nothing to ship at any scale.

Next steps: browse all AI models to pick the right one for your use case, and read the puter.ai.txt2img() docs for the full list of options.

Ship a Full-Stack App with One Prompt

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

Try in

Coding manually? see the guide