The benefits of using ChatGPT to improve your app

With the rise of AI, it is impossible to deny its usability and ingenuity. Any developer, engineer, or entrepreneur today should be aware of the potential that AI has. Anyone ignoring and denying the convenience that AI brings to the table might find themselves falling behind in the near future. In my opinion, the best thing one can do is embrace it as a tool rather than fear it as something that might replace us in the workspace. I see it as a tool that can improve our efficiency at work, be useful in our everyday lives, and as a bonus - entertain us.

We will go through a simple example where I’ll show you how AI can give an edge to an application. We’ll first start with the initial app concept. Then, I will mention things that can be improved with the use of AI. Thirdly, we will go through the prompt design process. Lastly, I’ll show you the prompt coded in Javascript.

What is ChatGPT?

First of all, let’s define this AI tool.

The AI that we will be using is called ChatGPT. ChatGPT is an AI model trained to understand natural language and code. The model is being developed by OpenAI. Official OpenAI documentation defines GPTs as follows: 

”GPTs provide text outputs in response to their inputs. The inputs to GPTs are also referred to as "prompts". 

Designing a prompt is essentially how you “program” a GPT model, usually by providing instructions or some examples of how to successfully complete a task.

Quiz app

The application concept we will use to show you how to improve an application with ChatGPT is a regular quiz app. We will describe this app by user stories:

A user story is an informal, general explanation of a software feature written from the perspective of the end user. Its purpose is to articulate in what way a software feature will provide value to the customer.

So let's get started. We want the app to let us make quizzes: 

• the questions should have multiple-choice answers, 
• and we also want the app to grade our quiz after we take it.

In user story form, the requirements for our app will look like this:

Epic: As a user, I want an app that allows me to create quizzes.

User Story: As a user

• I want to be able to set questions of a quiz
• I want to be able to set possible answers of a quiz
• I want to be able to set the correct answers of a quiz
• I want to be able to save the quiz with set questions and answers
•  I want to be able to retake the saved quiz
• I want to get the results of the quiz upon finishing it

How to improve it

The first thing that comes to mind is to allow the GPT model generate the quiz. We would give it a subject and the number of questions we want and ask to obtain the quiz in the JSON format, and then handle it through our application. 

Now our requirements have changed to this:

Epic: As a user, I want an app that allows me to create quizzes

User Story: As a user

• I want to be able to set the subject of a quiz
• I want to be able to set a number of questions for a quiz
• I want to be able to generate a quiz for set parameters
• I want to be able to save the quiz
• I want to be able to retake the saved quiz
• I want to get the results of the quiz upon finishing it

These requirements might seem complicated, but ChatGPT will make the process a lot easier. You can already take quizzes with ChatGPT. You can also request it to quiz you on a certain topic - we tried it and it worked ok.

What we want is to always get consistent, formatted answers that we can rely on during the implementation process of our application. 

That's where prompt design comes through.

Prompt Design

A prompt can be defined like this:

“A prompt, sometimes referred to as context, is the text provided to a model before it begins generating output. It guides the model to explore a particular area of what it has learned so that the output is relevant to your goals. As an analogy, if you think of the language model as a source code interpreter, then a prompt is the source code to be interpreted.”

So prompt is basically the text we provide the AI model with. The model uses that text to formulate a response. The better and the more precise that text is, the better the response you’ll receive. The process of formulating such text is called prompt design.

What we will be doing next is formulating such text. There are already many techniques, rules, and guidelines for writing prompts all over the internet, so be sure to study the sources you find the most useful. 

ChatGPT works in such a way that it will do everything you order it to do, but also everything you don’t order it not to do. For example, if you write this: “Give me a list of the top 10 programming languages.”, it will give you a list as well as some extra explanation that you maybe didn’t ask for. Through Prompt design, we will be making sure that the prompt invokes the exact response we want without any extra stuff we don’t want. It is impossible to get a 100% reliable response - that would require of us to cover all of the negative cases. The best we can do is identify the most common mistakes the model gives us and cover them, which often results in a prompt that's reliable enough.

