🤖 Web-Based AI ChatBot

A modern, responsive AI chatbot powered by HackClub's AI API. Clean interface, persistent chat sessions, and no backend required - perfect for static hosting.

🌐 Try It Live!

✨ Key Features

• 🤖 AI-Powered Chat - Real-time conversations with HackClub's AI
• 📂 Multiple Sessions - Create and manage separate chat conversations
• 🎨 Dark/Light Themes - Toggle between beautiful themes
• 💾 Auto-Save - Chat history persists across browser sessions
• 📱 Responsive Design - Works perfectly on desktop and mobile
• 📥 Export Chats - Download conversations as JSON or text
• ⌨️ Keyboard Shortcuts - Efficient navigation and controls
• 🔒 Privacy-First - All data stored locally in your browser

🚀 Quick Start

Setup Your API Key

1. Get a free API key from HackClub AI Dashboard
2. Create a .env file in the project root:

   VITE_HACK_CLUB_API_KEY=your_api_key_here
   

3. The app will prompt for your API key on first use if not found in .env

Option 1: Direct Browser Use

1. Download the project files
2. Add your API key to .env or be ready to enter it when prompted
3. Double-click index.html to open in your browser
4. Start chatting!

Option 2: Local Server

# Using Python
python -m http.server 8000

# Using Node.js
npx http-server

# Then visit http://localhost:8000

Option 3: GitHub Pages

1. Fork this repository
2. Add your API key as a GitHub Secret (if using automated deployment)
3. Enable GitHub Pages in Settings
4. Your chatbot will be live at https://yourusername.github.io/repository-name
5. Note: You'll be prompted to enter your API key on first use

🎮 How to Use

Basic Chat

• Type messages and press Enter to send
• Use Shift+Enter for new lines
• Hover over AI messages to copy them
• Click 🗑️ to clear the current chat

Sessions

• Click ➕ to create a new chat session
• Click 📁 to toggle the sessions sidebar
• Switch between sessions by clicking on them
• Each session saves automatically

Themes & Export

• Click 🌙/☀️ to switch between dark/light themes
• Click 📥 to export your chat history
• Choose JSON (with metadata) or TXT (readable) format

Keyboard Shortcuts

• Ctrl/Cmd+L - Focus message input
• Escape - Clear current input
• Enter - Send message
• Shift+Enter - New line

📁 Project Structure

Web-based-AI-ChatBot/
├── index.html    # Main application
├── style.css     # Styling and themes
├── script.js     # JavaScript functionality
├── app.py        # Optional Flask backend (unused)
└── README.md     # This guide

🔧 Customization

Change AI Behavior

Edit the API call in script.js (in sendMessage() function):

const response = await fetch('https://ai.hackclub.com/proxy/v1/chat/completions', {
    method: 'POST',
    headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        model: 'qwen/qwen3-32b',  // Can change to other available models
        messages: [{role: 'user', content: message}],
        // Optional: Add custom parameters:
        // temperature: 0.7,
        // max_tokens: 150
    })
});

API Authentication

The app uses Bearer token authentication with the Hack Club AI API:

• API Key is read from .env file (environment variable VITE_HACK_CLUB_API_KEY)
• Falls back to localStorage if available
• Prompts user if neither is found
• Stores in localStorage after first entry for convenience

Available Models

Check HackClub AI Models for available models. Current default: qwen/qwen3-32b

Modify Themes

Update CSS variables in style.css:

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --chat-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

🛠️ Troubleshooting

Issue	Solution
AI not responding	Check internet connection, try refreshing
Chat history not saving	Enable localStorage, exit private browsing
Layout issues	Use modern browser, clear cache
Theme not switching	Check console for errors, clear site data

📱 Browser Support

Browser	Version	Status
Chrome	60+	✅ Supported
Firefox	60+	✅ Supported
Safari	12+	✅ Supported
Edge	79+	✅ Supported

📄 License

MIT License - see LICENSE file for details.

---

Made with ❤️ by Aslesh Sura | Powered by HackClub AI