VOXAI

<br />
Redesign and build the frontend of my existing VoxAI realtime voice AI application.<br />
Do NOT replace the backend architecture or database.<br />
Your job is to create an exceptional, production-quality frontend for a voice-native AI assistant.<br />
TECHNOLOGY<br />
Use:<br />
• Next.js<br />
• React<br />
• TypeScript<br />
• Tailwind CSS<br />
• shadcn/ui<br />
• Lucide icons<br />
Use reusable components.<br />
DESIGN GOAL<br />
The application should feel like a premium combination of:<br />
• AI assistant<br />
• realtime voice communication<br />
• futuristic technology<br />
• professional productivity software<br />
It must NOT look like a generic admin dashboard.<br />
The primary focus should be the AI voice conversation.<br />
MAIN SCREEN<br />
Create a beautiful voice assistant dashboard.<br />
Top navigation:<br />
VoxAI<br />
Navigation:<br />
Voice Assistant Conversations Knowledge Base Settings<br />
Right:<br />
Connection indicator User avatar<br />
HERO VOICE AREA<br />
The center of the screen should contain a large animated AI orb.<br />
Create different visual states:<br />
IDLE<br />
Display:<br />
&quot;Ready to talk&quot;<br />
LISTENING<br />
Display:<br />
&quot;Listening...&quot;<br />
THINKING<br />
Display:<br />
&quot;Thinking...&quot;<br />
SPEAKING<br />
Display:<br />
&quot;Speaking...&quot;<br />
CONNECTING<br />
Display:<br />
&quot;Connecting...&quot;<br />
ERROR<br />
Display:<br />
&quot;Connection problem&quot;<br />
The orb should subtly react to audio activity.<br />
MICROPHONE<br />
Create a large central microphone button.<br />
Idle:<br />
Start Conversation<br />
Listening:<br />
Listening<br />
Speaking:<br />
Interrupt<br />
The button should have smooth hover, press and active animations.<br />
VOICE WAVEFORM<br />
Create a realtime-looking waveform visualization.<br />
It should support:<br />
• microphone activity<br />
• AI speaking activity<br />
• idle animation<br />
Use CSS/Web Audio API where appropriate.<br />
Avoid unnecessary dependencies.<br />
LIVE TRANSCRIPT<br />
Create a transcript panel.<br />
Example:<br />
USER<br />
&quot;Explain how artificial intelligence works.&quot;<br />
VOXAI<br />
&quot;Artificial intelligence allows computers...&quot;<br />
Messages should appear smoothly.<br />
Show partial transcript while the user is speaking.<br />
Automatically scroll to the latest message.<br />
STATUS BAR<br />
Create a compact status section:<br />
Microphone Connected<br />
AI Ready<br />
Network Excellent<br />
CONTROL BAR<br />
Buttons:<br />
Mute<br />
Stop<br />
Settings<br />
End Conversation<br />
Use icons with tooltips.<br />
CONVERSATION SIDEBAR<br />
Create an optional collapsible sidebar showing recent conversations.<br />
Each item:<br />
Conversation title<br />
Time<br />
Short preview<br />
Active conversation highlighted.<br />
KNOWLEDGE BASE<br />
Create a polished Knowledge Base page.<br />
Display document cards:<br />
filename<br />
file type<br />
processing status<br />
date<br />
delete action<br />
Upload button.<br />
Use drag-and-drop upload UI.<br />
SETTINGS<br />
Create modern settings panels for:<br />
Voice<br />
AI<br />
Audio<br />
Appearance<br />
Privacy<br />
Developer Mode<br />
MOBILE DESIGN<br />
The application must work beautifully on mobile.<br />
On mobile:<br />
• collapse navigation<br />
• make voice orb prominent<br />
• keep microphone control easily accessible<br />
• transcript becomes full width<br />
• sidebar becomes a drawer<br />
DARK MODE<br />
Create an excellent dark theme.<br />
Also support light mode.<br />
Do not use excessive gradients.<br />
Use subtle glow effects around the voice orb.<br />
ANIMATIONS<br />
Use smooth animations for:<br />
• microphone activation<br />
• voice orb<br />
• transcript appearance<br />
• state transitions<br />
• connection changes<br />
• sidebar<br />
• buttons<br />
Animations must remain performant.<br />
ACCESSIBILITY<br />
Include:<br />
• keyboard navigation<br />
• focus states<br />
• ARIA labels<br />
• sufficient contrast<br />
• screen-reader friendly controls<br />
COMPONENT ARCHITECTURE<br />
Create reusable components:<br />
VoiceOrb<br />
VoiceVisualizer<br />
MicrophoneButton<br />
VoiceStatus<br />
LiveTranscript<br />
TranscriptMessage<br />
ConversationSidebar<br />
ConnectionStatus<br />
AudioControls<br />
KnowledgeBaseCard<br />
UploadDocument<br />
SettingsPanel<br />
IMPORTANT<br />
Do not replace existing API logic.<br />
Do not hardcode API keys.<br />
Do not create fake backend functionality.<br />
Use mock/demo data only when necessary for visual development and clearly separate it from production API calls.<br />
Keep the existing backend interfaces intact.<br />
The final UI should look like a polished commercial AI voice product ready for a hackathon demonstration and later production deployment.