Documentation

Create an AI Video Generator in 30 Minutes

Build a tool that generates videos from text prompts using Google Veo. From idea to video in seconds.

Build a tool that generates videos from text prompts using Google Veo. From idea to video in seconds.

What You'll Build

A web app that takes a text prompt and generates a professional video using Google Veo AI.

Why This Is Powerful

  • Generate videos without editing skills
  • Perfect for social media content
  • Automated video creation pipeline
  • Production-ready quality

Prerequisites

  • Claude Code or Cursor installed
  • SkillBoss account
  • React/Next.js knowledge

Architecture

Input: Text prompt + style preferences Skills: google/veo-2, openai/gpt-4o Output: MP4 video file

Step 1: Setup Project

Create Next.js app with video handling:

npx create-next-app@latest video-gen --typescript --tailwind
cd video-gen
npm install openai

Step 2: Create Video Generation API

Build endpoint that calls Veo via SkillBoss:

// app/api/generate-video/route.ts
import { OpenAI } from 'openai'

const client = new OpenAI({
  baseURL: 'https://api.skillboss.co/v1',
  apiKey: process.env.SKILLBOSS_API_KEY,
})

export async function POST(req: Request) {
  const { prompt, style } = await req.json()

  // Enhance prompt with GPT-4o
  const enhanced = await client.chat.completions.create({
    model: 'openai/gpt-4o',
    messages: [{
      role: 'system',
      content: 'Convert this into a detailed video generation prompt. Include camera angles, lighting, mood.'
    }, {
      role: 'user',
      content: prompt
    }],
  })

  const videoPrompt = enhanced.choices[0].message.content

  // Generate video with Veo
  const video = await client.images.generate({
    model: 'google/veo-2',
    prompt: videoPrompt,
    n: 1,
    size: '1920x1080',
  })

  return Response.json({
    videoUrl: video.data[0].url,
    enhancedPrompt: videoPrompt
  })
}

Step 3: Build Video UI

Create interface for prompt input and video display:

// app/page.tsx
'use client'
import { useState } from 'react'

export default function VideoGen() {
  const [prompt, setPrompt] = useState('')
  const [videoUrl, setVideoUrl] = useState('')
  const [loading, setLoading] = useState(false)

  const generate = async () => {
    setLoading(true)
    const res = await fetch('/api/generate-video', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt }),
    })
    const data = await res.json()
    setVideoUrl(data.videoUrl)
    setLoading(false)
  }

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-8">AI Video Generator</h1>

      <div className="space-y-4">
        <textarea
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Describe your video: 'A cat playing piano at sunset...'"
          className="w-full h-32 border rounded-lg p-4"
        />

        <button
          onClick={generate}
          disabled={loading}
          className="w-full bg-purple-500 text-white rounded-lg py-3 hover:bg-purple-600 disabled:opacity-50"
        >
          {loading ? 'Generating...' : 'Generate Video'}
        </button>

        {videoUrl && (
          <div className="mt-8">
            <video src={videoUrl} controls className="w-full rounded-lg shadow-lg" />
            <a
              href={videoUrl}
              download
              className="mt-4 block text-center bg-gray-200 rounded-lg py-2 hover:bg-gray-300"
            >
              Download Video
            </a>
          </div>
        )}
      </div>
    </div>
  )
}

Step 4: Deploy

Ship to production with Vercel:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

# Add SKILLBOSS_API_KEY in Vercel dashboard

Related Tutorials