StudyPal: Your AI-Powered Personalized Learning Companion

Introduction

As students navigate the complexities of modern education, they encounter diverse challenges, from grasping complex concepts to effective time management. Traditional learning resources often fail to address individual needs and learning styles. StudyPal steps in as a dynamic and adaptive solution, leveraging the latest AI and machine learning advancements to deliver personalized learning experiences.

The StudyPal Experience

Subject Selection and Personalization

Upon accessing StudyPal, students choose their desired subject from a curated list, setting the stage for a personalized learning journey. They provide details about their educational background, enabling StudyPal to tailor materials and exercises to their current knowledge level. An "Additional Details" section allows students to specify focus areas, ensuring content alignment with their learning objectives.

Intelligent Study Material Generation

StudyPal's AI-powered engine generates concise and comprehensive study materials tailored to the selected subject. These materials distill core concepts into key points for quick review and reinforcement. A chat feature provides detailed explanations for further clarity.

MCQ Practice with AI-Powered Assistance

StudyPal offers an interactive MCQ practice module for practical application of knowledge. CopilotKit's AI copilot provides contextual guidance during practice sessions, fostering independent thinking and problem-solving skills.

Unveiling the Rationale: Deeper Understanding

Students can delve deeper into subjects by querying the AI copilot for detailed explanations and rationales behind each answer choice. This interactive feature promotes critical thinking and analysis.

Progress Tracking and Scoreboard

StudyPal incorporates a comprehensive scoreboard for real-time progress monitoring and performance measurement. Immediate feedback empowers students to identify areas for improvement and celebrate achievements.

Real-World Use Cases for StudyPal:

Classroom Supplement:
StudyPal can be integrated into traditional classroom settings to supplement teacher-led instruction. Students can use the platform to review key concepts, access additional study materials, and reinforce their understanding of topics covered in class. Teachers can also leverage StudyPal to provide personalized assistance and support to students with varying learning needs.
Remote Learning Support:
With the rise of remote and hybrid learning models, StudyPal can serve as a valuable tool for students and educators alike. Students can access StudyPal from anywhere with an internet connection, allowing them to continue their studies outside of the classroom. Educators can use StudyPal to facilitate remote tutoring sessions, provide feedback on student assignments, and track student progress in real-time.
Exam Preparation:
StudyPal can be used as a comprehensive exam preparation tool for standardized tests, entrance exams, and certification exams. Students can utilize the platform to review study materials, practice exam-style questions, and receive personalized feedback and guidance from the AI copilot. StudyPal's adaptive learning capabilities can help students identify areas of weakness and focus their study efforts where they are needed most.
Professional Development:
Beyond academic learning, StudyPal can also support professional development initiatives for individuals in various industries. Professionals can use the platform to brush up on industry-specific knowledge, prepare for professional certification exams, and enhance their skills in areas such as project management, data analysis, or programming languages. StudyPal's personalized learning approach can help professionals stay competitive in their fields and advance their careers.
Special Education Support:
StudyPal can be adapted to meet the needs of students with diverse learning abilities, including those with special education requirements. Educators can customize StudyPal's learning materials and exercises to accommodate different learning styles, provide additional support for students with learning disabilities, and offer alternative assessment methods such as interactive quizzes or multimedia presentations. StudyPal's AI copilot can also provide targeted assistance and accommodations for students who require extra support.
Language Learning and ESL Support:
StudyPal can be used as a language learning platform for students learning a new language or seeking to improve their English language skills. Students can access StudyPal's language-specific study materials, practice vocabulary and grammar exercises, and engage in conversation practice with the AI copilot. StudyPal's adaptive learning features can help students progress at their own pace and tailor their language learning experience to their individual needs and goals.

StudyPal's Tech Stack

Frontend

StudyPal's frontend is meticulously crafted using React, a renowned JavaScript library celebrated for its ability to create captivating user interfaces. Leveraging React's component-based architecture and virtual DOM, StudyPal ensures a seamless and responsive user experience, even when handling complex UI elements and real-time updates.

UI Design:

The user interface for our project was designed and developed in-house using Tailwind. If you wish to develop a similar project, you can either create your own UI or utilize the UI from our GitHub repository.

Copilotkit Implementation:

To integrate Copilotkit, components are wrapped with <Copilotkit> and </Copilotkit> tags. The backend URL is provided within these tags. Here's an example of how Copilotkit is implemented for the MCQ section of the project:

const PracticeMCQ = () => {
    return (
        <>
            <CopilotKit url="http://localhost:3000/api">
                <McqQns />
            </CopilotKit>
        </>
    )
}

To facilitate AI-powered assistance during MCQ practice sessions, StudyPal integrates the <CopilotPopup/> component from CopilotKit. This component provides a chat interface where students can request MCQ questions and hints without revealing the full answer.

<CopilotPopup
  instructions={instructions}
  defaultOpen={false}
  labels={{
    title: "StudyPal Copilot",
    initial: "Hi there! 👋 You can ask me to generate personalized MCQ questions and hints.",
  }}
  clickOutsideToClose={false}
/>

To manage hint displays, StudyPal utilizes both the useCopilotAction and useMakeCopilotReadable hooks from CopilotKit. The former enables the application to define custom actions triggered by user input in the chat interface, while the latter ensures that the code segments are readable to Copilot.

const [hintsShown, setHintsShown] = useState(new Array(questions.length).fill(false));
useMakeCopilotReadable(
    "This is the current value of hintsShown usestate to show hints to questions: " + JSON.stringify(hintsShown)
);