When designing our prompt, we will use the workflow described in the flowchart below.

The flowchart covers the three most common reasons why the prompt would fail and reminds us that the prompt should be thoroughly tested to ensure that it works reliably.

We can use OpenAIs ChatGPT implementation to help us write and test the prompt. Alternatively, if you have access you can use the OpenAI playground where you can even try out different models but that requires for you to be a paid user.

Based on our requirements, we want to give ChatGPT a subject and a number of questions and get a quiz in return. Today, the most common and popular data format in programming is JSON, so we will require ChatGPT to provide us a quiz in the JSON format. An exact example of the output we want is shown below:

We can see that our quiz is an array of question objects, where every question object contains an actual question field, a selection of possible answers, and the index of the correct one.

We now have requirements, examples of what we want ChatGPT to return to us, and a general workflow, so we can start with prompt engineering. For starters, we can just directly ask for what we want: 

Generate three questions on the subject of biology in JSON format.

Ok, we've got something!

But this format doesn’t suit us because we want multiple-choice answers.

Then we can type:

Generate an array of three questions on the subject of biology in JSON format. Generate four answers for each question.

That's better! Since we’ve got a set of answers, it would be better for us to just get the index of the correct answer.

So we can type the following:

Generate an array of three questions on the subject of biology in JSON format. Generate four answers for each question. Put the answers in an array. Give me the index of the correct answer for every question.

Everything is going smoothly, but have you noticed that the labels are inconsistent? Sometimes it says answers, and sometimes answer choices. That means that we need to specify a pattern for ChatGPT to follow. Also, it always presents us with some unnecessary text. So we need to simply tell it not to add additional text with the data we want.

Our prompt now looks like this: 

Generate an array of three questions on the subject of biology in JSON format. Generate 4 answers for each question. Put the answers in an array. Give me the index of the correct answer for every question. Give me just the JSON object, don't send any extra unnecessary text. Don't numerate the answers. Follow this pattern: [{ "question": "Some question?", "answers": ["Answer0", "Answer1", "Answer2", "Answer3"], "indexOfTheCorrectAnswer": 0 },{ "question": "Some question?", "answers": ["Answer0", "Answer1", "Answer2", "Answer3"], "indexOfTheCorrectAnswer": 2 },{ "question": "Some question?", "answers": ["Answer0", "Answer1", "Answer2", "Answer3"], "indexOfTheCorrectAnswer": 1 }....

We can see that the response from the prompt now matches the desired format. Now we have a solid prompt ready to be converted into code.

Code

Let us now code our prompt into Javascript code. We will take the number of questions and subjects as our input values. Depending on the number of questions, we programmatically make a pattern that we’ll append to the prompt. 

We are using the OpenAI API to send the prompt to ChatGPT. For more information about the API and examples of it, you can check the official OpenAI API documentation.

After we receive the reply, we can then take the text from the message and parse it to get a quiz Javascript object.

What do you get from leveraging ChatGPT?

Leveraging ChatGPT when building an app can benefit you in many ways. 

Firstly, by adding ChatGPT into the mix, you can minimize the time it would take to implement more complex features like quiz generation based on a random subject. 

Secondly, you can learn how to prompt ChatGPT better, that is, how to ask better questions to get more meaningful answers. 

Thirdly, it can give you a new set of skills since AI is a hot topic today and will be reflected in the future. You can learn how to correctly prompt it or integrate it into an application.

And lastly, it's just a fun thing to play around with. A quiz application like this won’t make you a millionaire (or maybe it will), but if you are an engineer at heart, it will be great fun making something like this. 

I encourage you to design a prompt of any kind by yourself, and if you know how to program by any chance, you can try to code it as well.

Hey, you! What do you think?

They say knowledge has power only if you pass it on - we hope our blog post gave you valuable insight.

If you want to share your experience with “enchanting” your own coding skills with ChatGPT, please feel free to contact us. 

We'd love to hear what you have to say!