On this page
Getting StartedExample 1: Generate a simple image with GPT ImageExample 2: Use different quality settingsSupported OpenAI Image ModelsConclusionRelated
Tutorials

Free, Unlimited GPT Image API

Nariman Jelveh, Reynaldi Chernando
On this page
Getting StartedExample 1: Generate a simple image with GPT ImageExample 2: Use different quality settingsSupported OpenAI Image ModelsConclusionRelated

This tutorial will show you how to use Puter.js to access GPT Image for free image generation, without needing an OpenAI API key. Puter.js is completely free and open-source, allowing you to provide your users with OpenAI's image generation capabilities without any API keys or usage restrictions. Using Puter.js, you can access GPT Image-2, GPT Image-1.5, and GPT Image 1 directly from your frontend code without any server-side setup.

Puter is the pioneer of the "User-Pays" model, which allows developers to incorporate AI capabilities into their applications while each user covers their own usage costs. This model enables developers to offer advanced image generation capabilities to users at no cost to themselves, without any API keys or server-side setup.

Getting Started

To use Puter.js, import our NPM library 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 GPT Image generation capabilities.

Example 1: Generate a simple image with GPT Image

To generate an image using GPT Image, use the puter.ai.txt2img() function with the gpt-image-2 model:

puter.ai.txt2img("A serene Japanese garden with cherry blossoms", { 
    model: "gpt-image-2" 
})
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

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

Example 2: Use different quality settings

GPT Image-2 supports three quality levels: high, medium, and low. You can specify the quality to balance between image quality and generation speed:

<html>
<body>
    <h2>Quality 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');
        
        // Low quality (fastest)
        puter.ai.txt2img(prompt, { model: "gpt-image-2", quality: "low" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>GPT Image-2 (Low Quality)</h3>';
Show 24 more lines... 
<html>
<body>
    <h2>Quality 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');
        
        // Low quality (fastest)
        puter.ai.txt2img(prompt, { model: "gpt-image-2", quality: "low" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>GPT Image-2 (Low Quality)</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });

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

        // High quality (best quality, slower)
        puter.ai.txt2img(prompt, { model: "gpt-image-2", quality: "high" })
            .then(img => {
                const div = document.createElement('div');
                div.innerHTML = '<h3>GPT Image-2 (High Quality)</h3>';
                div.appendChild(img);
                container.appendChild(div);
            });
    </script>
</body>
</html>
Collapse code

Supported OpenAI Image Models

You can also use the following models with the puter.ai.txt2img() function:

gpt-image-2
gpt-image-1.5
gpt-image-1
gpt-image-1-mini
gemini-2.5-flash-image-preview
dall-e-3

Conclusion

That's it! You now have free access to OpenAI's powerful GPT Image models using Puter.js. This allows you to create applications with AI-powered image generation capabilities without needing OpenAI API keys, backend infrastructure, or managing costs.

Free, Serverless AI and Cloud

Start creating powerful web applications with Puter.js in seconds!

Get Started Now

Read the Docs • Try the Playground