AI Learning Assistant is a modern web application designed to help users understand complex topics through AI-powered tools such as chat interaction, automatic summaries, and visual mind maps.
The platform allows users to explore knowledge in an interactive way using multiple AI-assisted learning features.
- Dashboard – Central hub to access all AI tools.
- AI Chatbot – Ask questions and get intelligent responses.
- Mind Map Generator – Visualize concepts and relationships.
- AI Summary Tool – Convert long text into concise summaries.
- Authentication Pages – Login system for users.
- Modular Architecture – Scalable folder structure for future expansion.
Frontend
- React
- TypeScript
- Vite
- React Router
Visualization
- Mermaid.js (for mind maps)
Backend (Planned / Optional)
- Node.js
- Express
- LLM APIs (OpenAI / Gemini)
src
│
├── pages
│ ├── Home.tsx
│ ├── Login.tsx
│ ├── Dashboard.tsx
│ ├── MindMap.tsx
│ ├── ChatbotPage.tsx
│ └── SummaryPage.tsx
│
├── components
│ └── reusable UI components
│
├── App.tsx
└── main.tsx
Clone the repository
git clone https://github.com/your-username/ai-learning-assistant.git
Navigate into the project folder
cd ai-learning-assistant
Install dependencies
npm install
Start the development server
npm run dev
Open in browser
http://localhost:5173
| Route | Description |
|---|---|
/ |
Home Page |
/login |
User Login |
/dashboard |
Main application dashboard |
/mindmap |
AI-generated mind maps |
/chatbot |
AI chatbot interface |
/summary |
AI text summarization |
- LLM integration (OpenAI / Gemini)
- RAG-based knowledge retrieval
- User authentication system
- Notebook storage
- AI quiz generation
- Vector database integration
This project demonstrates the integration of modern frontend architecture with AI-powered learning tools, making it suitable for educational platforms, productivity tools, and knowledge management systems.
Khushal
AI & Full Stack Developer