Free, Unlimited Vidu API
On this page
This tutorial shows how to use Puter.js to add Vidu video generation to your app for free, without needing API keys or backend infrastructure. With Puter.js, you gain immediate access to Vidu Q3 and Vidu Q3 Turbo for 1080p video generation with audio generated in the same pass, callable 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' usage, 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>
This is all you need to start adding Vidu video generation to your application.
Example 1: Generate a video with Vidu Q3
Vidu Q3 produces up to 16 seconds of video at up to 1080p and 24fps, with dialogue, sound effects, and music generated in the same pass as the visuals. It also detects scene boundaries, so one generation can span several camera angles with transitions between them. To generate a video using Vidu Q3, use the puter.ai.txt2vid() function:
puter.ai.txt2vid(
"A majestic dragon flying through clouds at sunset, cinematic lighting, 4k quality",
{ model: "vidu/vidu-q3" }
)
.then(videoElement => {
document.body.appendChild(videoElement);
videoElement.addEventListener('loadeddata', () => videoElement.play().catch(() => {}));
})
Full code example:
<html>
<body>
<h1>Vidu Q3 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
<html>
<body>
<h1>Vidu Q3 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<html>
<body>
<h1>Vidu Q3 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
puter.ai.txt2vid(
"A majestic dragon flying through clouds at sunset, cinematic lighting, 4k quality",
{ model: "vidu/vidu-q3" }
)
.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>
Example 2: Faster generation with Vidu Q3 Turbo
Vidu Q3 Turbo is the speed-optimized variant of Q3. It keeps the same 16-second, 1080p ceiling and optional synchronized audio, and returns results faster in exchange for some visual fidelity. To use it, change the model parameter:
<html>
<body>
<h1>Vidu Q3 Turbo 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
<html>
<body>
<h1>Vidu Q3 Turbo 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<html>
<body>
<h1>Vidu Q3 Turbo 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
puter.ai.txt2vid(
"A bustling Tokyo street at night with neon signs reflecting on wet pavement",
{ model: "vidu/vidu-q3-turbo" }
)
.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>
Available Models
Puter.js supports the following Vidu models for use with the puter.ai.txt2vid() function:
vidu/vidu-q3-turbo
vidu/vidu-q3
vidu/vidu-q1
You're all set! With Puter.js, you can add Vidu's powerful video generation to your app for free. Ship AI-powered video generation features without managing API keys, running backend servers, or paying for infrastructure—your users cover their own usage via the User-Pays model.
Related
- Free, Unlimited Veo API
- Free, Unlimited Seedance API
- Free, Unlimited Kling AI API
- Free, Unlimited PixVerse API
- Free, Unlimited Wan AI API
- Free, Unlimited FLUX AI API
- Free, Unlimited GPT Image API
- Free, Unlimited Stable Diffusion API
- Free, Unlimited Image Generation API
- Free, Unlimited OpenAI API
- Free, Unlimited Claude API
- Free, Unlimited AI API
Ship a Full-Stack App with One Prompt
Build an AI chat app using Puter.js
Coding manually? see the guide