Build an AI Quiz Generator with OpenAI: Step-by-Step Tutorial Part 1

In this tutorial, we’re going to build an AI-powered Quiz Generator using OpenAI’s language models and Next.js. This tool will allow users to upload content—like a PDF document—and automatically generate quiz questions based on that content. The questions will have multiple-choice options, correct answers, and difficulty tags, all formatted in JSON.

First, educators provide the content in PDF format, our application uploads the file to the OpenAI storage, provides the File ID, and we use prompt engineering and provide the file ID as context so LLM can generate questions provide Questions, their options, answers, and difficulty tag (easy, medium, hard)

On the student's end, we render the questions JSON, the user interacts with the options, and depending on the answer, we provide feedback, grade the answer, and send the grade to our API. In this article, we build the Eduactor piece, and for the Student, we implement the rendering and showing answers, and in the next article, we work on the Feedback and grading part.

Open your Command line interface and run the following command npx create-next-app@latest

After installation is done, in the command line, change the directory cd quiz-generator and run npm run dev

Visit Localhost. You should see something like the following

Let's install the OpenAI API Library. In the command prompt, run the following npm install openai

Go to the OpenAI site and on the left sidebar, get an API key. Copy the key and in the root of the project, create a .env file, and add OPENAI_API_KEY="YourKey" to it.

In this project, we are going to use DaisyUI as our TailwindCSS component library. Open the command prompt and run the following to install DaisyUI npm i -D daisyui@latest

Now open the app/global.css and replace its content with the following

The last step before we move to building our UI component is installing react-hot-toast by running npm i react-hot-toast

For our UI, we will use DiasyUI Lifted Tab Component. The First Tab will be Educator, and the next tab will be Student.

In the app folder, create a new directory called components, and inside it, create Dashboard.tsx

Now in the app/page.tsx Replace the content with the following

Next, replace the app/layout.tsx content with the following

Run the Next.js development environment and visit localhost:3000 in your browser, and you should see something like the following

The next step is adding an upload file button that receives a file and shows a toast message to the user. We will wire this up later on with the API route, but for now, let's only build the UI. In the Dashboard.tsxWe replace Tab content 1 With a file input component, replace it with a file input element and add a change handler to it

Now let's provide a sample set of questions and build our UI component for question rendering. In the project root Create a new folder called data, and inside it add questions.js

Next, in the components folder, create a new file called Quizzes.tsx

And in the Dashboard.tsx import Quizzes and replace Tab content 2 with

First, let's create a function that receives a file and uploads it to the OpenAI storage. We import this file into our API route to use on a POST call. Since the OpenAI Files API only accepts readStream format, this function:

In the app directory, let's create a new folder called utils and inside it create a file called uploadFile.tsx

Next, in the project root, create a directory called lib and openai.ts in it

Let's create an endpoint that receives a file and use the uploadFile function to upload the file to the OpenAI storage. In the app directory, create api/upload-file and route.tsx in it

Now in the Dashboard.tsx change the handleFileChange function to send the file to our API, and set the response as fileID state

Let's convert the Wikipedia Page about Large Language Model to PDF and upload that to the storage

Since we want to generate questions in a structured JSON format, it’s essential to be clear and specific in our prompt.

To master prompt engineering techniques, read our Definitive Guide to LLM Prompt Engineering

Let's create a function that defines the schema of the response we want to receive back from the LLM and pass the prompt and file ID to the OpenAI model to generate our questions. In the utils create questionsGenerator.tsx with the following content

Now let's modify our route to use this function and send back the generated questions to our UI, in the api/upload-file/route.tsx Replace the route with the following

Now we should change both of our components to receive and process questions in the Dashboard.tsxWe want to create a new state that receives the questions from the API and passes them as props to the Quizzes.tsx, in the Dashboard.tsx

And in the Quizzes.tsx We define a props and remove our predefined questions data

The last step before we give it a try is installing Zod since we are using it to define the model response schema. In the command line interface, run npm i zod

Now let's give it a try

Congratulations! 🎉 You’ve successfully built an AI-powered Quiz Generator using OpenAI and Next.js. In this tutorial, we covered:

You can find the Github Repo here

In the AI Quiz Generator Part 2, we’ll enhance the student experience by implementing:

These features will complete the learning loop, turning your quiz generator into a full-fledged educational tool.

Stay tuned, and happy coding! 🚀