On this page
Getting StartedExample 1: Generate an image with Lucid OriginExample 2: Generate an image with Phoenix 1.0Supported Leonardo.Ai ModelsRelated
Tutorials

Free, Unlimited Leonardo.Ai API

Reynaldi Chernando
On this page
Getting StartedExample 1: Generate an image with Lucid OriginExample 2: Generate an image with Phoenix 1.0Supported Leonardo.Ai ModelsRelated

This tutorial shows you how to add Leonardo.Ai image generation to your web application using Puter.js, without needing API keys or backend infrastructure. With Puter.js, you can access Leonardo.Ai models such as Lucid Origin and Phoenix 1.0 directly from client-side JavaScript.

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 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 generating images with Leonardo.Ai models in your application.

Example 1: Generate an image with Lucid Origin

To generate an image using Lucid Origin, use the puter.ai.txt2img() function:

puter.ai.txt2img(
    "A bold typographic poster for a coffee shop, vibrant colors, sharp detail, the words 'MORNING BREW' rendered cleanly in the center",
    { model: "leonardoai/lucid-origin" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Lucid Origin Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A bold typographic poster for a coffee shop, vibrant colors, sharp detail, the words 'MORNING BREW' rendered cleanly in the center",
            { model: "leonardoai/lucid-origin" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 2: Generate an image with Phoenix 1.0

Phoenix 1.0 is Leonardo.Ai's foundational image model, built for high prompt fidelity (around 95% adherence) and high-resolution output up to ~5 megapixels. To use it, simply change the model parameter:

puter.ai.txt2img(
    "A magazine cover featuring an astronaut floating above Earth at sunrise, magazine title 'ORBIT' across the top, photorealistic, magazine layout",
    { model: "leonardoai/phoenix-1.0" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Phoenix 1.0 Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A magazine cover featuring an astronaut floating above Earth at sunrise, magazine title 'ORBIT' across the top, photorealistic, magazine layout",
            { model: "leonardoai/phoenix-1.0" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Supported Leonardo.Ai Models

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

leonardoai/lucid-origin
leonardoai/phoenix-1.0



Using Puter.js, you can integrate Leonardo.Ai 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.

Free, Serverless AI and Cloud

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

Get Started Now

Read the Docs • Try the Playground