Explain My Tool

Inspiration

Developers often struggle to create demo videos due to the time and skills required for scripting, voiceovers, and editing. Explain My Tool was born to automate this process using AI—so developers can focus on coding while the tool handles the rest.

How We Built It

We built a serverless web app using React, TypeScript, Tailwind CSS, and Vite. Supabase powers our backend for auth, storage, and database needs. Supabase Edge Functions (written in Deno) handle:

• Script Generation via Google Gemini (with fallbacks to OpenAI/Claude)
• Voiceover creation with ElevenLabs
• Avatar Narration via Tavus
• GitHub Integration for repo imports and code analysis

The entire pipeline runs asynchronously with real-time status tracking.

Challenges

• Integrating multiple AI APIs while handling rate limits and errors
• Managing long-running video tasks with polling and status sync
• Designing effective AI prompts for engaging, accurate scripts
• Ensuring state consistency between frontend, backend, and third-party services
• Building a system that scales with user demand

What We Learned

• Modular, serverless functions simplify complex workflows
• Great UX for long processes builds user trust
• AI can radically speed up content creation, freeing devs to focus on what matters

Built With

• auth
• claude
• deno-ai-&-apis:-google-gemini
• edge-functions)
• elevenlabs
• eslint
• frontend:-react
• github-api-dev-tools:-npm
• lucide-backend:-supabase-(postgresql
• openai
• react-router
• storage
• tailwind-css
• tavus
• typescript
• vite