Free, Unlimited HiDream API

Reynaldi Chernando

Updated: May 8, 2026

On this page

HiDream's I1 Full, I1 Dev, and I1 Fast models have been retired and are no longer available through the Puter API. This tutorial shows you how to add image generation to your web application using Puter.js with the FLUX models from Black Forest Labs that replace them, without needing API keys or backend infrastructure.

Puter.js uses the User-Pays model, where users of your application cover their own AI costs. This means you, as a developer, don't pay anything for your users' image generation, 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>

This is all you need to start generating images with FLUX in your application.

Example 1: High-fidelity generation with FLUX.2 [pro]

FLUX.2 [pro] is a high-fidelity FLUX model. Use it when image quality and prompt adherence matter most. To generate an image, use the puter.ai.txt2img() function:

puter.ai.txt2img(
    "A serene Japanese garden with cherry blossoms and a koi pond",
    { model: "black-forest-labs/flux-2-pro" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>FLUX.2 [pro] Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A serene Japanese garden with cherry blossoms and a koi pond",
            { model: "black-forest-labs/flux-2-pro" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 2: Balanced speed and quality with FLUX.2 [dev]

FLUX.2 [dev] is a strong default for iterative workflows where you want quality close to the Pro tier without paying its full latency cost:

puter.ai.txt2img(
    "A cyberpunk cityscape with neon lights and flying vehicles",
    { model: "black-forest-labs/flux-2-dev" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>FLUX.2 [dev] Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A cyberpunk cityscape with neon lights and flying vehicles",
            { model: "black-forest-labs/flux-2-dev" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 3: Low-latency generation with FLUX Schnell

FLUX Schnell is tuned for low-latency inference, making it ideal for real-time UIs, high-throughput pipelines, or anywhere responsiveness is the top priority:

puter.ai.txt2img(
    "A cute corgi astronaut floating in zero gravity, vivid colors, highly detailed",
    { model: "black-forest-labs/flux-schnell" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>FLUX Schnell Image Generation</h1>
    <button onclick="generateImage()">Generate Image</button>
    <div id="imageContainer"></div>

    <script src="https://js.puter.com/v2/"></script>
    <script>
        function generateImage() {
            document.getElementById('imageContainer').innerHTML = 'Generating...';

            puter.ai.txt2img(
                "A cute corgi astronaut floating in zero gravity, vivid colors, highly detailed",
                { model: "black-forest-labs/flux-schnell" }
            )
            .then(imageElement => {
                document.getElementById('imageContainer').innerHTML = '';
                document.getElementById('imageContainer').appendChild(imageElement);
            });
        }
    </script>
</body>
</html>

Supported FLUX Models

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

black-forest-labs/flux-2-pro
black-forest-labs/flux-2-dev
black-forest-labs/flux-schnell

Conclusion

Using Puter.js, you can integrate FLUX image generation into your app without having to use API keys or set up an AI server yourself. And thanks to the User-Pays model, you can add this feature for free to your application, since your users cover their own image generation usage, not you as the developer.

You can find more details about Puter.js image generation API in the documentation.

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