Free, Unlimited Image Generation API

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.5 Flare, Nano Banana Pro, FLUX.2 [pro], Grok Imagine Image 2.0, and Stable Diffusion XL 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.5-flare", quality: "low" })
            .then(img => {
                const div = document.createElement('div');

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

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

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-2.0
x-ai/grok-imagine-image
openai/gpt-image-2.5-flare
openai/gpt-image-2.5-sunburst
openai/gpt-image-2
google/gemini-3.1-flash-image
black-forest-labs/flux-2-klein-9b-base
black-forest-labs/flux-2-klein-4b
google/gemini-3-pro-image
google/imagen-4.0
leonardoai/lucid-origin
qwen/qwen-image
black-forest-labs/flux-2-pro
black-forest-labs/flux-2-dev
google/gemini-2.5-flash-image
black-forest-labs/flux-1.1-pro
black-forest-labs/flux-schnell
stabilityai/stable-diffusion-xl-base-1.0

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.5-flare or google/gemini-3-pro-image. 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.

Related

• Free, Unlimited OpenAI API
• Free, Unlimited Claude API
• Free, Unlimited AI API
• Free, Unlimited OpenRouter API
• Free, Unlimited OCR API
• Free, Unlimited Text to Speech API
• Free, Unlimited Video Analysis API
• Free, Unlimited Image Recognition API
• Free, Unlimited Veo API
• Ideogram API Pricing
• Best Image Generation APIs in 2026