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 ByteDance Seedream API

On this page

This tutorial shows how to use Puter.js for generating images with ByteDance Seedream AI models for free, without needing API keys or backend infrastructure. With Puter.js, you gain immediate access to Seedream models such as Seedream 5.0 Pro and Seedream 5.0 Lite, 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 cover 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 and no API keys. 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 ByteDance Seedream models in your application.

Example 1: Generate an image with Seedream 5.0 Pro

Seedream 5.0 Pro is ByteDance's newest Seedream model, served through BytePlus. It generates subjects, text, and background as separately editable layers and renders text in 14 or more languages. To generate an image using Seedream 5.0 Pro, use the puter.ai.txt2img() function:

puter.ai.txt2img(
    "A futuristic cityscape at sunset with flying cars and towering skyscrapers",
    { model: "byteplus/dola-seedream-5-0-pro-260628" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Seedream 5.0 Pro Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A futuristic cityscape at sunset with flying cars and towering skyscrapers",
            { model: "byteplus/dola-seedream-5-0-pro-260628" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 2: Generate an image with Seedream 5.0 Lite (Cost-Effective)

To generate an image using the cost-effective Seedream 5.0 Lite model, simply change the model parameter:

puter.ai.txt2img(
    "A magical forest with glowing mushrooms and mystical creatures",
    { model: "byteplus/seedream-5-0-lite-260128" }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Seedream 5.0 Lite Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A magical forest with glowing mushrooms and mystical creatures",
            { model: "byteplus/seedream-5-0-lite-260128" }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 3: Advanced Generation with Custom Parameters

This example sets a custom aspect ratio with the ratio option and the output tier with quality. Seedream 5.0 Pro accepts the 1k, 1.5k, and 2k tiers, and the 2K tier is billed at a higher rate than the other two:

puter.ai.txt2img(
    "A majestic dragon perched on a mountain peak, fantasy art style, detailed scales, dramatic lighting",
    {
        model: "byteplus/dola-seedream-5-0-pro-260628",
        ratio: { w: 16, h: 9 }, // Widescreen output
        quality: "2k",
    }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Advanced Seedream 5.0 Pro Image 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: "byteplus/dola-seedream-5-0-pro-260628",
                    ratio: { w: 16, h: 9 }, // Widescreen output
                    quality: "2k",
                }
            )
            .then(imageElement => {
                document.getElementById('imageContainer').innerHTML = '';
                document.getElementById('imageContainer').appendChild(imageElement);
            });
        }
    </script>
</body>
</html>

Supported ByteDance Seedream Models

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

byteplus/dola-seedream-5-0-pro-260628
byteplus/seedream-5-0-lite-260128
byteplus/seedream-4-5-251128
byteplus/seedream-4-0-250828

These models are served through BytePlus ModelArk and take ratio for the aspect ratio and quality for the output tier.



You're all set! With Puter.js, you've unlocked free access to ByteDance Seedream 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 Seedream!

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