Ship a Full-Stack App with One Prompt

Copy this prompt into your AI coding agent, or open it in one below.

Give this to your AI Create a to-do list app using Puter.js

Coding manually? see the guide

Tutorials

Free, Unlimited RunDiffusion API

On this page

RunDiffusion's Juggernaut Lightning Flux and Juggernaut Pro Flux models have been retired and are no longer available through the Puter API. This tutorial shows you how to add photorealistic 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>

Nothing else is required to start generating images with FLUX in your application.

Example 1: Fast generation with FLUX Schnell

FLUX Schnell is a speed-optimized FLUX model tuned for low-latency inference. It's a great default when you want quick previews or interactive UI:

puter.ai.txt2img(
    "A photorealistic portrait of a fashion model on a Tokyo street at night, neon reflections on wet pavement, 35mm film aesthetic, shallow depth of field",
    { model: "black-forest-labs/flux-schnell" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>FLUX Schnell Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A photorealistic portrait of a fashion model on a Tokyo street at night, neon reflections on wet pavement, 35mm film aesthetic, shallow depth of field",
            { model: "black-forest-labs/flux-schnell" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

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

FLUX.2 [pro] is a higher-quality FLUX model, tuned for sharper detail, better skin and material rendering, and stronger prompt adherence. Use it when you care more about output quality than throughput:

puter.ai.txt2img(
    "An ultra-detailed product photograph of a vintage leather watch on a marble surface, soft window light, visible stitching, macro lens, commercial photography",
    { 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(
            "An ultra-detailed product photograph of a vintage leather watch on a marble surface, soft window light, visible stitching, macro lens, commercial photography",
            { model: "black-forest-labs/flux-2-pro" }
        )
        .then(imageElement => {
            document.body.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-schnell
black-forest-labs/flux-2-pro

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

Coding manually? see the guide