Build Your Own App - AI Reel Generator Interactive Slides
Slide 1 of 10
Introduction

Build Your Own App - AI Reel Generator 🎓

Welcome to the future of software development!

In this 2-hour interactive workshop, you will learn how to transition from syntax-heavy coding to orchestrating intelligent AI agents using natural language.

💡 Key Takeaway: Learn the core patterns of prompt engineering, API orchestration, and vibe coding to build fully functional web apps in minutes.

Workshop Agenda

  • 01. Welcome to Vibe Coding
  • 02. API Orchestration Analogy
  • 03. Prompting with COSTAR
  • 04. Prompt Evaluator Sandbox
  • 05. Folder Anatomy of our App
  • 06. Interactive Assessment Quiz
  • 07. Wrap Up & Homework
Module 1

Welcome to the Vibe Coding Era 🚀

Software development is shifting. Instead of writing code line-by-line, we are now orchestrating autonomous AI agents to build entire functional apps from scratch.

Classical Coding

  • Spending hours memorizing syntax
  • Finding a missing bracket or semicolon
  • Slow, incremental development cycles
  • Focus on writing code logic

Vibe Coding (Orchestrating)

  • Communicating in descriptive prompts
  • Focusing on UI, system flow, & UX
  • Rapid prototyping in minutes
  • Directing AI agents (e.g. Antigravity)

💡 Learning to code is no longer about syntax; it is about system design and describing what you want clearly.

Module 2

API Orchestration: The Restaurant Analogy 🍽️

Click each node on the map to see how our app uses different APIs to build the video:

The Customer (Frontend App) Looks at menu, orders video generation
The Waiter (FastAPI Server) Sends orders to LLM, Speech, and Assets
The Chef (Google Gemini 1.5 Flash) Brainstorms script segments & keywords
The Plater (FFmpeg Video Editor) Merges clips, styles captions, and mixes audio

The Customer (Frontend App)

This is the glassmorphic webpage where the user enters script themes, selects visual layouts, and clicks "Generate". It acts as the customer placing the order. It has no video compiling capacity; it just displays the gorgeous preview output.

Module 3

Prompt Engineering & The COSTAR Framework 📝

A prompt is how we program an AI. The COSTAR framework ensures your prompts provide clear, structured instructions so the AI builds exactly what you need. Hover over each card below to see the details!

C
Context
Provide background info. Sets the AI's role or expert persona (e.g., "You are a senior developer").
O
Objective
Define the exact task you want the AI to perform and its target output goals.
S
Style
Specify the coding style, layout guides, UI patterns, or structural constraints.
T
Tone
Establish the emotional tone or communication style (e.g., professional, enthusiastic).
A
Audience
Identify the target users or consumers of the output (e.g., coding students, general public).
R
Response
Define output structure and format guidelines (e.g., strict JSON schema, bullet lists).

Bad Example (Vague)

"Write a python script to crop videos and overlay subtitles."

  • ❌ No Context [C]: AI doesn't know who it is or why it's coding.
  • ❌ No Objective [O]: Missing resolution parameters (9:16 vs 16:9).
  • ❌ No Response Format [R]: Might write code, explanations, or print mock statements.
  • ❌ Prone to bugs: High chance of code hallucination.

Good Example (COSTAR)

"[C] You are a senior video developer. [O] Write a Python script using FFmpeg to crop 16:9 landscape videos into 9:16 portrait. [S] Use clean, async code. [T] Direct instructions. [A] Students learning AI. [R] Output code inside a JSON schema: {'files': [{'name': str, 'code': str}]}."

  • ✅ Context [C]: Establishes the agent's expert role ("senior video developer").
  • ✅ Objective [O] & Style [S]: Specifies constraints (FFmpeg) and dimensions (16:9 to 9:16).
  • ✅ Response [R]: Demands structured JSON so backends can parse it programmatically.
Module 3 (Practice)

Interactive Prompt Evaluator (COSTAR) ✍️

Write or edit the agent prompt below. Press Evaluate Prompt to see if it satisfies the COSTAR framework guidelines!

COSTAR Score: 40%
Context (e.g., "You are...")
Objective (Clear task)
Style/Aesthetics (Visual styles)
Response format (e.g. JSON)
💡 Tip: Add context (e.g., "You are a senior python developer") and define a structured output format (like Pydantic/JSON models) to get better results.
Module 4

Anatomy of our Video App 📁

How the application files distribute the system roles. Click each layer to reveal details:

index.html & style.css The Skin (UI, visual themes, responsive grids)
app.js The Nerves (clicks, canvas player animations)
backend/main.py The Heart (FastAPI orchestrator & mounts)
Dockerfile The Shipping Container (FFmpeg & Python runtime)

Click a file directory to explore

Select one of the file layers on the left to learn its purpose, tech constraints, and role in the video compilation pipeline.

Module 4 (Deep Dive)

Core Libraries & Technology Stack 📚

Click any library card to flip it and explore its core purpose and system role!

FastAPI & Uvicorn
Web Routing
FastAPI & Uvicorn The API Router

Receives script generation inputs, serves static files, coordinates requests, and exposes server endpoints.

google-generativeai
Gemini SDK
google-generativeai Creative Brain

Connects to Gemini 1.5 Flash. Segments scripts into scenes and visual stock keywords using structured JSON.

Pydantic
Data Validation
Pydantic The Data Guard

Enforces strict schema models on LLM outputs. Guarantees type safety and prevents JSON parsing crashes.

edge-tts
Voice Synthesis
edge-tts The Vocal Cord

Communicates with Microsoft Edge speech services to generate realistic, free narration voiceover tracks.

faster-whisper
Word Alignment
faster-whisper The Sound Ear

Analyzes narration audio files to return precise millisecond start/end timestamps for kinetic caption highlight syncing.

requests
HTTP Downloads
requests Asset Fetcher

Queries Pexels stock video directory and downloads matching B-roll footage directly to backend folders.

python-dotenv
Secrets Manager
python-dotenv Key Guard

Loads credentials (like Gemini API keys) from local `.env` files into environment maps safely.

FFmpeg
Video Editing
FFmpeg The Hand Compiler

Trims clips, scales to portrait (9:16), sidechains background audio loops, and burns highlight subtitles.

Module 5

Interactive Quiz & Self-Assessment 🧠

Question 1: What is "Vibe Coding"?

Wrap Up

Your Workshop Takeaways & Tools 🏆

Congratulations! You've learned how to leverage AI orchestration, structure system prompts, and host containerized applications. Click the links below to access your guides and APIs:

Google AI Studio

Get free Gemini API Keys

Hugging Face Spaces

Host Docker apps for free

Pexels Developer API

Free portrait stock footage
🎓 Homework assignment: Create your own Hugging Face Space, copy the code files, get your own Gemini API key, and deploy a personal clone. Share the live link in the class group!
Workshop Complete

Thank You! 🎓

You are now ready to orchestrate AI agents, design structured prompts, and build application systems of your own!

Remember: the best way to master Vibe Coding is to practice. Log into Google AI Studio, grab a free API key, set up your Hugging Face Space, and start building!

View App Repository