A sophisticated real-time AI model interaction platform with streaming capabilities, built with Next.js 15 and React 19.
- β¨ Real-time AI model interaction with streaming responses
- π Live metrics tracking (tokens/sec, total tokens)
- π Automatic retry logic with exponential backoff
- π§ Configurable model parameters
- π± Progressive Web App (PWA) support
- π Offline functionality
- β‘ Performance optimized with React memoization
- π LaTeX equation support
- π¨ Dark/Light mode support
# Install dependencies (use legacy peer deps due to React 19 RC)
npm install --legacy-peer-deps
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
-
Playground (
components/playground/playground.tsx
)- Main interface component
- Handles user input and AI interactions
- Manages conversation state
-
Message System
MessageWindow
: Virtualized message displayMessageItem
: Individual message rendering- LaTeX equation support via KaTeX
- Code syntax highlighting
-
Model Controls
- Temperature adjustment
- Top-P configuration
- Frequency/Presence penalty settings
-
Error Handling
- Error boundaries for component isolation
- Automatic retry logic
- Sentry integration for monitoring
- React hooks for local state
- IndexedDB for conversation persistence
- Local storage for user preferences
-
Optimizations
- Component memoization
- Virtualized list rendering
- Service worker for offline support
- Asset caching strategies
-
Memory Management
- Message virtualization
- Efficient state updates
- Cleanup on unmount
-
Retry Logic
- Exponential backoff
- Configurable attempts
- Error context preservation
-
Monitoring
- Sentry integration
- Error logging
- User feedback
-
Features
- Multiple model support
- Conversation branching
- Export/Import conversations
- Collaborative features
-
Technical
- WebSocket implementation
- Stream compression
- Worker thread processing
- Enhanced caching strategies
-
Browser Support
- Service workers require HTTPS
- IndexedDB storage limits
- PWA installation requirements
-
Performance
- Initial load time with full bundle
- Memory usage with long conversations
- Mobile device considerations
-
Network
- Intermittent connectivity
- Failed retry attempts
- Partial message delivery
-
User Input
- Large message handling
- Special character processing
- Rate limiting
-
Storage
- Quota exceeded handling
- Data corruption recovery
- Cross-device sync limitations
- Node.js 18+
- npm or yarn
- Modern browser with service worker support
- Clone the repository
- Install dependencies with
npm install --legacy-peer-deps
- Create
.env.local
with required variables - Start development server
npm run test # Run unit tests
npm run test:e2e # Run end-to-end tests
npm run lint # Run linting
MIT License - see LICENSE file for details