> ## Documentation Index
> Fetch the complete documentation index at: https://docs.videodb.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Text to Video

> Create video storyboards and content from text descriptions

<a href="https://colab.research.google.com/github/video-db/videodb-cookbook/blob/main/examples/GenAI_Storyboard.ipynb" target="_blank">
  <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab" noZoom />
</a>

## Overview

Creating video storyboards for app user flows is traditionally a laborious process involving scriptwriting, recording voiceovers, designing frames, and editing them together.

**VideoDB** automates this entire pipeline.

In this tutorial, we will build a **Storyboard Generator Tool**.

1. **Input:** You provide an app name and a list of user steps.
2. **Process:** VideoDB's AI agents generate:
   * Step-by-step narration scripts (Text Gen)
   * Professional voiceovers (Voice Gen)
   * Concept art for each screen (Image Gen)
3. **Output:** A fully compiled video walkthrough with visual overlays and synced audio.

No external tools or complex integrations required.

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/de-5Y8xKp3Y" title="Generate Automated Video Outputs with Text Prompts" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Setup

### Installing VideoDB

<CodeGroup>
  ```python Python theme={null}
  !pip install videodb
  ```

  ```javascript Node.js theme={null}
  npm install videodb
  ```
</CodeGroup>

### API Keys

<Note>
  You only need your VideoDB API Key. Get your API key from [VideoDB Console](https://console.videodb.io). Free for first 50 uploads, no credit card required.
</Note>

## Implementation

### Step 1: Connect to VideoDB

Connect to VideoDB using your API key to establish a session.

<CodeGroup>
  ```python Python theme={null}
  import videodb

  # Set your API key
  api_key = "your_api_key"

  # Connect to VideoDB
  conn = videodb.connect(api_key=api_key)
  coll = conn.get_collection()
  ```

  ```javascript Node.js theme={null}
  import { connect } from 'videodb';

  const conn = await connect({ apiKey: process.env.VIDEO_DB_API_KEY });
  const coll = await conn.getCollection();
  ```
</CodeGroup>

### Step 2: Set up the primary text inputs

While building an app, these input fields will be exposed to your users and this input will then become the foundation for the rest of this workflow.

For the purpose of this tutorial, we are using the sample use case of a user requesting a storyboard for their meditation app via the storyboarding tool that we're building.

<CodeGroup>
  ```python Python theme={null}
  # Define Your App Concept
  app_description = "A meditation app for busy people with anxiety."

  # Define the User Flow
  raw_steps = [
      "Set up profile",
      "Select preference for theme & music",
      "Set meditation session timing",
      "Start the session"
  ]
  ```

  ```javascript Node.js theme={null}
  // Define Your App Concept
  const appDescription = "A meditation app for busy people with anxiety.";

  // Define the User Flow
  const rawSteps = [
      "Set up profile",
      "Select preference for theme & music",
      "Set meditation session timing",
      "Start the session"
  ];
  ```
</CodeGroup>

### 🕹️ Step 3: Generate Assets

We will now iterate through each step of the user journey. For every step, we use VideoDB to:

1. **Write a Script:** Generate a short, conversational script based on the step name.
2. **Create Visuals:** Generate a sketch-style illustration of the user action.
3. **Synthesize Voice:** Turn the script into audio.

We store the resulting Asset IDs directly, skipping any manual file management.

<CodeGroup>
  ```python Python theme={null}
  import json

  storyboard_assets = []

  for i, step_name in enumerate(raw_steps):
      # 1. Generate Script using Text Generation
      # We ask for a short sentence.
      script_prompt = f"""
      Write a single conversational sentence for a video narration explaining the step: '{step_name}'
      for an app described as: '{app_description}'.
      Keep it encouraging and brief.
      """

      # Generate text
      text_response = coll.generate_text(prompt=script_prompt, model_name="pro")
      script_text = text_response["output"]

      # 2. Generate Voiceover
      audio_asset = coll.generate_voice(
          text=script_text,
          voice_name="Aria")

      # 3. Generate Image
      # We create a consistent art style prompt
      image_prompt = f"""
      A minimal, stippling black ballpoint pen illustration of a user interface or scene representing: '{step_name}'.
      Context: {app_description}.
      Clean white background, professional storyboard style.
      """

      image_asset = coll.generate_image(
          prompt=image_prompt)

      # Store everything we need for the timeline
      storyboard_assets.append({
          "step_name": step_name,
          "audio_id": audio_asset.id,
          "image_id": image_asset.id,
          "duration": float(audio_asset.length)
      })
  ```

  ```javascript Node.js theme={null}
  const storyboardAssets = [];

  for (const stepName of rawSteps) {
      // 1. Generate Script using Text Generation
      const scriptPrompt = `
      Write a single conversational sentence for a video narration explaining the step: '${stepName}'
      for an app described as: '${appDescription}'.
      Keep it encouraging and brief.
      `;

      // Generate text
      const textResponse = await coll.generateText(
          scriptPrompt,
          "pro"
      );
      const scriptText = textResponse.output;

      // 2. Generate Voiceover
      const audioAsset = await coll.generateVoice(
          scriptText,
          "Aria"
      );

      // 3. Generate Image
      const imagePrompt = `
      A minimal, stippling black ballpoint pen illustration of a user interface or scene representing: '${stepName}'.
      Context: ${appDescription}.
      Clean white background, professional storyboard style.
      `;

      const imageAsset = await coll.generateImage(imagePrompt);

      // Store everything we need for the timeline
      storyboardAssets.push({
          stepName,
          audioId: audioAsset.id,
          imageId: imageAsset.id,
          duration: parseFloat(audioAsset.length)
      });
  }
  ```
</CodeGroup>

### Step 4: Create the Timeline

Now we assemble the video. We will use:

* **Background:** A generic looping video to serve as a canvas.
* **Image Track:** The AI-generated sketches overlayed on the center.
* **Audio Track:** The generated voiceovers sequenced one after another.
* **Text Track:** A label at the bottom showing the current step name.

### Background Track

We use a stock video as a dynamic background

<CodeGroup>
  ```python Python theme={null}
  coll = conn.get_collection()
  base_vid = coll.upload(url="https://www.youtube.com/watch?v=4dW1ybhA5bM")
  ```

  ```javascript Node.js theme={null}
  const coll = await conn.getCollection();
  const baseVid = await coll.uploadURL({
      url: "https://www.youtube.com/watch?v=4dW1ybhA5bM"
  });
  ```
</CodeGroup>

<CodeGroup>
  ```python Python theme={null}
  from videodb.editor import (
      Timeline, Track, Clip,
      VideoAsset, ImageAsset, AudioAsset, TextAsset,
      Font, Background, Alignment, HorizontalAlignment, VerticalAlignment, Position)

  # Initialize Timeline
  timeline = Timeline(conn)

  # Calculate total duration
  total_duration = sum(item['duration'] for item in storyboard_assets)

  # Create main track loop
  main_track = Track()
  video_asset = VideoAsset(id=base_vid.id)
  video_clip = Clip(asset=video_asset, duration=total_duration)
  main_track.add_clip(0, video_clip)
  timeline.add_track(main_track)

  # Setup Overlay Tracks
  image_track = Track()
  audio_track = Track()
  text_track = Track()

  current_time = 0

  # Assemble the Sequence
  for asset in storyboard_assets:
      duration = asset['duration']

      # A. Visual: The AI Sketch (Centered)
      image_clip = Clip(
          asset=ImageAsset(id=asset['image_id']),
          duration=duration,
          position=Position.center,)
      image_track.add_clip(current_time, image_clip)

      # B. Audio: The Voiceover
      audio_clip = Clip(
          asset=AudioAsset(id=asset['audio_id']),
          duration=duration)
      audio_track.add_clip(current_time, audio_clip)

      # C. Text: The Step Name Label
      text_clip = Clip(
          asset=TextAsset(
              text=asset['step_name'],
              font=Font(family="League Spartan", size=36, color="#FFFAFA"),
              background=Background(color="#FF4500", border_width=10, opacity=1.0),
              alignment=Alignment(horizontal=HorizontalAlignment.center, vertical=VerticalAlignment.bottom),),
          duration=duration,
          position=Position.bottom)
      text_track.add_clip(current_time, text_clip)

      # Advance the seeker
      current_time += duration

  # Add all tracks to timeline
  timeline.add_track(image_track)
  timeline.add_track(audio_track)
  timeline.add_track(text_track)
  ```

  ```javascript Node.js theme={null}
  import {
    EditorTimeline, Track, Clip,
    EditorVideoAsset, EditorImageAsset, EditorAudioAsset, EditorTextAsset,
    Font, Background, Alignment, HorizontalAlignment, VerticalAlignment, Position
  } from 'videodb';

  // Initialize Timeline
  const timeline = new EditorTimeline(conn);

  // Calculate total duration
  const totalDuration = storyboardAssets.reduce((sum, item) => sum + item.duration, 0);

  // Create main track loop
  const mainTrack = new Track();
  const videoAsset = new EditorVideoAsset({ id: baseVid.id });
  const videoClip = new Clip({ asset: videoAsset, duration: totalDuration });
  mainTrack.addClip(0, videoClip);
  timeline.addTrack(mainTrack);

  // Setup Overlay Tracks
  const imageTrack = new Track();
  const audioTrack = new Track();
  const textTrack = new Track();

  let currentTime = 0;

  // Assemble the Sequence
  for (const asset of storyboardAssets) {
      const duration = asset.duration;

      // A. Visual: The AI Sketch (Centered)
      const imageClip = new Clip({
          asset: new EditorImageAsset({ id: asset.imageId }),
          duration,
          position: Position.center
      });
      imageTrack.addClip(currentTime, imageClip);

      // B. Audio: The Voiceover
      const audioClip = new Clip({
          asset: new EditorAudioAsset({ id: asset.audioId }),
          duration
      });
      audioTrack.addClip(currentTime, audioClip);

      // C. Text: The Step Name Label
      const textClip = new Clip({
          asset: new EditorTextAsset({
              text: asset.stepName,
              font: new Font({
                  family: "League Spartan",
                  size: 36,
                  color: "#FFFAFA"
              }),
              background: new Background({
                  color: "#FF4500",
                  borderWidth: 10,
                  opacity: 1.0
              }),
              alignment: new Alignment({
                  horizontal: HorizontalAlignment.center,
                  vertical: VerticalAlignment.bottom
              })
          }),
          duration,
          position: Position.bottom
      });
      textTrack.addClip(currentTime, textClip);

      // Advance the seeker
      currentTime += duration;
  }

  // Add all tracks to timeline
  timeline.addTrack(imageTrack);
  timeline.addTrack(audioTrack);
  timeline.addTrack(textTrack);
  ```
</CodeGroup>

### Step 5: Watch the Storyboard

Generate the stream and view your automated video creation.

<CodeGroup>
  ```python Python theme={null}
  from videodb import play_stream

  stream_url = timeline.generate_stream()
  play_stream(stream_url)
  ```

  ```javascript Node.js theme={null}
  const streamUrl = await timeline.generateStream();
  console.log(streamUrl);
  ```
</CodeGroup>

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/20iako1LzGo" title="Storyboard Video Output" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

### Conclusion

You have successfully built a **Generative AI Storyboard Tool** in under 50 lines of logic.

You can now expand this to generate marketing videos, tutorials, or dynamic social media content instantly.

<Card icon="notebook" title="Explore Full Notebook" href="https://colab.research.google.com/github/video-db/videodb-cookbook/blob/main/examples/GenAI_Storyboard.ipynb">
  Open the complete implementation in Google Colab with all code examples.
</Card>

## Related Tutorials

<CardGroup cols={2}>
  <Card title="Faceless Video Creator" icon="video" href="/examples-and-tutorials/content-factory/faceless-video-creator">
    Generate complete videos from scripts
  </Card>

  <Card title="AI Ad Films" icon="megaphone" href="/examples-and-tutorials/content-factory/ai-ad-films">
    Auto-generate product ads from text descriptions
  </Card>
</CardGroup>