ML/AI
Build a GPT-3 app: How I used GPT-3 to make gifting easier
Sahil
•
Dec 18, 2022
GPT-3 has the potential to revolutionize how we interact with computers. The plethora of apps that will flood the markets over the coming years is unfathomable. From education, healthcare, finance, business, the possible use cases can be applicable to almost every domain.
I am someone who learns by building. To truly incorporate my learnings from the AI Writer project, I decided to build something that would help me at a personal level. I am terrible at giving gifts — I always have a difficult time knowing what to get my friends or family, and am often running around till the last minute trying to find something memorable. To solve this, I built Gifthub.
Gifthub is a gift ideas generator powered by GPT-3. Now, instead of asking someone for advice, I can answer a few questions regarding the person's interests, hobbies, gift type, and get a bunch of unique gift recommendations.
🎄
Try to generate some gift ideas for Christmas!
Go to Gifthub, answer a couple questions about the person, and experience the magic yourself!
Cool, right! Well, it was pretty simple to build. In this note, I'll cover everything I did. By the end, you should be able to build other similar apps or websites that use GPT-3. Some examples of what you could build after this note:
Music recommendations app
Recipe app based on person's diet restrictions
Travel concierge that recommends you places to visit based on your interests
Chatbot
Truth or dare generator
The possibilities are endless. Have fun and enjoy the process.
So a quick overview of everything we'll talk about:
Frontend setup (Next.js + Chakra UI)
Setting up OpenAI account
Building the form UI
Calling the API from our web app
Displaying results
Let's get started!
Frontend Setup
The first step is to download the starter code here. The starter code contains some boilerplate of basic UI and the list of all the dependencies needed. Clone the repository and open the folder in VS Code or any other code editor you choose.
In your terminal of preference or within VS Code terminal, enter the following command to install all dependencies.
npm install
To run your web app, enter the following command:
npm run dev
Cool! You're up and running. If you don't see the following screen, revisit the above again.
GG, that completes the first step, now time to forge ahead to the next one.
Set up an OpenAI account
You’ll need to make a free Open AI account in order to access GPT-3. It also gives you access to some free credits which you can use when you're experimenting.
🛠 OpenAI provides an excellent playground to help understand the GPT-3 API. This is where we’ll spend most of our time.
Go ahead and sign up for a free OpenAI account here (or log in if you already have an account.
Then, navigate to the playground.
First time using OpenAI playground? Check out this note to get a better understanding of prompts!
🤖 GPT-3 & Prompts: A Quick Primer
Read this note to learn more.
Back to the note.
Hover over your profile and click on 'View API Keys'.
Once you're there, click on 'Create new secret key' and copy this key.
Create an .env file in the root folder of your project and copy paste your secret key in this file in the following format.
API_KEY = "<YOUR API KEY HERE>"
Constructing the magic spell
Now comes the time to reveal our magical spell – the prompt.
Suggest 10 expensive gifts for a friend who has an interest in football, harry potter, and anime.
Head over to the Open AI API playground and try out this prompt.
Try changing the type of gift and interests of the person and see the different results that you get.
🏆
Show us what you got!
Here's what I got!
Incredible! We can see that the prompt is doing exactly what we intended. We can continue to refine this prompt till satisfied with the results. In my case, I decided to use this and move forward.
Building the form
Open index.js file in the pages folder.
Add the code for UI of the form inside the <Main> element.
I have already created a textbox for you to input the interests of the person and a radio button to select the type of gift you want.
We're intentionally not allowing you to copy/paste code. 😈
Now, create a state to store the interests given as input by the user and an inputInterest function which will set the state every time the user gives an input.
Similarly, create a state and inputType function to store and set the type of gift selected by the user.
Create a handleSubmit function.
This will will be called when the submit button is clicked. This function will send a POST request to /api/suggest route and store the response.
The modified function will now look as follows.
With the help of useEffect hook, set the loading state to false as soon as the result state has been set.
Your index file should be complete now.
If you are stuck or are facing blockers, reach out and I can help you!
Calling the API
Create suggest.js file in API folder located inside the pages folder.
We’ll be using OpenAI NPM module to make the API calls.
Import the following functions from the module.
Configure the API with the secret key you copied from earlier.
Create a getSuggestions function which will take the prompt as an argument and return the response text it gets from API. The response is in string format, so we'll have to parse it as JSON.
Great. Now we have to create the request handler function.
Whenever a request is made to /api/suggest route, this function will be called. The function will insert the interests and type of gift from the body of the request into the template prompt and construct the final prompt.
This prompt is then passed as an argument to getSuggestions function and the function will return an array of gift suggestions.
Finally, this array is sent as a response to the client side.
Displaying the results
The response that we get has been stored in the result state in the form of an array of gift suggestions. We can loop through each of the suggestions using map function and display them.
Challenge: figure out where the following code needs to go 😉
Again, if you are blocked after this step, reach out and I can help you! Also, brush up on your JS skills bruv.
Our app should now be complete. Let’s test whether our app is working properly!
Perfect! There are so many ways to extend this yourself. I also highly encourage you to build some complex prompts and take this further.
Good luck!
– Sahil
Keep on extending.
This is just scratching the surface. There's so much to dig here as you understand GPT-3 better and countless ways to extend this yourself. You can create copy helper like CopyAI or Jasper, essay writers, TL;DR bots, tweet generators and so much more. I highly encourage you to build some complex prompts and take this further.
Good luck!
– Sahil
🏆
Building something great? Show us.
PS. want to take your skills to the next level?
Your understanding of prompts will help you interact better with GPT-3. We have create a full weekend project for you to explore this by building your own AI writing assistant!
