Frontend
The frontend is a Next.js application providing the user interface for Friday Assistant.
Project Structure
frontend-agent/
├── app/ # Next.js app directory
│ ├── (app)/ # Main application pages
│ ├── api/ # API routes
│ ├── components/ # Page-specific components
│ └── globals.css # Global styles
├── components/ # Reusable components
│ ├── auth/ # Authentication (login, guards)
│ ├── livekit/ # Video tiles, controls
│ ├── ui/ # Buttons, alerts, etc.
│ ├── app.tsx # Main container
│ ├── session-view.tsx # Active call interface
│ └── welcome.tsx # Landing page
├── hooks/ # Custom React hooks
├── lib/ # Utilities and types
├── public/ # Static assets
└── app-config.ts # App configuration
Features
- Voice Conversations: Real-time voice interaction with minimal latency
- Azure AD Auth: Microsoft login for secure access
- Video Support: Camera toggle during conversations
- Screen Sharing: Share your screen with the assistant
- Live Transcription: Real-time conversation transcript
- Chat Interface: Text messaging alongside voice
- Theme Support: Light and dark modes
Tech Stack
- Next.js 15.4.2 with React 19
- LiveKit components for real-time media
- MSAL for Azure AD authentication
- Tailwind CSS for styling
- Framer Motion for animations
Scripts
pnpm dev # Start dev server
pnpm build # Production build
pnpm start # Start production server
pnpm lint # Run linter
pnpm format # Format code