AVA.AI - AI Avatar Platform
A cutting-edge platform for real-time, conversational 3D AI assistants, powered by Google Gemini and Next.js.
Check it out
Roles: Lead Architect & Full-Stack Developer
Client: Personal Project
Next.jsTypeScriptReact Three FiberGoogle GeminiVercel AI SDKZustandTailwind CSSFramer MotionElevenLabs API
Overview
This project is an ambitious endeavor to build a scalable and immersive platform for interacting with specialized 3D AI assistants. Inspired by industry leaders like Soul Machines, it moves beyond simple chatbots to create emotionally resonant digital humans. The user experience is paramount, featuring a stunning 3D hero section, a dynamic gallery of configurable avatars, and a real-time, streaming chat interface with integrated Text-to-Speech and expressive animations.
Tech Stack
- Next.js
- TypeScript
- React Three Fiber
- Google Gemini
- Vercel AI SDK
- Zustand
- Tailwind CSS
- Framer Motion
- ElevenLabs API
Features
- Real-time Conversational AI & TTSEngineered a full-duplex conversational pipeline using Google Gemini for streaming text and ElevenLabs for high-quality, sequential Text-to-Speech, orchestrated by a custom `useAvatarChat` hook.
- Advanced 3D Avatar Animation SystemDeveloped a multi-layered animation system in React Three Fiber featuring a robust state machine (Idle, Thinking, Talking), procedural blinking, and dynamic facial expressions driven by AI-parsed sentiment.
- Robust Voice & State ManagementSolved complex state and race condition bugs in the Web Speech API to enable seamless mute/unmute and preserve transcript context. Centralized all shared animation and audio state in a resilient Zustand store.
- Dual-Mode Responsive & Demo ArchitectureArchitected a sophisticated responsive layout that provides a professional two-column chat experience on desktop and a fully immersive, voice-first interface on mobile. Implemented a cost-free 'Demo Mode' for production using pre-recorded audio and scripted interactions.