How to Integrate AI Video Generation in Your App

A practical, step-by-step tutorial for developers. We'll go from signing up to having a working text-to-video feature in your application in under 15 minutes.

Step 1: Get Your API Key (2 Minutes)

Before you can do anything, you need to authenticate. Our API uses a simple Bearer Token authentication method.

  1. First, create your free Veo3Gen developer account.
  2. Navigate to your Account Dashboard.
  3. Copy your API Key. Keep it safe and secure.

Security Warning: Never expose your API key in frontend code (like a React or Vue app). All API calls should be made from a secure backend server.

Step 2: Choose Your Weapon (Code Examples)

Our REST API works with any language. Here are quick-start examples for some of the most popular backend environments.

Node.js / JavaScript (using `axios`)


import axios from 'axios';

const VEO_API_KEY = process.env.VEO_API_KEY;

async function generateVideo(prompt) {
  try {
    const response = await axios.post(
      'https://api.veo3gen.app/v1/generate',
      {
        prompt: prompt,
        model: 'veo3-quality', // or 'veo3-fast'
        aspect_ratio: '16:9'
      },
      {
        headers: {
          'Authorization': `Bearer ${VEO_API_KEY}`,
          'Content-Type': 'application/json'
        }
      }
    );
    return response.data.video_url;
  } catch (error) {
    console.error("Error generating video:", error.response.data);
    return null;
  }
}

// Example usage:
// const videoUrl = await generateVideo("A cat programming on a laptop, lo-fi animation style");
// console.log(videoUrl);

Python (using `requests`)


import requests
import os

VEO_API_KEY = os.getenv("VEO_API_KEY")
API_URL = "https://api.veo3gen.app/v1/generate"

def generate_video(prompt):
    headers = {
        "Authorization": f"Bearer {VEO_API_KEY}",
        "Content-Type": "application/json",
    }
    payload = {
        "prompt": prompt,
        "model": "veo3-quality",
        "aspect_ratio": "16:9",
    }
    try:
        response = requests.post(API_URL, headers=headers, json=payload)
        response.raise_for_status()  # Raises an HTTPError for bad responses
        return response.json().get("video_url")
    except requests.exceptions.RequestException as e:
        print(f"Error generating video: {e}")
        return None

# Example usage:
# video_url = generate_video("A photorealistic video of an eagle soaring over a mountain range.")
# print(video_url)

Step 3: Building a Simple Frontend

Now, let's create a simple frontend (e.g., using React) that allows a user to enter a prompt and see the generated video. This will communicate with a backend endpoint that you create using the code from Step 2.

Example React Component


import React, { useState } from 'react';

function VideoGenerator() {
  const [prompt, setPrompt] = useState('');
  const [videoUrl, setVideoUrl] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setVideoUrl(null);

    try {
      // This endpoint '/api/generate-video' is on YOUR server
      const response = await fetch('/api/generate-video', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt }),
      });

      if (!response.ok) {
        throw new Error('Failed to generate video');
      }

      const data = await response.json();
      setVideoUrl(data.videoUrl);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Enter a video prompt..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Generating...' : 'Generate Video'}
        </button>
      </form>

      {videoUrl && (
        <div className="mt-4">
          <video src={videoUrl} controls autoPlay muted loop />
        </div>
      )}
    </div>
  );
}

Step 4: Best Practices & Next Steps

  • Error Handling: Always wrap your API calls in try/catch blocks. The API will return descriptive error messages that you can pass to your user.
  • Asynchronous Operations: Video generation can take several seconds. For a better user experience, consider implementing a queuing system or using webhooks (available on our Pro plan) to notify your app when a video is ready, instead of making the user wait.
  • Parameter Exploration: Don't just send a prompt. Check out the full API documentation to control aspect ratio, negative prompts, seeds, and more for fine-grained control over the output.

You're Ready to Build.

You now have all the pieces to integrate a powerful, creative AI feature into your application. We can't wait to see what you create.