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 Wan AI API

On this page

This tutorial shows how to use Puter.js for generating videos with Wan AI models for free, without needing API keys or backend infrastructure. With Puter.js, you gain immediate access to Wan AI's powerful models including Wan 2.7 Text-to-Video for creating videos from text prompts, callable directly from client-side JavaScript.

Puter pioneered the "User-Pays" model, allowing you to integrate advanced AI video generation into your apps while users handle their individual usage costs. This approach lets you deliver video 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 videos with Wan AI models in your application.

Example: Generate video from text with Wan 2.7 Text-to-Video

Wan 2.7 Text-to-Video enables powerful video generation from text descriptions. To generate a video from a text prompt, use the puter.ai.txt2vid() function:

puter.ai.txt2vid(
    "A fox sprinting through a snow-covered forest at dusk",
    { model: "wan-ai/wan2.7-t2v" }
)
.then(videoElement => {
    document.body.appendChild(videoElement);
    videoElement.addEventListener('loadeddata', () => videoElement.play().catch(() => {}));
})

Full code example:

<html>
<body>
    <h1>Wan 2.7 Text-to-Video Generation</h1>
    <div id="status"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Start timer
        const status = document.getElementById('status');
        const startTime = Date.now();
        const timerInterval = setInterval(() => {
            const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Loading (${elapsed} seconds)`;
        }, 100);

        // Generate video from text
Show 20 more lines...
<html>
<body>
    <h1>Wan 2.7 Text-to-Video Generation</h1>
    <div id="status"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Start timer
        const status = document.getElementById('status');
        const startTime = Date.now();
        const timerInterval = setInterval(() => {
            const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Loading (${elapsed} seconds)`;
        }, 100);

        // Generate video from text
        puter.ai.txt2vid(
            "A fox sprinting through a snow-covered forest at dusk",
            { model: "wan-ai/wan2.7-t2v" }
        )
        .then(videoElement => {
            document.body.appendChild(videoElement);
            videoElement.addEventListener('loadeddata', () => videoElement.play().catch(() => {}));

            // Clear timer and show finished status
            clearInterval(timerInterval);
            const totalTime = ((Date.now() - startTime) / 1000).toFixed(1);
            status.textContent = `Finished (${totalTime} seconds)`;
        }).catch(error => {
            console.error(error);
            clearInterval(timerInterval);
            status.textContent = JSON.stringify(error);
        })
    </script>
</body>
</html>
Collapse code

Available Models

The following Wan AI models are supported by Puter.js:

wan-ai/wan2.7-t2v



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

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