An AI-powered study assistant that converts PDF documents into comprehensive study notes and provides an interactive chat interface for learning.
- 📄 PDF Upload: Drag-and-drop or click to upload PDF study materials
- 📝 Automatic Note Generation: AI-powered extraction and summarization of key concepts with LaTeX support
- 💬 Interactive Chat: Ask questions about your study material with context-aware responses
- ✨ Text Highlighting: Select text in your notes to ask specific questions
- 📋 AI-Generated Quizzes: Take timed quizzes (10 min) with automatic grading and detailed feedback
- ⏱️ Quiz Timer: Countdown timer with auto-submit when time expires
- 🗄️ Database Persistence: All content, chats, and quiz attempts saved to SQLite
↔️ Resizable Panels: Drag to adjust notes/chat panel widths- 🎨 Modern UI: Beautiful, responsive design with markdown and LaTeX rendering
- React 18 with TypeScript
- Vite for fast development
- TailwindCSS + shadcn/ui for styling
- React Query for data fetching
- React Router for navigation
- React Markdown for rendering notes
- Flask (Python)
- Flask-SQLAlchemy + SQLite for data persistence
- PyPDF2 for PDF text extraction
- Groq API (OpenAI-compatible) with Llama 3.3 70B for AI generation
- Flask-CORS for API security
- Node.js 18+ and npm
- Python 3.8+
- Groq API key (Get one here) - Free tier available!
git clone https://github.com/Al-aminI/ai-tutor.git
cd ai-tutor# Install dependencies
npm install
# Start the development server
npm run devThe frontend will run on http://localhost:8080
# Navigate to backend directory
cd backend
# Create virtual environment
python3 -m venv venv
# Activate virtual environment
# On macOS/Linux:
source venv/bin/activate
# On Windows:
# venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Create .env file
cp .env.example .env
# Edit .env and add your Groq API key
# OPENAI_API_KEY=your_groq_api_key_hereTerminal 1 - Backend:
cd backend
source venv/bin/activate # if not already activated
python app.py
# Runs on http://localhost:5001Terminal 2 - Frontend:
npm run dev
# Runs on http://localhost:8080Visit http://localhost:8080 to use the application!
- Upload a PDF: Drag and drop a PDF file or click the upload area
- Wait for Processing: The AI will extract text and generate comprehensive study notes with LaTeX formatting
- Review Notes: Study the markdown-formatted notes with headings, equations, tables, and code blocks
- Ask Questions:
- Type questions in the chat panel
- Highlight any text in the notes to ask about it specifically
- Get markdown-formatted responses with LaTeX math
- Take Quizzes:
- Click "Take Quiz" button in chat panel
- Answer 5 AI-generated multiple choice questions
- 10-minute timer with auto-submit
- Notes automatically masked during quiz
- Get instant grading with detailed feedback
- Customize Layout: Drag the panel divider to resize notes/chat areas
- Track Progress: All content, chats, and quiz attempts saved to SQLite database
Upload a PDF and generate study notes.
Request:
- Content-Type:
multipart/form-data - Body: PDF file
Response:
{
"success": true,
"notes": "markdown formatted notes",
"document_id": 1
}Send chat messages and get AI responses.
Request:
{
"message": "Explain this concept",
"document_id": 1,
"history": [
{"role": "user", "content": "previous question"},
{"role": "assistant", "content": "previous answer"}
]
}Response:
{
"success": true,
"response": "AI response text"
}Generate quiz questions from study material.
Request:
{
"document_id": 1,
"num_questions": 5
}Response:
{
"success": true,
"quiz_id": 1,
"questions": [
{
"question": "What is X?",
"options": {"A": "...", "B": "...", "C": "...", "D": "..."},
"correct_answer": "B",
"explanation": "Because..."
}
]
}Submit quiz answers and get graded.
Request:
{
"quiz_id": 1,
"answers": {"1": "A", "2": "C", "3": "B", "4": "D", "5": "A"}
}Response:
{
"success": true,
"score": 80.0,
"correct_count": 4,
"total_questions": 5,
"feedback": [...]
}Health check endpoint.
.
├── src/
│ ├── components/
│ │ ├── ChatPanel.tsx # Chat + Quiz interface
│ │ ├── StudyNotes.tsx # Notes display with LaTeX
│ │ ├── UploadArea.tsx # PDF upload
│ │ └── ui/ # shadcn components
│ ├── styles/
│ │ └── markdown.css # Custom markdown/LaTeX styling
│ ├── pages/
│ │ └── Index.tsx # Main page with resizable panels
│ └── main.tsx
├── backend/
│ ├── app.py # Flask API with all endpoints
│ ├── database.py # SQLAlchemy models
│ ├── requirements.txt # Python dependencies
│ ├── .env # API keys (create this)
│ └── instance/
│ └── pdf_notes.db # SQLite database (auto-created)
├── package.json
└── vite.config.ts
npm run dev # Start dev server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint- The Flask app runs in debug mode by default
- Changes to
app.pywill auto-reload the server - Use
.envfor environment variables (never commit this file)
OPENAI_API_KEY=your_groq_api_key
Note: Despite the name "OPENAI_API_KEY", this should be your Groq API key. Groq uses OpenAI-compatible API format.
The SQLite database is automatically created at backend/instance/pdf_notes.db on first run. It stores:
- Uploaded PDFs and generated notes
- Chat conversation history
- Generated quizzes
- Quiz submissions and scores
- Ensure the file is a valid PDF
- Check that the backend server is running on port 5000
- Verify your OpenAI API key is set correctly
- Check browser console for errors
- Verify the backend is accessible at
http://localhost:5000 - Ensure you have uploaded a PDF first
- Make sure Flask-CORS is installed:
pip install flask-cors - Verify the Vite proxy is configured correctly in
vite.config.ts
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Commit your changes:
git commit -am 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
MIT License - feel free to use this project for learning and development!
- Built with shadcn/ui components
- Powered by OpenAI GPT-4o AI
- Icons from Lucide
For issues, questions, or suggestions, please open an issue on GitHub.
Happy Studying! 📚✨