AI Chatbot Assistant

A modern, full-stack AI chatbot application built with FastAPI and Jinja2, leveraging GitHub Models for free, open-source AI inference. Features a beautiful, responsive UI with real-time chat capabilities and secure user authentication.

✨ Features

• 🤖 AI-Powered Conversations - Uses GitHub Models for free AI inference
• 🔐 Secure Authentication - JWT-based auth with FastAPI-Users
• 🎨 Modern UI - Beautiful glassmorphism design with Tailwind CSS
• 📱 Responsive Design - Works perfectly on desktop and mobile
• ⚡ Real-time Chat - Instant message updates with typing indicators
• 🔒 Protected Routes - Secure chat access for authenticated users
• 🚀 GitHub Integration - Zero-config setup with GitHub Personal Access Tokens

🏗️ Tech Stack

Backend

• FastAPI - Modern, fast web framework for Python
• FastAPI-Users - Complete user management solution
• SQLAlchemy - SQL toolkit and ORM
• SQLite - Lightweight database (easily upgradeable to PostgreSQL)
• GitHub Models API - Free AI inference endpoint

Frontend

• HTML5/Tailwind CSS - Modern, responsive styling
• Lucide Icons - Beautiful, consistent icons
• Vanilla JavaScript - Lightweight, fast interactions
• Glassmorphism Design - Modern UI trends

🚀 Quick Start

Prerequisites

• Python 3.11+
• GitHub Personal Access Token (for AI inference)

Installation

1. Clone the repository

   git clone https://github.com/Sohail342/AI-Chatbot.git
   cd ai-chatbot

2. Install dependencies

   # Using uv (recommended)
   uv sync
   
   # Or using pip
   pip install -r requirements.txt

3. Set up environment variables

   # Create .env file
   cp .env.example .env
   
   # Edit .env with your GitHub token
   GITHUB_TOKEN=your_github_personal_access_token_here

4. Run database migrations

   alembic upgrade head

5. Start the application

   uv run uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

6. Access the application

   • 🌐 Main App: http://localhost:8000
   • 📚 API Docs: http://localhost:8000/docs

🔧 GitHub Models Integration

This application uses GitHub Models for AI inference, providing free access to powerful AI models without requiring paid API keys.

How It Works

• Zero Configuration: No need for OpenAI keys or paid services
• GitHub Token: Uses your existing GitHub Personal Access Token
• OpenAI Compatible: Works with existing OpenAI SDK patterns
• Free Tier: Available for all GitHub users and open-source projects

Setup Instructions

1. Create a GitHub Personal Access Token
2. Grant models:read permission
3. Add the token to your .env file: GITHUB_TOKEN=your_token_here

API Usage

# Example API call to GitHub Models
import requests

headers = {
    'Authorization': f'Bearer {GITHUB_TOKEN}',
    'Content-Type': 'application/json'
}

payload = {
    'model': 'gpt-4o',
    'messages': [
        {'role': 'user', 'content': 'Hello, AI!'}
    ]
}

response = requests.post(
    'https://models.github.ai/inference/chat/completions',
    headers=headers,
    json=payload
)

🎯 Usage Guide

User Registration & Login

1. Visit http://localhost:8000
2. Click "Get Started" to register a new account
3. Login with your credentials
4. Access the AI chat interface

Chat Features

• Send Messages: Type in the chat input and press Enter
• Typing Indicators: See when the AI is thinking
• Message History: View your conversation history
• Responsive Design: Works on all devices

API Endpoints

• POST /auth/register - User registration
• POST /auth/login - User authentication
• POST /auth/logout - User logout
• POST /api/chat - Send message to AI
• GET /users/me - Get current user info

🎨 Design Features

Modern UI Elements

• Glassmorphism Cards: Semi-transparent, blurred backgrounds
• Gradient Animations: Dynamic color transitions
• Floating Animations: Subtle motion for engagement
• Hover Effects: Interactive feedback on all elements
• Responsive Grid: Adapts to any screen size

Color Scheme

• Primary: Purple gradients (#667eea → #764ba2)
• Secondary: Pink accents (#ec4899)
• Background: Dark theme with glass effects
• Text: High contrast for readability

🛠️ Development

Project Structure

ai-chatbot/
├── app/
│   ├── api/v1/          # API routes
│   ├── core/            # Core configuration
│   ├── db/              # Database setup
│   ├── models/          # SQLAlchemy models
│   ├── schemas/         # Pydantic schemas
│   ├── services/        # Business logic
│   └── templates/       # HTML templates
├── alembic/             # Database migrations
├── static/              # Static files (CSS, JS, images)
└── tests/               # Test files

Adding New Features

1. Backend: Add new routes in app/api/v1/
2. Frontend: Update templates in app/templates/
3. Database: Create new migrations with alembic revision
4. Testing: Add tests in tests/

Environment Variables

# Required
GITHUB_TOKEN=your_github_personal_access_token
DATABASE_URL=sqlite:///./chatbot.db
SECRET_KEY=your_secret_key_for_jwt

# Optional
DEBUG=True
HOST=0.0.0.0
PORT=8000

🧪 Testing

Run Tests

# Run all tests
pytest

# Run with coverage
pytest --cov=app

# Run specific test file
pytest tests/test_chat.py

Manual Testing

• Frontend: Test on different screen sizes
• API: Use Swagger docs at /docs
• Authentication: Test login/logout flow
• AI: Verify GitHub Models responses