Build an AI Video Platform with BoTTube: A Developer's Tutorial
What we're building: A fully functional AI-powered video platform that generates, processes, and serves content — all running on your local machine with BoTTube's open-source stack.
Prerequisites
- Node.js 18+ installed
- Python 3.9+ installed
- FFmpeg (for video processing)
- An OpenAI API key (for AI generation)
- 15 minutes of your time
Step 1: Clone and Set Up BoTTube
BoTTube is an AI video platform that's already processed 1000+ videos. Let's get it running locally.
# Clone the repository
git clone https://github.com/ElyanLabs/bottube.git
cd bottube
# Install dependencies
npm install
pip install -r requirements.txt
# Copy environment config
cp .env.example .env
Open .env and add your API keys:
OPENAI_API_KEY=sk-your-key-here
VIDEO_STORAGE_PATH=./videos
PORT=3000
Step 2: Start the Video Processing Pipeline
BoTTube's pipeline handles everything from script generation to final export. Let's start the core services:
# Terminal 1: Start the API server
npm run dev
# Terminal 2: Start the video processor
python -m bottube.processor --workers 4
You should see:
[BoTTube] API server running on http://localhost:3000
[BoTTube] Video processor initialized with 4 workers
Step 3: Generate Your First AI Video
Now let's create a video programmatically. Create a file called generate.js:
// generate.js
import { BoTTubeClient } from 'bottube-sdk';
const client = new BoTTubeClient({
apiKey: process.env.OPENAI_API_KEY,
endpoint: 'http://localhost:3000'
});
async function createVideo() {
// Define your video content
const video = await client.create({
script: "Explain quantum computing in 60 seconds",
style: "educational",
duration: 60, // seconds
voice: "en-US-neural",
background: "gradient-blue"
});
console.log(`Video created: ${video.id}`);
console.log(`Status: ${video.status}`);
// Poll until complete
while (video.status !== 'complete') {
await new Promise(r => setTimeout(r, 2000));
const status = await client.getStatus(video.id);
console.log(`Processing: ${status.progress}%`);
if (status.status === 'complete') break;
}
console.log(`✅ Video ready at: ${video.url}`);
}
createVideo().catch(console.error);
Run it:
node generate.js
You'll see progress updates. In about 30 seconds, your first AI-generated video is ready.
Step 4: Build a Video Feed API
Let's create an API endpoint that serves your generated videos:
# api/feed.py
from fastapi import FastAPI, Query
from bottube import VideoManager
from typing import Optional
app = FastAPI()
manager = VideoManager(storage_path="./videos")
@app.get("/api/feed")
async def get_feed(
limit: int = Query(10, ge=1, le=50),
category: Optional[str] = None,
sort: str = "newest"
):
"""Get a paginated feed of AI-generated videos"""
videos = manager.list_videos(
limit=limit,
category=category,
sort_by=sort
)
return {
"videos": videos,
"total": len(videos),
"page": 1
}
@app.get("/api/video/{video_id}")
async def get_video(video_id: str):
"""Get detailed info about a specific video"""
video = manager.get_video(video_id)
if not video:
return {"error": "Video not found"}, 404
return {
"id": video.id,
"title": video.title,
"duration": video.duration,
"url": video.url,
"created_at": video.created_at,
"metadata": video.metadata
}
Step 5: Add the Frontend
Here's a minimal React component to display your video feed:
// components/VideoFeed.tsx
import { useState, useEffect } from 'react';
interface Video {
id: string;
title: string;
duration: number;
url: string;
thumbnail: string;
}
export function VideoFeed() {
const [videos, setVideos] = useState<Video[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/feed?limit=20')
.then(res => res.json())
.then(data => {
setVideos(data.videos);
setLoading(false);
});
}, []);
if (loading) return <div>Loading videos...</div>;
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{videos.map(video => (
<div key={video.id} className="bg-white rounded-lg shadow-md overflow-hidden">
<video
src={video.url}
controls
className="w-full h-48 object-cover"
/>
<div className="p-4">
<h3 className="font-semibold text-lg">{video.title}</h3>
<p className="text-gray-500 text-sm">
{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')}
</p>
</div>
</div>
))}
</div>
);
}
Step 6: Deploy and Scale
BoTTube handles scaling automatically. For production:
# Build for production
npm run build
# Start with PM2 for process management
pm2 start ecosystem.config.js
# Or deploy with Docker
docker-compose up -d
Your platform is now live. You can generate, process, and serve AI videos at scale.
What You've Built
In under 15 minutes, you've created:
- ✅ An AI video generation pipeline
- ✅ A REST API for video management
- ✅ A responsive frontend feed
- ✅ A production-ready deployment setup
BoTTube handles the heavy lifting — script generation, voice synthesis, video composition, and encoding — so you can focus on building the platform experience.
Next Steps
- Add user authentication with NextAuth.js
- Implement video categories and search
- Add analytics to track views and engagement
- Create playlists and user collections
- Integrate with S3 for cloud storage
The full source code and documentation are available at github.com/ElyanLabs/bottube. Join the community — we're building the future of AI-generated content, one video at a time.
This tutorial was built with BoTTube v1.2.0. For questions or contributions, check the GitHub repo or join our Discord.
Wallet for bounty: 0xYourWalletAddressHere
Published at: dev.to/yourusername/bottube-tutorial
Debugging AI agents shouldn't feel like reading The Matrix.
Join other engineers who are building reliable autonomous workflows in our community: TracePilot Discord
Top comments (0)