@defikitdotnet/education-module-ai v0.1.22

Education Module - Udemy-like Platform for AI Agents

This education module provides a complete solution for AI agents to offer educational content in a Udemy-like interface. It provides two main components:

1. Teacher Interface: For creating and managing educational content using AI-driven content generation
2. Student Interface: For accessing and learning from the educational content with progress tracking

Features

Teacher Features

• AI-driven course generation
• Course, section, lecture, and quiz management
• Content editing and customization
• Progress monitoring for students

Student Features

• Course catalog with filtering and searching
• Learning interface with progress tracking
• Quiz taking with automatic assessment
• Course enrollment and completion tracking

Architecture

The module follows a modern architecture with:

• Express.js backend with proper middleware and routing
• SQLite database for development (can be replaced with PostgreSQL for production)
• React/Next.js frontend with TailwindCSS
• H5P integration for interactive content

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

cd education-module
npm install

3. Create a .env file with the following variables:

PORT=3008
AI_API_KEY=your-openai-api-key
JWT_SECRET=your-jwt-secret

Running the Development Server

Start the backend server:

npm run backend

Start the frontend development server:

npm run dev

API Documentation

Course Management

• GET /api/courses/public - Get all public courses
• GET /api/courses/agent/:agentId - Get all courses for an agent
• GET /api/courses/:courseId - Get a course by ID
• POST /api/courses - Create a new course
• PUT /api/courses/:courseId - Update a course
• DELETE /api/courses/:courseId - Delete a course

AI Content Generation

• POST /api/ai-content/generate-course - Generate a course structure
• POST /api/ai-content/generate-section/:courseId - Generate a section
• POST /api/ai-content/generate-and-save-course - Generate and save a course

Database Schema

The database includes the following main tables:

• agents: Represents the AI agents
• students: Stores student information
• courses: Stores course information
• sections: Stores section information
• lectures: Stores lecture content
• quizzes: Stores quiz information
• quiz_questions: Stores quiz questions
• enrollments: Tracks student enrollment in courses
• progress: Tracks student progress through lectures

Integration with AI CMS

This education module is designed to integrate with an AI CMS. When a user creates an AI agent and enables the education module:

1. The agent owner becomes the "teacher"
2. The teacher can access the education module interface
3. The teacher can create courses using AI-driven content generation
4. Students can access the courses through a separate student interface

H5P Integration

The module supports H5P content for interactive learning experiences. Teachers can create and embed H5P content in their lectures.

Integration with External Systems

The education module is designed to be integrated into external systems, providing a Udemy-like educational platform that can be embedded in any application.

Component Library Organization

The module now follows a comprehensive component library approach (Option 5), which provides multiple levels of abstraction:

1. Complete page components - Ready to use with minimal configuration
2. Container components - Handle data fetching and state
3. Presentational components - For custom UI assembly
4. Hooks - For custom logic implementation

This organization allows you to choose the level of control you need:

import {
  // Complete page components
  TeacherDashboardPage, StudentDashboardPage,

  // Container components that handle data fetching
  CourseListContainer, CourseContentContainer,

  // UI components for custom assembly
  CourseCard, H5PContent,

  // Context providers for state management
  EducationProvider,

  // Hooks for custom logic
  useCourses, useAuth
} from '@your-package/education-module';

Integration Options

Option 1: Use Complete Page Components

The easiest approach - just mount the pre-built pages:

import { EducationProvider, TeacherDashboardPage } from '@your-package/education-module';

function App() {
  return (
    <EducationProvider apiBaseUrl="/api/education" isTeacher={true}>
      <TeacherDashboardPage />
    </EducationProvider>
  );
}

Option 2: Use Container Components

For more control over layout while delegating data fetching:

import { EducationProvider, CourseListContainer } from '@your-package/education-module';

function CoursesPage() {
  return (
    <EducationProvider apiBaseUrl="/api/education">
      <div className="custom-layout">
        <h1>My Courses</h1>
        <CourseListContainer 
          showEnrolled={true} 
          onCourseClick={(courseId) => console.log(courseId)}
        />
      </div>
    </EducationProvider>
  );
}

Option 3: Use Individual Components and Hooks

For complete control over UI and data flow:

import { useAuth, useCourses, CourseCard } from '@your-package/education-module';

function CustomCourseList() {
  const { courses, loading } = useCourses({ showPublic: true });
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <div className="custom-grid">
      {courses.map(course => (
        <CourseCard 
          key={course.id} 
          course={course} 
          onClick={() => handleCourseSelection(course)}
        />
      ))}
    </div>
  );
}