useCopilotAction({
  name: "updateHintsShown",
  description: "Show or hide hints by updating the hintsShown state based on user requests for hints.",
  parameters: [
    {
      name: "showHint",
      type: "boolean",
      description: "Show or hide hints."
    },
    {
      name: "indexNo",
      type: "number",
      description: "Index number of the question for which the hint should be shown or hidden."
    }
  ],
  handler: async ({ showHint, indexNo }) => {
    const newHintsShown = [...hintsShown];
    newHintsShown[indexNo] = showHint;
    setHintsShown(newHintsShown);
    if (!hintUsed[indexNo]) {
      hintUsed[indexNo] = showHint;
    }
  },
  render: "Updating hints..."
});

Additionally, MCQs are loaded with options, but initially, no hints are displayed. However, upon requesting assistance from Copilot, hints are dynamically generated below each question. This approach ensures that students can interactively receive hints tailored to their specific questions. Here's the example:

const [questions, setQuestions] = useState([{}]);

useMakeCopilotReadable(
    "This is the questions with their options, hint and answers: " + JSON.stringify(questions)
);

useCopilotAction({
    name: "newQuestions",
    description: "Provide questions based on conditions given. If number of questions are not specified provide 10 of them. Do not tell questions and options in chat.",
    parameters: [{
        name: "items",
        type: "object[]",
        description: 'The new questions.',
        attributes: [
            { name: "question", type: "string", description: 'The MCQ questions.' },
            { name: "option1", type: "string", description: "One of the four options and only one of them is correct." },
            { name: "option2", type: "string", description: "One of the four options and only one of them is correct." },
            { name: "option3", type: "string", description: "One of the four options and only one of them is correct." },
            { name: "option4", type: "string", description: "One of the four options and only one of them is correct." },
            { name: "hint", type: "string", description: "Hint to the question." },
            { name: "answer", type: "string", description: "Correct answer among available options." }
        ],
    }],
    handler: async ({ items }) => {
        // { question, option1, option2, option3, option4, hint, answer }
        const newQuestions = items.map(item => ({
            question: item.question,
            options: [item.option1, item.option2, item.option3, item.option4],
            hint: item.hint,
            answer: item.answer
        }));
        setQuestions(newQuestions);
        setShowQuestion(true);
        setHintsShown(new Array(newQuestions.length).fill(false));
        setHintUsed(new Array(newQuestions.length).fill(false));
    },
    render: "Updating questions...",
});

The revision points are generated using the OpenAI API and are integrated with the chat using similar techniques as described above.

Backend

On the backend, StudyPal harnesses Node.js, a high-performing JavaScript runtime, coupled with Express.js, a lightweight web application framework. This combination enables efficient handling of server-side operations, including communication with the CopilotKit API and processing user requests.

The integration of CopilotKit serves as the backbone of StudyPal's AI capabilities. Acting as a bridge, CopilotKit facilitates seamless communication between the StudyPal application and potent language models like GPT-3.5. Through CopilotKit's APIs, StudyPal generates personalized study materials, context-specific hints, and detailed explanations, powered by cutting-edge advancements in natural language processing (NLP) and machine learning.

const HEADERS = {
  // Modify CORS headers to match your frontend's origin
  "Access-Control-Allow-Origin": "http://localhost:5173",
  "Access-Control-Allow-Methods": "GET, POST, OPTIONS, PUT, PATCH, DELETE",
  "Access-Control-Allow-Headers": "X-Requested-With,content-type",
};

// Use CORS for all routes
app.use(cors());

// Use express.json() to parse JSON bodies into JS objects
app.use(express.json());

// Define a route for POST requests to '/api'
app.post('/api', (request, response) => {
  try {
    const copilotKit = new CopilotBackend();
    const adapterOptions = {
      model: "gpt-3.5-turbo"
    };
    copilotKit.streamHttpServerResponse(request, response, new OpenAIAdapter(adapterOptions), HEADERS);
  } catch (err) {
    console.error(err);
    response.end("error");
  }
});

Development Practices

StudyPal's codebase follows the latest industry standards, making the development process smooth and efficient. With top-notch technologies such as React, Node.js, and CopilotKit, StudyPal showcases innovation in educational technology.

Wrap-up

StudyPal stands as a versatile tool reshaping traditional learning paradigms. Its integration of CopilotKit offers personalized and intelligent support across various contexts, from classroom enrichment to remote learning and exam preparation. Empowering both learners and educators, StudyPal represents the transformative potential of technology in education.

Demo

click-for-demo-video

Project Installation and Setup Guide

● Clone the Repository:

   git clone https://github.com/rajesh-adk-137/StudyPal.git

● Install Dependencies:

Inside frontend:
```
 npm install
```
Inside backend:
```
 npm install
```

● Set Up Environment Variables:
Add a .env.local file in the backend and insert your API key.

   OPENAI_API_KEY=sk-proj-*******************************

We have used gpt-3.5-turbo as our OpenAI model. If you want to use a different OpenAI model, change the model in backend\server.js.

   const adapterOptions = {
     model: "gpt-3.5-turbo"
   };

● Start the Development Server:

Setting up the frontend:
Setting up the backend:

● Visit the Page:
Open your browser and navigate to http://localhost:5173.

If your frontend is not running on http://localhost:5173 but some other URL, then you have to change the CORS address from backend\server.js. Inside HEADERS, you have to change the following line:
```
 "Access-Control-Allow-Origin": "http://localhost:5173",
```

● For more information about CopilotKit, visit the website: https://www.copilotkit.ai/.

● GitHub Link to the project:
https://github.com/rajesh-adk-137/StudyPal

Blog