Tutorials

Free, Unlimited FLUX AI API

This tutorial shows how to use Puter.js for generating images with FLUX AI models by Black Forest Labs for free, without needing API keys or backend infrastructure. With Puter.js, you gain immediate access to FLUX AI models such as FLUX.1 Schnell, FLUX.1 Kontext, FLUX.1 [dev], FLUX.1 [pro], FLUX 1.1 Pro, and more, all callable directly from client-side JavaScript.

Through Puter's "User-Pays" model, you can integrate advanced AI image generation into your apps while users handle their individual usage costs. This approach lets you deliver professional-grade image generation features without incurring costs, managing API credentials, or configuring server infrastructure.

Getting Started

Using Puter.js requires zero configuration—no API keys, no sign-up. Simply add this script tag to your HTML file (works in both <head> and <body> sections):

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

This single script tag is all you need to start generating images with FLUX models in your application.

Example 1Generate an image with FLUX.1 Schnell

To generate an image using FLUX.1 Schnell, 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.1-schnell" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>FLUX.1 Schnell 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.1-schnell" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 2Generate an image with FLUX 1.1 Pro

To generate an image using FLUX 1.1 Pro, simply change the model parameter:

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

Full code example:

<html>
<body>
    <h1>FLUX 1.1 Pro 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.1.1-pro" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 3Advanced Generation with Negative Prompts and Custom Parameters

This example demonstrates advanced options like negative prompts, custom dimensions, seed control, and diffusion steps for more precise image generation:

puter.ai.txt2img(
    "A majestic dragon perched on a mountain peak, fantasy art style, detailed scales, dramatic lighting",
    {
        model: "black-forest-labs/FLUX.1-schnell",
        width: 768,
        height: 1024,
        steps: 30,
        seed: 42,
        negative_prompt: "blurry, low quality, distorted, ugly, bad anatomy, watermark, text, signature"
    }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Advanced FLUX.1 AI Generation</h1>
    <button onclick="generateImage()">Generate Dragon Art</button>
    <div id="imageContainer"></div>
    
    <script src="https://js.puter.com/v2/"></script>
    <script>
        function generateImage() {
            // Clear previous image
            document.getElementById('imageContainer').innerHTML = 'Generating...';
            
            puter.ai.txt2img(
                "A majestic dragon perched on a mountain peak, fantasy art style, detailed scales, dramatic lighting",
                {
                    model: "black-forest-labs/FLUX.1-schnell",
                    width: 768,
                    height: 1024,
                    steps: 30,
                    seed: 42, // Same seed will produce consistent results
                    negative_prompt: "blurry, low quality, distorted, ugly, bad anatomy, watermark, text, signature"
                }
            )
            .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.1-Canny-pro
black-forest-labs/FLUX.1-dev
black-forest-labs/FLUX.1-dev-lora
black-forest-labs/FLUX.1-kontext-dev
black-forest-labs/FLUX.1-kontext-max
black-forest-labs/FLUX.1-kontext-pro
black-forest-labs/FLUX.1-krea-dev
black-forest-labs/FLUX.1-pro
black-forest-labs/FLUX.1-schnell
black-forest-labs/FLUX.1-schnell-Free
black-forest-labs/FLUX.1.1-pro



You're all set! With Puter.js, you've unlocked free access to FLUX's powerful models. Build stunning AI-powered image generation features into your apps—no API keys to manage, no backend servers to maintain, and zero infrastructure costs. Experience truly serverless image generation with FLUX!

Related

Free, Serverless AI and Cloud

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

Get Started Now

Read the Docs • Try the Playground