Option 4: Using the Initialization Helper

For consistent configuration across components:

import { initializeEducationModule, EducationProvider, TeacherDashboardPage } from '@your-package/education-module';

function App() {
  const educationModule = initializeEducationModule({
    apiBaseUrl: '/api/education',
    agentId: 'agent-123',
  });
  
  const teacherView = educationModule.createTeacherView();
  
  return (
    <EducationProvider {...teacherView.config}>
      <TeacherDashboardPage />
    </EducationProvider>
  );
}

Backend Integration

To integrate the backend API into your system:

// Import the initialize function
import { initializeEducationAPI, mountEducationAPI } from '@your-package/education-module/backend';
import express from 'express';

// Option 1: Create a standalone API
const app = express();
const educationAPI = await initializeEducationAPI({
  port: 3008,
  apiPrefix: '/api/education',
  dbPath: './data/education.sqlite',
  jwtSecret: process.env.JWT_SECRET,
  aiApiKey: process.env.OPENAI_API_KEY
});

// Mount the API on your Express app
app.use('/education', educationAPI);

// Option 2: Use the helper function for mounting
const app = express();
await mountEducationAPI(app, '/education', {
  dbPath: './data/education.sqlite',
  jwtSecret: process.env.JWT_SECRET
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Frontend Integration

To integrate the frontend components into your React application:

import { 
  EducationModule, 
  TeacherDashboard, 
  StudentDashboard,
  CourseViewer,
  CourseCreator,
  H5PEditor,
  CourseCard 
} from '@your-package/education-module/frontend';

// Option 1: Use the complete education module
function App() {
  return (
    <div className="app">
      <EducationModule 
        apiBaseUrl="/api/education"
        agentId="agent-123"
        isTeacher={true}
        theme="light"
      />
    </div>
  );
}

// Option 2: Use standalone components
function CourseCatalog() {
  const courses = [/* Your courses */];
  
  return (
    <div className="catalog">
      {courses.map(course => (
        <CourseCard 
          key={course.id}
          course={course}
          onClick={() => handleCourseClick(course)}
        />
      ))}
    </div>
  );
}

// Option 3: Use specialized dashboard components
function TeacherApp() {
  return <TeacherDashboard apiBaseUrl="/api/education" />;
}

function StudentApp() {
  return <StudentDashboard apiBaseUrl="/api/education" />;
}

// Option 4: Course viewer/editor components
function ViewCourse({ courseId }) {
  return <CourseViewer courseId={courseId} apiBaseUrl="/api/education" />;
}

function EditCourse({ courseId }) {
  return <CourseCreator courseId={courseId} apiBaseUrl="/api/education" />;
}

Configuration Options

Backend Configuration Options

Frontend Configuration Options

Working with Data Models

The education module exports TypeScript interfaces for all data models:

import { 
  Course, 
  Section, 
  Lecture, 
  Quiz, 
  QuizQuestion,
  Student,
  Enrollment
} from '@your-package/education-module/frontend';

// Use the interfaces in your code
const courseData: Course = {
  id: 'course-123',
  title: 'My New Course',
  description: 'A comprehensive course',
  // ...other required fields
};

Using H5P Content

The education module includes components for creating and displaying H5P content:

import { H5PEditor, H5PContent } from '@your-package/education-module/frontend';

// H5P Editor component
function CreateH5PContent() {
  return <H5PEditor apiBaseUrl="/api/education" />;
}

// H5P Content viewer
function ViewH5PContent({ contentId }) {
  return <H5PContent contentId={contentId} apiBaseUrl="/api/education" />;
}

AI-Powered Content Generation

The module provides components for AI-generated educational content:

import { 
  AICourseGenerator, 
  AIQuizGenerator 
} from '@your-package/education-module/frontend';

// Generate a course with AI
function GenerateCourse() {
  const handleGenerated = (course) => {
    console.log('Generated course:', course);
  };
  
  return (
    <AICourseGenerator 
      apiBaseUrl="/api/education"
      onGenerated={handleGenerated}
      topic="Machine Learning Basics"
    />
  );
}

// Generate a quiz with AI
function GenerateQuiz() {
  const handleGenerated = (quiz) => {
    console.log('Generated quiz:', quiz);
  };
  
  return (
    <AIQuizGenerator
      apiBaseUrl="/api/education"
      onGenerated={handleGenerated}
      content="Introduction to React hooks and their usage patterns"
    />
  );
}

License

MIT