AI Chatbot — HTML, CSS & JS

A simple personal AI chatbot built with plain HTML, CSS, and JavaScript, no frameworks. It sends user messages to the Google Gemini API and displays the responses in a styled chat interface, with chat history saved locally in the browser.

AI ChatBot

• Clean, responsive chat UI (works down to mobile)
• Live typing indicator while waiting for a response
• Light and dark themes: follows your OS setting by default, with a toggle in the header; your choice is saved in localStorage under theme
• Chat history persisted with localStorage, so it survives a page reload
• Talks to the Gemini API (gemini-3.6-flash) for responses
• No build tools or dependencies — just open it in a browser

.
├── index.html    # Page structure
├── styles.css    # All styling
├── script.js     # Chat logic + Gemini API call
└── config.js     # Your API key (you create this, not included)

1. Get a Gemini API key Create one at Google AI Studio.

2. Create config.js in the project root:

   export const GEMINI_API_KEY = "your-api-key-here";

   This file is imported by script.js and should not be committed to a public repo — add it to .gitignore.

3. Run it through a local server, not by double-clicking index.html. script.js is loaded as an ES module (type="module"), and browsers block module imports over the file:// protocol.

   Any of these work:

   # Python
   python -m http.server 5500
   
   # Node
   npx serve .
   
   # VS Code
   # Right-click index.html → "Open with Live Server"

4. Open the printed local address (e.g. http://localhost:5500) in your browser.

• Typing a message and pressing Send appends it to the chat, then calls getAIResponse().
• getAIResponse() sends a POST request to the Gemini generateContent endpoint with your message, using a system instruction that keeps replies short (1–3 sentences).
• The reply is pulled out of the response and appended to the chat as an AI bubble.
• After every exchange, the full chat HTML is saved to localStorage under chatHistory and restored automatically on page load.