Vibe Coding for Teachers: Create Educational Apps with the Help of AI

A few months ago, I discovered that ChatGPT can generate code for web applications. It is handy for teachers, as we can create interactive educational applications tailored to our needs and those of our students. Vibe coding is a new approach to software development, where users describe the application and functionality they want in natural language through a prompt; subsequently, Artificial Intelligence (AI) generates the programming code in response to that request. This is possible thanks to the training of Large Language Models (LLMs) such as ChatGPT, Gemini, Claude, among others. In this article, I share various types of educational apps that teachers create, the pedagogy behind these apps, and a guide to building your first educational web app using LLMs.

To create my first educational web application, I kept in mind a concept that is often difficult for my students to grasp in the quantitative research course I teach: the concept of standard deviation. Therefore, I prompted ChatGPT to do the following: “Generate an HTML application for my students to understand the concept of standard deviation. The application should allow the capture of five numbers. In real-time, students should be able to change the value in each box, and the mean and standard deviation values will automatically be updated. Simultaneously, the app should produce a graph with the five numbers visually showing the mean and standard deviation.”

When I opened the application in my browser and saw that it worked, I was excited to consider the possibilities this implies for my educational practice.

This application made it easier for my students to understand the concept of standard deviation. On their computers, they could change the values of the variable and graphically observe that as the input values became more dispersed, the standard deviation increased in value. In my Educational Technology classes, I have also taught how LLMs can be used to create educational applications. I have identified several educational purposes for teachers to integrate these self-made apps.

Types of educational apps that teachers create

Here are some examples of educational applications created by teachers in different educational contexts. In all cases, the key is to align each app with a specific learning purpose, design meaningful interactions, and ensure helpful feedback for the student.

• Multiple-choice quizzes. Although many applications already allow you to transform your class content into multiple-choice activities with automatic feedback (such as multiple-choice questions, matching columns, and sorting lists), using an LLM makes customization even easier. For example, I recently transformed my midterm exam into a pre-review quiz simply by using a prompt that attached the exam file and indicated the number and types of items I wanted to include.

• Gamification and micro-challenges: Some students and colleagues have created applications to gamify the classroom. Typical elements include accumulating points and setting incentive goals, progress levels with clear objectives, counting attempts, characters, narratives, badges, optional time limits, and performance-adjusted rewards. These tend to promote extrinsic motivation, a sense of accomplishment, and goal setting.

• Simulators for conceptual understanding: Virtual simulators promote the awareness of cause-and-effect relationships and underlying models by manipulating variables and observing results. It aids, for example, in understanding concepts such as speed, buoyancy, and gravity. The interaction includes comparing scenarios, visualizing effects, and developing hypotheses and conclusions. Quality is reflected in the legible visualizations, didactically significant variables, and supporting evidence that help move from observation to explanation.

• Digital guided practice and problem-solving: These applications are designed to accompany the student in the gradual knowledge acquisition of a complex procedure. They combine support and automatic assessment. An example is an academic writing app that assesses and evaluates paragraphs: the student receives opening sentences, composes in a text box, and submits their response to get feedback from a model like Gemini (since Gemini allows you to integrate your own language model within the apps you create). The quality of this type of app is reflected in clear justifications that explain each correction made.

The pedagogy behind the educational apps used in the classroom

Learning with apps involves rapid cycles of action, response, and adjustment. Designing short tasks that require a response before moving forward and providing feedback that explains the reason for the correct or incorrect answer is key to sustaining students’ attention and promoting understanding. Below are some notes about different learning paradigms.

Learning paradigms

• Behaviorist paradigm. The behaviorist paradigm emphasizes dividing learning into small steps with a high success rate. In apps, this translates into active practice where each response generates immediate and differentiated feedback. Positive reinforcements such as badges, points, or unlocking new levels maintain motivation; adaptive algorithms adjust the difficulty to balance challenge and success, ensuring steady progression (Skinner, 1954; Skinner, 1968).

• Constructivist paradigm. Constructivism posits that students construct meanings by manipulating variables, testing hypotheses, and observing the effects. Apps support this process by offering guided exploration environments that stimulate discovery and provide clues that guide the search for productive explanations. In addition, meaningful learning occurs when new content is linked to previous knowledge through examples, organizers, or contextualized simulations (Piaget, 1970; Bruner, 1960; Bruner, 1961; Ausubel, 1968).
  • Within the constructivist tradition and science didactics, the prediction, observation, and explanation (SOP) sequence aims to spotlight previous conceptions and promote conceptual change in three phases. The app first asks for a brief prediction, then displays a simulation with precise data, and finally requests that you compare and explain the results. This cycle activates metacognition, making it easier for students to confront their initial ideas with evidence. Meanwhile, cognitive conflict is a motor for conceptual restructuring (White & Gunstone, 1992; Driver & Posner, 1985).

• Sociocultural approach. Finally, from a sociocultural perspective, learning progresses through supports in the zone of proximal development; these are gradually withdrawn as competency increases. Apps can offer performance-adjusted clues, and LLMs can tailor help to the student’s level of autonomy. Additionally, incorporating collaborative functions facilitates the construction of shared meanings and collective scaffolding within learning communities (Vygotsky, 1978).

