A lightweight, modern AI chatbot desktop application built with Electron. Features a beautiful Material Design interface and supports both text generation and image creation through AI APIs.
- 💬 Conversational AI - Natural language processing powered by LLM API
- 🎨 Image Generation - Create images using
/imagecommand - 🖥️ Desktop App - Cross-platform Electron application
- 🎯 Clean UI - Modern Material Design interface
- ⚡ Real-time Responses - Instant AI-powered replies
- 🌈 Smooth Animations - Fade-in effects for messages
- 📱 Responsive Design - Adapts to different screen sizes
- 🔄 Loading States - Visual feedback during API calls
- Node.js 14+ and npm installed
- Internet connection for API calls
# Clone the repository
git clone https://github.com/widgetwalker/ai_chat_bot.git
cd ai_chat_bot
# Install dependencies
npm install
# Start the application
npm startThe desktop app will launch automatically!
Simply type your message and press Send or hit Enter. The AI will respond with intelligent, context-aware answers.
Type /image followed by your description:
/image a beautiful sunset over mountains
The AI will generate an image based on your prompt!
ai_chat_bot/
├── index.html # Main UI with embedded JavaScript
├── style.css # Custom styles (minimal)
├── main.js # Electron main process
├── preload.js # Preload script for security
├── package.json # Dependencies and scripts
├── robo.png # Chatbot icon/avatar
└── README.md # This file
The chatbot uses external APIs for AI functionality:
LLM API (Text Generation):
https://backend.buildpicoapps.com/aero/run/llm-api
Image Generation API:
https://backend.buildpicoapps.com/aero/run/image-generation-api
Note: API keys are embedded in
index.html. For production use, move them to environment variables.
Change UI Colors:
Edit the CSS variables in index.html:
background-color: #6200EA; /* Purple theme */Modify API Endpoints:
Update the apiUrl in the sendButton event listener (line 184-186).
| Technology | Purpose |
|---|---|
| Electron | Desktop app framework |
| HTML5 | Structure and layout |
| JavaScript | Logic and API integration |
| Material Design | UI components and icons |
| Font Awesome | Additional icons |
| CSS3 | Styling and animations |
- Material Design Components - Modern, clean interface
- Purple Theme - Professional color scheme (#6200EA)
- Smooth Animations - Fade-in effects for messages
- Responsive Layout - Works on various screen sizes
- Loading Indicators - Visual feedback during API calls
- Auto-scroll - Automatically scrolls to latest message
# Clear node modules and reinstall
rm -rf node_modules package-lock.json
npm install
npm start- Check your internet connection
- Verify API endpoints are accessible
- Check browser console for detailed error messages
- Clear Electron cache
- Update to latest Electron version
- Check for conflicting CSS
npm start# Install electron-builder
npm install --save-dev electron-builder
# Build for your platform
npm run buildContributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - free to use, modify, and distribute!
- Repository: github.com/widgetwalker/ai_chat_bot
- Issues: Report a bug
- Author: @widgetwalker
⭐ Star this repo if you find it helpful!
Built with ❤️ using Electron and AI