Check out a free preview of the full First Look: ChatGPT API for Web Developers course

The "Basic Prompt Rules" Lesson is part of the full, First Look: ChatGPT API for Web Developers course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano shares essential guidelines for writing prompts to elicit the desired response from the model. The discussion includes tips for providing clear and specific instructions, such as requesting a structured format, providing examples, and explaining how to handle invalid inputs, for effective prompt construction.

Preview
Close

Transcript from the "Basic Prompt Rules" Lesson

[00:00:00]
>> Let's talk about some basic rules for the prompt. We should write a specific and clear instructions, really clear instructions like you are a web developer and you're writing a web page for the government. Now write a table in HTML that contains headers and cells and each row will have blah, blah, blah.

[00:00:25]
You need to be very specific to get a better answer. For large tasks, you can provide the model, at least of a step. So you can help the model think with you, okay? So, for example, you have a text and you want to summarize the text, convert the text into French, and then create a list of emojis that will get the feeling of that text, just for say something.

[00:01:00]
Well, instead of saying, hey, I want this text in French with emojis and summarize, you can say, hey, you are a text processor that will do this. First, you will translate the text into French. Second, you will do that. And then lastly, you will do the other thing.

[00:01:19]
So we can help the model think. And that will get a better result. And sometimes it's even better to make several GTP calls. So, In this case, we do a step by step. And always providing the previous context. For example, and sometimes, this is even the only way to do some things.

[00:01:46]
For example, you have a book and you wanna summarize the book. You cannot pass the whole book. So something that you can do is you can pass chapter by chapter and ask for a summary of each chapter. When you get the array of summaries, you make a final call saying summarize the book, okay?

[00:02:06]
So you make things a step by step, yeah, you will pay for every step, but that's how you get better results. Also you should use internally an iterative process to find the right prompt. So we try two different prompts, try to change the words. Sometimes, for example, instead of summarize, you can use extract, extract the data you want.

[00:02:32]
Or instead of summarize, you can say, summarize these, paying attention to that. So, adding more words can improve a lot, the kind of answer that you're getting. For example, to be more specific and to give clear instructions, you should use delimiter for dynamic data. For example, you say, I want you to translate this text.

[00:03:01]
Well, how are you going to render the text? How are you going to say which is the text? Well, you can use tags as in XML, so you open tag text, you put the text, you close the text. You don't need to explain to the model what's a tag.

[00:03:19]
But it will recognize that that's a different section. You can use triple backtick, this is coming from markdown, triple quote, works as well. Triple hyphen works as well to separate sections. So what's the question? What's the text that you are asking question from? You can even explain the model.

[00:03:43]
So you can say, I wanna translate the text in triple backtick. Then you can have more instructions, and then the triples backticks with the text, okay? Makes sense? So you can try this like here, like translate the text, let's say the text within a tag to French, and then summarize it.

[00:04:12]
Then make a summary of the most, or make a list. Look at lists, make a list with a bullet in different lines of the most important topics. This is Learn PWA. It's some kind of a free book that I authored with the Chrome team. In case you wanna learn about Progressive Web Apps, so you can just take a piece of text.

[00:04:41]
I will come here and say, well, we set a tag, so let's open a tag text. And I paste this, that's my input. So Send. And let's wait for it. So well, it's French, so I don't know. But I guess it's talking about PWA and something. I don't know French, sorry.

[00:05:05]
Also, we can ask for data in a structured format, so I can really ask the model to use JSON, HTML, comma separated values, any format you need, if it's a string-based. And we are going to learn an example that works, and you will see that that's true. So I can ask even for the answer these answer, go back here.

[00:05:31]
Let's change this with a different prompt. For example, give me a list of ten random countries, okay? If you look at that prompt, I'm not being really specific. I'm not explaining, okay, which countries. How to see the answer, I mean, I have a list, but yeah, I can say, the list should be in CSV format.

