AI Learning Platform

A comprehensive, AI-powered learning platform that creates personalized study plans and provides interactive lessons with real-time AI assistance. Built with Next.js, TypeScript, and multiple AI provider integrations.

Features

🤖 Multiple AI Provider Support

• DeepSeek: Fast and efficient AI with strong reasoning capabilities
• OpenAI: Industry-leading GPT models (GPT-4o, GPT-3.5-turbo)
• Anthropic Claude: Thoughtful and nuanced AI assistant
• Google Gemini: Multimodal AI for comprehensive understanding
• Groq: Ultra-fast inference for quick learning sessions

📚 Personalized Learning Experience

• Topic Selection: Choose from popular topics or enter custom subjects
• Learning Preferences: Customize daily time commitment, teaching style, and difficulty level
• AI-Generated Study Plans: Comprehensive curricula tailored to your preferences
• Progress Tracking: Visual progress indicators and completion statistics

🎓 Interactive Learning Features

• Dynamic Lesson Content: AI-generated lessons based on your study plan
• Real-time Chat Assistant: Ask questions and get instant AI help during lessons
• Auto-Timer: Automatic lesson timing based on estimated duration
• Quiz System: AI-generated quizzes to test understanding
• Markdown Support: Beautiful formatting for lesson content and chat messages

📊 Dashboard & Analytics

• Home Dashboard: Overview of learning progress and quick actions
• Chapter Management: Detailed view of all chapters and lessons
• Progress Statistics: Completion rates, time tracking, and achievements
• Continue Learning: Easy access to resume where you left off

Getting Started

Prerequisites

• Node.js 18+
• An API key from at least one supported AI provider

Installation

1. Clone or download the project

   git clone https://github.com/MEClouds/ai-learning
   cd ai-learning-platform

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Configuration

1. Choose your AI provider from the configuration page
2. Enter your API key for the selected provider
3. Test the connection to ensure everything works
4. Start learning!

API Keys Setup

DeepSeek

1. Visit DeepSeek Platform
2. Create an account and generate an API key
3. API keys start with sk-

OpenAI

1. Visit OpenAI Platform
2. Create an account and generate an API key
3. API keys start with sk-

Anthropic Claude

1. Visit Anthropic Console
2. Create an account and generate an API key
3. API keys start with sk-ant-

Google Gemini

1. Visit Google AI Studio
2. Create an API key
3. API keys start with AIza

Groq

1. Visit Groq Console
2. Create an account and generate an API key
3. API keys start with gsk_

Usage Guide

1. Initial Setup

• Configure your preferred AI provider
• Test the connection to ensure it works

2. Create a Learning Plan

• Select a topic from popular options or enter a custom topic
• Set your learning preferences (time commitment, style, level)
• Let AI generate a personalized study plan

3. Start Learning

• Use the dashboard to track your progress
• Continue lessons from where you left off
• Ask the AI assistant questions during lessons
• Take quizzes to test your understanding

4. Track Progress

• Monitor completion rates on the dashboard
• View detailed chapter and lesson progress
• See time estimates and achievements

Technology Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• AI Integration: Multiple providers with unified API
• Markdown: ReactMarkdown with GitHub Flavored Markdown
• State Management: React hooks and context

Project Structure

├── app/                    # Next.js app directory
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Main application flow
│   └── globals.css        # Global styles
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── api-configuration-page.tsx
│   ├── topic-selection-dashboard.tsx
│   ├── learning-preferences-wizard.tsx
│   ├── study-plan-generator.tsx
│   ├── home-dashboard.tsx
│   ├── chapter-management.tsx
│   ├── interactive-lesson.tsx
│   └── lesson-quiz.tsx
├── lib/                   # Utility libraries
│   ├── api-service.ts     # AI provider integrations
│   └── utils.ts          # Helper functions
├── hooks/                 # Custom React hooks
│   └── use-api-credentials.ts
├── types/                 # TypeScript type definitions
│   └── index.ts
└── contexts/             # React contexts
    └── learning-context.tsx

Features in Detail

AI Provider Integration

The platform supports multiple AI providers through a unified interface. Each provider has specific configurations and authentication methods, but the user experience remains consistent.

Personalized Study Plans

AI generates comprehensive study plans based on:

• Selected topic and focus areas
• Daily time commitment preferences
• Learning level (Beginner/Intermediate/Advanced)
• Teaching style preferences (Visual/Hands-on/Theoretical/Mixed)

Interactive Learning

• Lesson Content: AI-generated, comprehensive lessons with proper markdown formatting
• Timer System: Automatic timing based on estimated lesson duration
• Chat Assistant: Real-time AI help with context awareness of current lesson
• Progress Tracking: Scroll-based progress indicators and completion tracking

Quiz System

• AI-generated questions based on lesson content
• Multiple choice and true/false question types
• Immediate feedback with detailed explanations
• Retry functionality for improved understanding

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions:

1. Check the troubleshooting section below
2. Review the API provider documentation
3. Create an issue in the repository

Troubleshooting

Common Issues

API Connection Failed

• Verify your API key is correct and has sufficient credits
• Check if the API key format matches the provider requirements
• Ensure you have internet connectivity

Lesson Content Not Loading

• Check your API provider's rate limits
• Verify the API key has the necessary permissions
• Try switching to a different AI provider

Chat Not Working

• Ensure the AI provider supports chat completions
• Check if you've exceeded API rate limits
• Verify the API key is still valid

Performance Tips

• Use Groq for fastest response times
• DeepSeek offers good balance of speed and quality
• OpenAI GPT-4o provides the highest quality responses
• Consider your API costs when choosing providers

Roadmap

• User authentication and profiles
• Progress persistence across sessions
• Social learning features
• Mobile app development
• Advanced analytics and insights
• Integration with external learning platforms
• Collaborative learning features
• Offline mode support

ai-learning