VoiceAble

Just speak or type your need, and VoiceAble generates a digital accessibility tool in seconds. No coding, just inclusion.

Inspiration

We live in a world where digital accessibility is still an afterthought for many platforms. What if building inclusive tools didn't require specialized coding skills? VoiceAble was born from this vision — a voice-first, AI-powered assistant that empowers anyone to create accessibility-focused tools effortlessly. We wanted to bridge the gap between need and accessibility — where the only thing required is your voice or a simple text input.

What it does

VoiceAble enables users to speak or type their requirements, and within seconds, it generates a fully functional digital accessibility tool tailored to their input.

Features:

Voice/text-based natural input interface
GPT-4o-mini powered real-time code generation
Seamless component rendering using React and Tailwind CSS
Downloadable outputs via Lovable integration
Theme-aware UI (dark/light mode)

How we built it

We built VoiceAble as a React + TypeScript web application with a clean component architecture:

Frontend: React + TypeScript with Vite
Voice Input: Browser-based audio capture
AI Core: Integrated OpenRouter GPT-4o-mini for natural language to JSX code generation
File Downloader: Used Lovable for packaging generated tools into downloadable files
UI: Styled with Tailwind CSS and icons from Lucide
Custom Hooks: For mobile detection, toast messages, and theme toggling

Challenges we ran into

Voice to Intent Accuracy: Mapping unstructured input to valid components was tough.
Performance: Keeping the UI responsive during generation was challenging.
Dark/Light Theme Conflicts: Tailwind required custom handling to avoid style overrides.
Download Size: Generating multiple components increased bundle sizes rapidly.