[00:06:05]
So, Send. Because I'm not sending the context, I shouldn't get the same answer. By the way, I should clean the previous answer. So let's do that. So in playground app.js, we should clean the output every time we make a new query. I think that will be better. So you can see at the bottom anyway.

[00:06:36]
But if you look there, it says, the CSV format is as follows. And it says, well, if I wanna parse this, right, I don't like it. So I don't like the CSV format is that is. So let's say, just reply with the CSV content, no other words. So I'm very clear, very specific of what I want.

[00:07:00]
So now I don't have any other explanation before or after. And instead of CSV, I can use an HTML UL table. Just reply now with the HTML content. And it should be in HTML format with a table, or I can use an unordered list. And now we have a table.

[00:07:27]
But the table has a header, a th, with the Country. I didn't ask for that, right? I wasn't specific enough. Maybe I try again, and I get a different, well, I can say, with a table without the header, or with a header, or with a class name. So the more specific you are, the better results you get.

[00:07:47]
And this idea of give me just the content, no other words, it's pretty cool to then parse their response. So as you can see, this is what is known as prompt engineering, this guy for developers. It's just playing with the words so the model will understand us better.

[00:08:06]
So that's why I say it's more prompt hacking. So what else do we have here? Give the model an example of what you're expecting. So if you have your own format, you can actually say that. And you can explain to the model what to do when the input is invalid.

[00:08:26]
This is really cool, let me show you that. And we're going to use that later. But let's say that I will say, give me the list of countries for the cities in tripple backtick. So I will say here a list of cities. Let's say Minneapolis, Buenos Aires, that's my hometown, London, Tokyo, something like that.

[00:08:59]
And then we can say, the list should be using a format like, and I'm going to invent something. I will use a different delimiter here. It's a different way to separate this. I will say like, let's say, we can use Madrid: Spain;. And I use Bangkok: Thailand. So I'm giving the model a sample of what I'm expecting.

[00:09:38]
The more concrete you are, the clearer you are when you're explaining, the better results you will get. I'm not sure, I haven't tried that one, so let's see that. What do you think? It worked. But now that I'm seeing the answer, that it looks pretty good, I can also add things like, okay, give me the flag emoji.

[00:10:03]
It really works. So I made the emoji so I can add, even I don't wanna explain that. I'm going to just add emoji for Spain, or for Thailand, and see if that works. But if you pay attention, I'm receiving the last dot. Look at the emojis, it worked.

[00:10:25]
It realized that I was expecting the emoji of the country. So it's actually pretty cool that you can actually get this. But I'm getting the last colon, the last dot, sorry. That might be problematic for parsing this. So then I realized that testing the prompt. So then I can say, don't add any other characters or symbols to the list, and see if that works.

[00:10:57]
By the way, I haven't tried this, this is a program I'm doing live with you. And if it doesn't work, then you can say, remove the dot, or something like that. I don't have a dot now. So it worked. So that's prompt engineering, and that's why it's cool to work with a playground.

[00:11:13]
So you can play and you say, okay, I'm done with this. So I will copy and save that in my app, so that the prompt I will use. But remember this is asking for cities and countries. But let's say that the list of cities is dynamically generated. It's coming from a database, or the worst part is written by the user.

[00:11:38]
What if I say iPhone, Android, and MacBook. Because if it's user generator, I don't know what will happen. Let's see, well, sorry I cannot provide enough countries, which it's okay, but I cannot parse that. So I should add here instructions to what to do. If the list of cities does contain value entries, respond with the string false.

[00:12:17]
And let's use something like this, with no other characters or symbols, okay? Make sense? So if I hit Send, false. So now we can parse that. We can parse the false with JavaScript or with other language and know that something was wrong with the input. We don't have cities.

[00:12:41]
We can try to go back to a list of cities. Let's say Sao Paulo, Sydney, and Casablanca, San, and we can see if this is still working, pretty good. That's prompt engineering for web developers.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now