AI Chatbot
Open in New Tab Code sources
Fully interactive AI chatbot demo showcasing advanced pane features including voice recording, mobile-first responsive design, dynamic theming, and smooth animations. This demo demonstrates modern UI patterns with the Cupertino Pane library.
Live Demo
Technical Stack
- Cupertino Pane - Core modal/pane functionality
- Web Speech API - Voice recognition capabilities
- CSS Custom Properties - Dynamic theming system
- Hardware Acceleration - 60fps animations with transform3d
- Responsive Design - Mobile-first approach with breakpoints
Source Code
The complete source code for this demo is available in the repository at /playground/ai-chatbot/, and is served as static files from /scene/ai-chatbot/ in the docs. The demo includes:
index.html- Main HTML structurestyle.css- Complete CSS with theming system (1800+ lines)script.js- JavaScript logic with pane integration (1000+ lines)sounds/- UI sound effectsimages/- Technology logos and assets
React
Need an example ? Please create an issue
Angular
Need an example ? Please create an issue
Vue
Need an example ? Please create an issue