Create your first educational app with AI

Now that you know some educational applications and their pedagogical justifications, I would like to share a brief guide on building your first educational application using Generative Artificial Intelligence (AGI). By sharing these steps, you are inspired to take a moment in your next free time to experiment in the LLM of your choice.

Step zero. Since many valuable applications are available on the web, I recommend consulting ChatGPT first to describe the application you require, including its functionalities. I have found interesting applications that already exist for my practice. Additionally, by reviewing the websites or apps referred to you, you may identify more suitable functionalities that support your needs, allowing you to create a better application for you and your students.

Here are the recommended steps to create your first educational app.

Steps to create your first app to integrate into your classroom

1. Think about pedagogical intent. Do you want your students to understand a difficult concept? Do you want to motivate your students with incentives? Do you want students to receive feedback from a specific interaction?
2. Select the appropriate model. LLMs typically offer two options: Fast Mode and Reasoning Mode. Select the Reasoning option to make the LLM take more time and thus provide a better answer. If you don’t have an LLM subscription, a good alternative is to use Google AI Studio, a Google platform that allows you to utilize its models for free.
3. Select the Canvas option. At least ChatGPT and Gemini include this option so that the code is presented in a window within the response.
4. Type the prompt. When you’re a beginner, I recommend asking the LLM to provide you with the information it needs to provide a better answer. For example, a good initial prompt would be: “I want to generate an educational app for [app feature]. Ask me questions about what you need to know to create the app. Ask me a question, wait for my answer, and continue like this until you’ve asked all the necessary questions.”
5. Run the code to build your app. Once you have the response with the code, sometimes you can “run” it directly on the same platform if you have enabled the Canvas option. However, some features can’t be displayed correctly in that space. Therefore, copy all the code that the LLM produced and paste it into a new text document on your laptop. Save the document with the .html extension. Be sure to type everything in quotation marks so the browser reads it as an app. It would look like this: ‘”name_of_the_app.html”‘.
6. View the app. Once you have the .html file, open it in your web browser (e.g., Chrome, Firefox, Explorer). It will enable you to see your application up and running.
7. Check the app’s overall operation. It is possible that some element or interaction does not work as expected, or you do not like it. In this case, go back to the LLM and instruct it to make the necessary modifications. Repeat this step until your desired application is working correctly.

Intermediate and Advanced Steps

LLMs can provide you with the code you requested, but can’t directly link to databases or other applications. The most sophisticated applications integrate different applications, databases, networks, user profiles, and more. The more features an app has, the more it becomes almost impossible for an intelligent adaptive guide (IAG) to handle everything with a single prompt. However, if you dare to make applications, you will find that by asking ChatGPT, you can make these integrations. Additionally, some apps create other apps that facilitate this process, such as Replit or Lovable.

Either way, the LLM itself can suggest solutions to integrate simple databases and even an IAG into your application. For example, you can ask your app to save data in a JSON file (a text file for saving structured data) that you can save to your laptop (or other device) and display the data when you upload it. Also, in Gemini, when generating an app code using the Canvas feature, you can click the bottom-right button to integrate an IAG within your app. Thus, you can create an application that provides automatic responses in text, which is very useful for giving specific feedback to your students.

Of course, the IAG does not replace teachers but enhances their creativity and expands how they support students in their learning. Every programming experience with an LLM is, simultaneously, a pedagogical design experience, in which the important thing is not technical sophistication, but the clarity of the educational purpose.

When you create your educational application, I would love to learn about it and understand how you have integrated it into your teaching practice. Let’s get to work!

About the Author

Josemaría Elizondo (josemariaelizondo@tec.mx) is a postdoctoral researcher in Educational Innovation at Tecnológico de Monterrey. His research focuses on Educational Technology and Sociocultural Studies in Education. He has taught for over 15 years at various educational levels, from primary to postgraduate education.

References

Ausubel, D. P. (1968). Educational psychology: A cognitive view. Holt, Rinehart & Winston.

Bruner, J. S. (1960). The process of education. Harvard University Press.

Bruner, J. S. (1961). The act of discovery. Harvard Educational Review, 31(1), 21–32.

Driver, R., & Posner, G. J. (1985). An attempt to formulate a constructivist theory of knowledge. In R. Driver, E. Guesne, & A. Tiberghien (Eds.), Children’s ideas in science (pp. 66–106). Open University Press.

Piaget, J. (1970). Psychology and pedagogy. Viking Press.

Skinner, B. F. (1954). The science of learning and the art of teaching. Harvard Educational Review, 24(2), 86–97.

Skinner, B. F. (1968). The technology of teaching. Appleton-Century-Crofts.

Vygotsky, L. S. (1978). Mind in society: The development of higher psychological processes. Harvard University Press.

White, R., & Gunstone, R. (1992). Probing understanding. Falmer Press.

Editing

Edited by Rubí Román (rubi.roman@tec.mx) – Editor of the Edu bits articles and producer of The Observatory webinars- “Learning that inspires” – Observatory of the Institute for the Future of Education at Tec de Monterrey.

Translation

Daniel Wetta

Josemaría Elizondo García

Share

This article from Observatory of the Institute for the Future of Education may be shared under the terms of the license CC BY-NC-SA 4.0