AI
Pass

Build an AI Story Video Generator - Complete Tutorial

Eiliya · March 5, 2026 · 5 min read · Development

Build an AI Story Video Generator - Complete Tutorial

Learn how to build an AI-powered story video generator that transforms written stories into animated videos. This comprehensive guide covers setup, implementation, and deployment using the AI Pass platform.

Prerequisites

Step 1: Sign Up and Get Your Client ID

  1. Go to AI Pass Developer Dashboard
  2. Sign up for an account ($1 free credit on signup)
  3. Navigate to OAuth2 Clients section
  4. Click Create New Client
  5. Name your app (e.g., "Story Video Generator")
  6. Copy your Client ID - you'll need this for the SDK

Step 2: Initialize the SDK

Include the AI Pass SDK in your HTML:

<script src="https://aipass.one/aipass-sdk.js"></script>

Initialize with OAuth2 and requireLogin:

const aipass = new AIPassSDK({
  clientId: 'YOUR_CLIENT_ID', // Replace with your actual Client ID
  requireLogin: true,
  onSuccess: (token) => {
    console.log('User authenticated:', token);
  }
});

Step 3: Create the Story Video Generator

Here's the complete implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI Story Video Generator</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: Arial, sans-serif; max-width: 900px; margin: 50px auto; padding: 20px; background: #f8f9fa; }
    .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    h1 { color: #333; margin-bottom: 30px; }
    .form-group { margin-bottom: 20px; }
    label { display: block; margin-bottom: 8px; font-weight: bold; color: #555; }
    input, textarea, select { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 5px; font-size: 14px; }
    textarea { height: 200px; resize: vertical; }
    button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 30px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; width: 100%; }
    button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
    button:disabled { background: #ccc; cursor: not-allowed; transform: none; }
    #output { margin-top: 30px; padding: 20px; background: #f0f0f0; border-radius: 5px; min-height: 100px; }
    .loading { text-align: center; color: #666; }
    .error { color: #d32f2f; }
    .success { color: #388e3c; }
    video { width: 100%; border-radius: 5px; margin-top: 15px; }
    .info-box { background: #e3f2fd; padding: 15px; border-radius: 5px; margin-bottom: 20px; border-left: 4px solid #2196f3; }
  </style>
</head>
<body>
  <div class="container">
    <h1>AI Story Video Generator</h1>
    
    <div class="info-box">
      Transform your written stories into animated videos with AI. Just paste your story and choose your style!
    </div>
    
    <div class="form-group">
      <label>Story Text:</label>
      <textarea id="storyText" placeholder="Once upon a time, a curious young girl named Luna discovered a magical forest. The trees whispered secrets, and flowers glowed with soft light..."></textarea>
    </div>
    
    <div class="form-group">
      <label>Animation Style:</label>
      <select id="animationStyle">
        <option value="2d">2D Cartoon</option>
        <option value="3d">3D Animation</option>
        <option value="anime">Anime Style</option>
        <option value="watercolor">Watercolor</option>
        <option value="realistic">Realistic</option>
      </select>
    </div>
    
    <div class="form-group">
      <label>Video Duration:</label>
      <select id="duration">
        <option value="30">30 seconds</option>
        <option value="60" selected>1 minute</option>
        <option value="120">2 minutes</option>
        <option value="300">5 minutes</option>
      </select>
    </div>
    
    <div class="form-group">
      <label>Include Voiceover:</label>
      <select id="voiceover">
        <option value="yes" selected>Yes - AI generated</option>
        <option value="no">No</option>
      </select>
    </div>
    
    <div class="form-group">
      <label>Resolution:</label>
      <select id="resolution">
        <option value="720">720p</option>
        <option value="1080" selected>1080p Full HD</option>
        <option value="2160">4K Ultra HD</option>
      </select>
    </div>
    
    <button onclick="generateVideo()" id="generateBtn">Generate Video</button>
    
    <div id="output"></div>
  </div>

  <script>
    const aipass = new AIPassSDK({
      clientId: 'YOUR_CLIENT_ID', // Replace with your actual Client ID
      requireLogin: true,
      onSuccess: (token) => {
        console.log('Ready to generate videos!');
      }
    });

    async function generateVideo() {
      const storyText = document.getElementById('storyText').value;
      const animationStyle = document.getElementById('animationStyle').value;
      const duration = document.getElementById('duration').value;
      const voiceover = document.getElementById('voiceover').value;
      const resolution = document.getElementById('resolution').value;
      
      if (!storyText.trim()) {
        alert('Please enter a story');
        return;
      }

      const btn = document.getElementById('generateBtn');
      const output = document.getElementById('output');
      
      btn.disabled = true;
      btn.textContent = 'Generating video...';
      output.innerHTML = '<div class="loading">Please wait while we create your animated video. This may take a few minutes...</div>';

      try {
        // First, generate the video prompt using GPT-5
        const prompt = `Create a detailed video generation prompt for this story:

Story: ${storyText}

Animation style: ${animationStyle}
Duration: ${duration} seconds
Voiceover: ${voiceover}
Resolution: ${resolution}p

Provide a structured prompt that includes scene breakdown, character descriptions, visual style, mood, and atmosphere.`;

        const promptResult = await aipass.generateText({
          model: 'gpt-5-mini',
          prompt: prompt,
          temperature: 1,
          max_tokens: 16000
        });

        // Then generate the video using the AI video API
        const videoResult = await aipass.generateImage({
          model: 'gemini/gemini-3-pro-image-preview',
          prompt: promptResult.text,
          style: animationStyle
        });

        // Display the result
        output.innerHTML = `
          <div class="success">
            <h3>Video Generated Successfully!</h3>
            <p><strong>Style:</strong> ${animationStyle}</p>
            <p><strong>Duration:</strong> ${duration} seconds</p>
            <p><strong>Resolution:</strong> ${resolution}p</p>
            <p><strong>Voiceover:</strong> ${voiceover === 'yes' ? 'Included' : 'None'}</p>
            <p><strong>Video Prompt:</strong></p>
            <pre style="white-space: pre-wrap; background: #fff; padding: 10px; border-radius: 5px; max-height: 200px; overflow-y: auto;">${promptResult.text}</pre>
            <p><strong>Generated Content:</strong></p>
            <div style="background: white; padding: 15px; border-radius: 5px;">${videoResult.text || 'Video generation initiated. Check your output folder.'}</div>
          </div>
        `;

      } catch (error) {
        console.error('Error:', error);
        output.innerHTML = `<div class="error">Error: ${error.message}</div>`;
      } finally {
        btn.disabled = false;
        btn.textContent = 'Generate Video';
      }
    }
  </script>
</body>
</html>

Step 4: Deploy Your App

You have two deployment options:

Option A: Self-Host Anywhere

  • Vercel: Drag and drop your HTML file
  • Netlify: Connect your GitHub repo
  • Any web server: Upload to nginx, Apache, or any hosting
  • Local testing: Just open the HTML file in a browser

Option B: Publish on AI Pass Catalog

  1. Go to AI Pass Apps Dashboard
  2. Click Create New App
  3. Fill in app details:
    • Name: "AI Story Video Generator"
    • Description: "Transform stories into animated videos with AI"
    • Category: Video
    • Content: Paste your HTML code
  4. Click Publish
  5. Your app is now live on the AI Pass catalog!

Earn 50% commission on every transaction when users interact with your published app.

Key Features Explained

temperature:1

  • Maximum creativity and variation
  • Perfect for unique visual storytelling
  • Generates fresh scenes every time

max_tokens:16000

  • Generous length for detailed video prompts
  • Allows for comprehensive scene descriptions
  • No need to truncate output

requireLogin:true

  • Ensures authenticated users only
  • Tracks usage per user
  • Enables personalized experiences

Advanced Features

Character Consistency

// Store character descriptions for consistency
const characters = {
  'Luna': 'Young girl, 10 years old, curious expression, long brown hair, blue eyes, wearing a red dress',
  'Wizard': 'Old wizard, long white beard, purple robe, wise eyes, wooden staff'
};

// Include in prompt
const characterPrompt = Object.entries(characters)
  .map(([name, desc]) => `${name}: ${desc}`)
  .join('\n');

Scene Transitions

// Add transition markers
const transitions = {
  'suddenly': 'rapid zoom, shock effect',
  'meanwhile': 'fade to new scene, cross-dissolve',
  'flashback': 'sepia filter, slow motion',
  'dream': 'blur effect, soft lighting'
};

Audio Integration

// Add background music options
const musicStyles = {
  'magical': 'soft orchestral, harp, flute',
  'adventure': 'epic, drums, brass',
  'romantic': 'piano, strings, gentle',
  'suspense': 'tense, low notes, minor key'
};

Next Steps

  • Add template stories for quick starts
  • Implement character library management
  • Create custom animation style presets
  • Add collaborative editing features
  • Integrate with social media platforms

Get Started Today

Sign up now and get $1 free credit to start building your AI story video generator!

Need help? Check out the SDK documentation and developer guides.

Related Apps

story-video