🤖 AI Chatbot

A simple and responsive AI chatbot built using HTML, CSS, and JavaScript. The chatbot allows users to send messages and receive AI-generated responses through an API.

🚀 Features

• 💬 User and AI chat messages
• 🤖 AI-generated responses
• 📱 Responsive chat interface
• ⌨️ Simple message input and send button
• 🔌 API-based AI integration

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript
• Fetch API
• AI API
• Vercel

📁 Project Structure

AI-Chatbot/
│
├── index.html
├── style.css
├── index.js
├── img/
│   ├── head-background.jpg
│   ├── logo.jpg
│   └── ai.jpg
├──favicon.ico
└── README.md

🔑 API Setup

This project requires an AI API key to generate responses.

⚠️ Important

You must create your own API key from your preferred AI API provider and add it to your JavaScript code.

Example:

const API_KEY = "YOUR_API_KEY";

Then use your API key in the API request.

▶️ Run Locally

1. Clone this repository:

git clone https://github.com/imakasx/my-ai-chatbot.git

2. Open the project folder.

3. Add your own API key in index.js.

4. Open index.html using Live Server or another local development server.

5. Start chatting with the AI 🤖

💡 How It Works

User enters message
        ↓
JavaScript gets input.value
        ↓
Message is displayed in chat
        ↓
API request is sent
        ↓
AI generates response
        ↓
Response is received
        ↓
AI message is displayed

📸 Preview

screenshot of chatbot here:

⭐ Support

If you found this project useful, consider giving the repository a ⭐ on GitHub.