GPT-3 was released by OpenAI in 2020. Since then it’s been the best model in language generation. This means the texts it outputs sound more human-like than any other models.
The last update, "Davinci", was also trainied on social media, wikipedia and other media articles — which makes it fascinatingly "human-like". For the purpose of this note, this is exactly what type of data we will need. A thing to note is that it's not perfect and has many flaws, such as generating with other languages because it’s focused on english only.
Before we get started, there are a few basic things you'll need to be familiar with.
Make sure to understand the usage of the OpenAI API.
Also you should be familiar with other AI terms.
If not familiar, check out these notes first:
To demonstrate processing, we'll stick to JSON. JSON was made to make sending data between servers easier. It can be easily parsed to a JavaScript object, which has the same structure. A good attribute of JSON objects is that they always follow the same format, which means that every set of data can be accessed easily. In short, it always has the same behavior.
Alright, you're ready to begin. In 3-4 minutes, I'll show you how to take your prompt game to the next level. Let's begin!
Oh, btw— shipping this app sets you up to join 1000s of other builders for a 6-week sprint called Nights & Weekends. You'll get tons of support and feedback to turn any idea into a product or company.
All you gotta do is apply here.
Prompt Engineering: finding your JSON prompt
Prompt engineering is the process of creating a new prompt which is sent to your model. In this case we’ll use OpenAI, because it is known broadly. Here’s an example of a prompt request to create a list of puzzles. We’ll use it along the note.
const response = await openai.createCompletion({
model: "text-davinci-003",
prompt: "Create a list of puzzles questions",
max_tokens: 7,
temperature: 0,
});
As a result we get a few bullet points with potential puzzles.
Exactly what we asked for, right?
1. What is the missing number in this sequence: 4, 8, 12, __, 20?
2. What word is represented by this rebus: [snow] + [man]?
3. What is the capital of Australia?
4. What is the name of the third Harry Potter book?
5. What is the answer to this math equation: 20 / 5 = ?
But that’s really boring. There are few ways something like this can be implemented answers.
To parse the answers later (for example to review them, render them in components, etc.), it’d be useful to have them as a full JSON object.
That’s a whole lot more reliable.
To get a JSON output, we just need to add modifiers to the output. This is the prompt I used in OpenAI's Playground:
Create a list of puzzle questions and their answer. List as JSON object:
Here's what we got back:
{
"puzzle 1": "What has a head and a tail but no body?",
"answer 1": "A coin"
"puzzle 2": "What has a bed but never sleeps?",
"answer 2": "A river"
"puzzle 3": "What has a mouth but never talks?",
"answer 3": "A river"
"puzzle 4": "What has hands but can not clap?",
"answer 4": "A clock"
"puzzle 5": "What has a neck but no head?",
"answer 5": "A bottle"
}
Better. But still not usable. It doesn't have a unique style that can be used/replicated easily.
Now we'll play around with the customization of this output object.
🛠
What are you building?
The GPT-3 AI is also trained on a lot of code, so it understands the base concepts of JSON objects.
We can give more detailed prompt inputs to fit the output. Here’s a example prompt:
Create a list of puzzle questions and their answer. List as JSON objects. Each object has a subobject of "puzzle" and "answer":
Here's what we got back:
[
{
"puzzle": "What walks on four legs in the morning, two legs in the afternoon, and three legs in the evening?",
"answer": "A human"
},
{
"puzzle": "What has a neck but no head?",
"answer": "A bottle"
}
]
Awesome. This is exactly what we were looking for! ✨
You know how to customize your JSON-ouput structure. This is extremely helpful to get the same style of JSON each time.
It also can be useful to generate an output that is parsable in an easy way.
To use this in our app we’ll just have to parse the JSON to use it as object in JavaScript.
Parsing the JSON
What we just did was pretty simple in Playground.
Next we’ll have to implement this is our server/app. I recommend to use a backend such as Next.js’s API routes to call the OpenAI.
If you're confused regarding this, please follow this project and learn the basics:
Alright, so let's make the API request to OpenAI once you have your token set up.
Your call should look something like this:
const response = await openai.createCompletion({
model: "text-davinci-003",
prompt: `Create a list of puzzle questions and their answer. List as JSON objects. Each object has a subobject of "puzzle" and "answer": `,
max_tokens: 7,
temperature: 0,
});
You can get your response using the following:
response.data.choices[0].text
And parse it (like you would do with other fetch requests):
const puzzles = JSON.parse(response.data.choices[0].text)
Now you can use your object like any other JavaScript object. You probably are familiar with this because of various APIs you may have interacted with in the past.
Using the JSON in Your App
Perfect! You can now use your object called “puzzles” like any other JavaScript object. It’s as easy as that.
With this knowledge you can start to build many exciting things. Feel free to use the puzzle as an idea, maybe it'd be a cool party game?!
Thanks for sticking by!
You've made it to the end. I hope you found this useful and learned a couple tricks to have prompt conversations :). I encourage you to just try a few things that you're passionate about in playground and start to apply some of the tricks you learned here!
All the best! Can't wait to see what you create.
Lennard
Join the the world's best builders for a 6-week sprint
Come join the best builders from around the world to build wild ideas in web3, ML/AI, gaming, bio-anything. You've got what it takes - all you need to do is apply