# How to Vibe Code Your Own Elai.io (and Stop Paying for It) > AI Video Generator for Learning and Development - Site: https://elai.io - Category: AI Video Generation / Synthetic Media - Verdict: **Serious undertaking** (42/100 vibecodeable) - Estimated effort: 6+ weeks of full-time development ## Verdict Build a simplified personal video assembler script or keep paying, because orchestrating a video rendering pipeline with custom AI avatars and precise lip-syncing requires heavy backend engineering. While you can spin up a Next.js frontend with Tailwind and talk to GPT and ElevenLabs APIs, building a real synthetic media platform hits a brick wall at the rendering stage. Assembling layered video frames, aligning audio phonemes with avatar visemes, and managing asynchronous job queues will consume weeks of frustrating debugging with FFmpeg and server timeouts. ### What you can't replicate - Proprietary 80+ high-fidelity studio avatar library and custom selfie avatar training - Enterprise LMS SCORM/xAPI export engines - SOC 2 compliance and deep corporate security guarantees ## What it does Create high-impact, professional video content featuring digital human avatars from text prompts, URLs, or PowerPoint presentations. ### Core features - Text-to-Video and AI Storyboard generation - Avatar video rendering with lip-sync synchronization - URL-to-Video and PPTX-to-Video conversion pipelines - Multilingual voice synthesis and voice cloning (75+ languages) - Interactive learning modules (branching scenarios and quizzes) - Screen recording and asset library (music, stickers, animations) - Video sharing, embedding, and public analytics ## The business ### Pricing - Free: $0/mo - Creator: $29/mo - Team: $125/mo - Enterprise: Custom ### Funding $155K raised. - Seed / Accelerator Investors: Creative Destruction Lab, Google Accelerator, Concordia Design Accelerator, L'Oreal Beauty Tech Atelier, ISE Group Founded 2021. Team size: ~12. ## The hard parts - Heavy asynchronous video rendering pipeline combining avatars, audio, and slides into MP4 - Complex neural face generation and precise phoneme-to-viseme lip-sync alignment - Handling multiple concurrent third-party AI APIs (TTS, LLMs, translation) with robust error retries - Parsing and rendering arbitrary URLs and PowerPoint (PPTX) slide decks into structured video scenes ## How to vibe code Elai.io ### Prerequisites - Node.js (free): Required runtime for running the Next.js full-stack application and background worker tasks. - GitHub (free): Version control and repository hosting for deployment pipelines. - OpenAI API Key (pay-as-you-go): Powers script generation and AI storyboard content creation. - ElevenLabs API Key (pay-as-you-go): Provides text-to-speech audio rendering across multiple languages. ### Recommended AI tools - Claude Code: Agentic terminal coding assistant that can scaffold multi-file React components, API routes, and background job handlers. - Cursor: AI-native code editor ideal for reviewing diffs and refining complex canvas and editor layouts. ### Stack - Frontend: Next.js with Tailwind CSS and shadcn/ui - Backend: Next.js API routes with Inngest for background rendering queues - Database: Turso (SQLite at the edge for storing projects, slides, and script data) - Auth: better-auth - Payments: none - Other: Cloudflare R2 for storing generated video and slide assets, FFmpeg via Docker/Fly.io for video composition, OpenAI API for script generation, ElevenLabs API for voice synthesis ### Hosting - Vercel (Hosting the Next.js frontend and lightweight serverless API routes.): $0/mo (Hobby Tier) - Fly.io (Running Docker containers equipped with FFmpeg and Python tooling for video assembly workers.): ~$5/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, shadcn/ui, and configure Turso with better-auth for user sessions and project storage. ``` Scaffold a new Next.js 16 project using TypeScript, Tailwind CSS, and App Router. Set up better-auth with email/password authentication backed by a Turso SQLite database. Create database tables for 'projects' (id, user_id, title, aspect_ratio, created_at) and 'slides' (id, project_id, slide_order, script_text, avatar_id, background_url). Provide clean, modular code structures under src/db and src/app/api/auth. ``` 2. **Slide & Script Editor UI** — Build a multi-slide video editor dashboard allowing users to write scripts, select aspect ratios, choose avatars, and configure slide backgrounds. ``` Build a responsive video editor dashboard in Next.js using shadcn/ui. The left sidebar lists video slides with drag-and-drop ordering. The center pane displays a live canvas preview of the selected slide (supporting 16:9, 9:16, 1:1 aspect ratios). The right pane contains form controls to input script text, pick an AI avatar from a mock library of 80+ avatars, and select a voice from ElevenLabs. Ensure all state updates persist immediately to local React state and sync with the backend. ``` 3. **AI Script & Storyboard Generator** — Integrate the OpenAI API to automatically generate video scripts and slide outlines from a simple user prompt or topic. ``` Implement an AI Storyboard feature using the OpenAI API. Create a modal dialog where users input a topic or prompt. Send a structured prompt to OpenAI requesting a multi-slide breakdown with title, bullet points, and narration script for each slide. Parse the JSON response and automatically populate the project's slides table, updating the frontend editor view dynamically. ``` 4. **URL-to-Video & PPTX Parser Pipeline** — Create backend ingestion services that fetch external blog URLs or parse uploaded PowerPoint presentations to seed slide scripts. ``` Implement an API route that accepts a blog URL or a parsed PPTX file upload. Use Cheerio or an extraction utility to pull main article headings and text paragraphs from the URL, or parse slide text using an office parser library. Group the extracted text into sequential presentation slides and return them formatted for the video editor canvas. Handle network failures and malformed HTML gracefully. ``` 5. **Audio Synthesis & Video Rendering Worker** — Set up asynchronous background processing using Inngest or Fly.io worker queues to synthesize voiceover audio via ElevenLabs and compile video frames using FFmpeg. ``` Implement a robust video rendering pipeline. When the user clicks 'Render', dispatch an asynchronous background job using Inngest. The job must: 1. Call the ElevenLabs API with the script text to generate an MP3 audio file. 2. Fetch the duration of the audio file. 3. Spawn an FFmpeg process in a container to combine a static avatar image, background color/media, and the synthesized audio track into an MP4 video file. 4. Upload the resulting MP4 to Cloudflare R2 storage and update the project status in Turso to 'completed'. ``` 6. **Video Player, Sharing, and Interactivity Dashboard** — Build the final viewing page with a video player, public sharing links, and basic interactive quiz elements. ``` Create a public video viewing page accessible via a unique UUID slug (e.g., /watch/[id]). Embed an HTML5 video player configured to stream the rendered MP4 from Cloudflare R2. Below the video, add an interactive quiz component supporting multiple-choice questions configured during the video editing phase. Track view analytics (total views and watch events) in the database when the page mounts. ``` ### Cost vs paying **Starting costs (one-time):** - Domain name (optional): $12/yr - Total: ~$12 one-time **Ongoing costs (monthly):** - Vercel / Fly.io Hosting: ~$5/mo - ElevenLabs & OpenAI API Usage: ~$10/mo - Total: ~$15/mo - Paying for the SaaS instead: $29/mo (Creator Plan) - Build time: 45-60 hours - AI tool credits: $20/mo (Claude Pro / Cursor) - Break-even: N/A (Built for learning/fun) ## Sources - [Elai.io Official Website](https://elai.io) - [PitchBook Company Profile for Elai.io](https://pitchbook.com) - [GetLatka - Elai Revenue & Growth Data](https://getlatka.com) - [Forge Global - Elai Corporate Profile](https://forgeglobal.com)