Building an OpenAI Fetch Request
We start by setting up a basic fetch request to an API endpoint. We cover the necessary properties such as method, headers, and body for the request. We also discuss how to adapt examples from API documentation when JavaScript examples are not provided.
We explore the concept of open AI models and prompts, using the "Text-DaVinci-003" model and a simple prompt as an example. We demonstrate how to handle the response and extract the desired data from it. Lastly, we highlight the AI's ability to generate empathetic and emotional responses.
This lesson provides a practical demonstration of making API requests and sets the groundwork for further discussions and challenges in the course.
[00:00] Let's start this API call by laying out the bare bones of the fetch request. So we need fetch, and then we open up the brackets and we pass in the completions endpoint and we've got that saved here as URL. Now we need an object and inside this object, we're going to need method, headers and body.
[00:18] And if we check back with the docs, we know that the method is post. It tells us that right here next to the end point. Now the docs don't actually give us an example fetch request in JavaScript, but they do give us this curl example and we can adapt it. So let's take a closer look. Our headers are going to need a content type
[00:39] of application JSON, and we'll also need an authorization of bearer with our API key. So let's go ahead and put those in. Okay, now we need a body. And this is where we get into open AI specifics.
[00:58] The body for an open AI request needs a model and a prompt. So I'll come down here and add the body. And then I'm going to say json.stringify and I'll pass in an object with model and prompt. Now, if we look back at this screenshot, it actually gives us a model right here.
[01:20] Text-DaVinci-003. So let's break the golden rule of coding and just copy a line of code that we don't actually understand. We haven't discussed what open AI models actually are or what options we have available to us yet. But what I want to do is get this example working,
[01:38] get the first API request actually into our app, and then we'll rewind and talk about models in more detail. For now, just know that open AI has got various models that we can use. And today we're going to use this one called Text-DaVinci-003. Okay, so I'll put that in a string right here.
[01:57] Okay, so we've got the model and now we need the prompt. And we're going to talk about prompts a lot in this course. But for now, what we need to know is this. In this example that we saw in the previous scrim, we asked a question, who was the first person to walk on the moon? And we got the completion, Neil Armstrong.
[02:17] Well, the prompt is this part. Who was the first person to walk on the moon? The prompt is whatever we ask the open AI API for. Now, sometimes prompts are really, really simple, just like this. And sometimes they're really very complex, as you'll see a bit later in this course. Now, they've given us an example prompt in the docs,
[02:36] say this is a test, which to be honest is not very creative. So instead of using that, I'm going to ask an easy but real world question for this prompt. I'm just going to say, what is the capital of Spain? And that is all we need to do for a simple prompt. We just put it in a string.
[02:55] Okay, now we need to chain some thens. So we'll take the response and we'll call JSON on it. And then we'll take the data from that response and log it out. Okay, let's open up the console and I'll hit save. And we've run into an error. It's a pretty silly one. It's just a typo on my part, but why don't you just pause now
[03:17] and see if you can debug that. And I'll give you a bit of a clue. Have a quick look at this slide. Okay, did you spot it? I've actually put bearer colon and then the API key. I think that is causing the problem. Let's try it one more time. And there we are, we're getting a response. So I'm just going to copy this from the console
[03:39] and paste it in the editor just so we can see it a little bit more easily. And as we can see, this is an object. It's got loads of data in it. And we'll be talking more about some of the properties in this object as we go along. But for now, we just need to focus on one word, Madrid, because that shows us it works.
[03:57] OpenAI is speaking to us and it knows all about Spain. Now, okay, knowing facts is great, but we're actually interested in emotion and creativity. So I'm actually just going to change things a little bit. Let's delete this. And I'm going to change my prompt to say something more emotional.
[04:17] I've said, sound sympathetic in five words or less. Let's hit save. And again, I'll just paste the response right here. And look what we've got, I'm here for you. It's giving us sympathy. And what's really cool about that is that now the AI is speaking to us as if it were human.
[04:36] It's speaking with heartfelt or at least CPU felt emotion. And that is what we're looking for. Okay, let's take what we've got here and apply it to our project. And I haven't forgotten this model that we've got here, TextDaVinci003. It's still shrouded in mystery,
[04:54] but I want you to get your hands on the keyboard, start getting practice, start building muscle memory before I do any more talking. So let's move on to a challenge with this next.