ChatGPT: Build Intelligent Apps / Email Autoresponder with ChatGPT API | Henry Learning | Skillshare

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

ChatGPT: Build Intelligent Apps / Email Autoresponder with ChatGPT API

teacher avatar Henry Learning, Instructor | AI Entrepreneur

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      2:30

    • 2.

      Project Synopsis

      1:37

    • 3.

      Environment: OpenAI API Account Creation

      2:55

    • 4.

      Environment: Setting Up an Azure Account

      8:37

    • 5.

      Environment: Configuring Azure Functions Resource

      3:05

    • 6.

      Environment: Python Installation and Setup

      3:40

    • 7.

      Environment: Installation of Visual Studio Code

      2:38

    • 8.

      Environment: Configuration of Visual Studio Code

      5:54

    • 9.

      Environment: Running Python and Pip on Terminal

      3:20

    • 10.

      Environment: Creation of Microsoft 365 E5 Account

      8:48

    • 11.

      Serverless API: Python Usage to Access OpenAI API

      9:59

    • 12.

      Serverless API: ChatGPT Responses Management

      4:24

    • 13.

      Serverless API: Creating a Basic Azure Function

      5:05

    • 14.

      Serverless API: Azure Functions Testing and Deployment

      8:37

    • 15.

      Serverless API: Serverless Functions Postman Testing

      3:08

    • 16.

      Serverless API: OpenAI ChatGPT Integration with Azure Functions

      8:07

    • 17.

      Serverless API: Open AI ChatGPT Local Testing

      2:53

    • 18.

      Serverless API: OpenAI ChatGPT Deployment to Azure Functions

      5:52

    • 19.

      Outlook: Configuration of Office Add-in Environment

      6:19

    • 20.

      Outlook: Creating an Office Outlook Project

      6:37

    • 21.

      Outlook: Outlook Add-in Launch

      4:47

    • 22.

      Outlook: Running ChatGPT API in Outlook

      9:00

    • 23.

      Outlook: Fixing CORS and Security Issues in Outlook

      17:09

    • 24.

      Outlook: Email Body Transfer to ChatGPT

      10:03

    • 25.

      Outlook: Response Pasting in Outlook Add-in

      7:42

    • 26.

      Project: Configuring Outlook's Environment

      3:49

    • 27.

      Project: Front-End Modifications

      2:36

    • 28.

      Project: Applying a ChatGPT Function on the Back End

      9:09

    • 29.

      Project: Modifying Back-End to Process Email Body

      5:51

    • 30.

      Project: Reply Box Inclusion

      3:02

    • 31.

      Project: Application Extension with ChatGPT Mood Options

      8:56

    • 32.

      Begin Working with Your Project

      0:52

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

234

Students

--

Project

About This Class

In this class, you will dive into the world of AI-driven applications by harnessing the power of ChatGPT, an advanced language model. You'll learn how to leverage the ChatGPT API to develop intelligent applications, and specifically, you'll explore the integration of ChatGPT with Outlook to automate your email responses.

What You Will Learn:

  • Introduction to ChatGPT and its API: Understanding the capabilities and potential of ChatGPT, exploring the fundamentals of the ChatGPT API and its usage and setting up your environment.
  • Creating Effective Chatbot Responses: Discover the techniques for crafting engaging and context-aware chatbot responses, handling user prompts and generating natural and dynamic replies.
  • ChatGPT Integration with Platforms and Apps (i.e. Outlook):  Overview of platform integration options and considerations and ChatGPT integration with Outlook for email management
  • Building a ChatGPT Email Autoresponder with Outlook: Design the architecture and functionality of an email responder and automate email responses using the Outlook integration with ChatGPT API

Why You Should Take This Class:

Building AI-powered applications is rapidly gaining value in various industries.  By mastering ChatGPT and its API, you can develop intelligent applications. This course equips you with the knowledge and skills to leverage the power of ChatGPT and integrate it seamlessly with Outlook, enabling you to save time and enhance productivity though automated email management.

Who This Class is For:

This course is suitable for individuals interested in exploring the world of intelligent apps using ChatGPT.  While prior coding experience is not required, familiarity with programming concepts, serverless functions, APIs, and Python will be beneficial.  Professionals seeking to streamline their email communication and developers interested in AI-driven applications will find this course invaluable.

Resources & Materials:

To join this course, you will need a computer with internet access.  Furthermore, you will be required to create an account on the OpenAI platform to access the ChatGPT API. 

Throughout the course, we will provide code snippets, practical examples, and additional resources to facilitate your leaning and the development of your ChatGPT email autoresponder with Outlook.

Meet Your Teacher

Teacher Profile Image

Henry Learning

Instructor | AI Entrepreneur

Teacher

Hi there! I’m Henry, a data consultant to Fortune 500 companies, no-code specialist, and AI enthusiast based in Canada. I run Henry Learning.

We are a passionate group of advocates of no-code application development in business, as they are much easier to understand and deploy quickly. We also believe that AI and automation can make everyone's life easier, and am on a quest to teach these skills to as many people as we can. We firmly believe that no-code and AI solutions are the future of work, and that they will be integral in our every day lives.

We also love teaching and mentoring students on a variety of topics including AI, no-code, automation, data analytics, and visualization, and more.  We are committed to creating enga... See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: So you've heard about schottky beauty and love it. And now you want to integrate the technology into a solution or an application. Let's say you want to create an outlook extension that uses chat GPT to generate emails for you that you yourself don't want to write. Well, you're in luck. In this class, you will learn how to use chat cheap and teeth and advanced AI language models to build intelligent applications that can respond to a variety of different prompts. Whether you're a beginner, which actually PT, or a seasoned professional. This course will give you the tools on how to integrate Chat GPT into your day-to-day applications and take your productivity to the next level. Hi, I'm Henry, and I'm excited to be the instructor for this course with over ten years of experience as a data consultant and an AI trainer, I'm passionate about sharing my knowledge with people all around the world and helping them to do amazing things with AI. With this course, you'll learn how to integrate vt into other platforms and applications such as Outlook. Even build your own chat GPT application, response to e-mails on your behalf. This course is perfect for someone who wants to learn how to create great intelligent applications using chat GPT from scratch. Whether you're a beginner programmer for an experienced user of chat GPT, they'll gain the knowledge and skills that you need to take your productivity projects to the next level. With step-by-step instructions and expert guidance, you'll learn how to use traction e t to create responsive and powerful applications that can transform the way you work and play. Throughout the course, you'll learn the basics of chat GET, including how to use its API to create responses to various prompts. We'll also learn how to integrate Chat GET into other platforms and applications such as Outlook. By the end of the course, you'll have the skills and knowledge to build your own check CPT application that can respond to emails on your behalf. Our class project at the end is where you'll be creating your own OPT application as well. So are you ready to go ahead and create some intelligent applications using chat GET? Then join me in this course and let's build some amazing things together. See you in class 2. Project Synopsis: Hello everyone. Now this course would not be complete without talking about a class project. So by the end of this course, I want everyone at taking this to basically create a quick intelligent application using chat GBT and the application of their choice. In this course, for example, it will be combining Church BT with Outlook to create an e-mail responder. But you don't have to use L Look, you can use many different types of applications. In here are a few ideas. For example, you can combine charged with Excel to create an application that automatically generates insights and recommendations or descriptions based on data entered. You can mix chat, GPT, and irritable together. That basically gives that product descriptions or social media posts for a given product based on attributes that are stored within air table. Another really quick and easy example of this project is combining chat GPT with Power Automate. So create a simple workflow that automatically responds to customer inquiries or support tickets. A customer service type platform, right? So these are again, just different ways you can combine chat GPT with these other applications to create intelligent applications from scratch. Finally, about sharing your work after you've created an application. Then please post it to the project gallery down below. Post a screenshot and a quick summary of the app you've created and what applications you use to create the app. Okay, Awesome. 3. Environment: OpenAI API Account Creation: One thing we definitely need to do now is we need to sign up for an API key with OpenAI. This will allow us to talk to Open AI's servers and basically provide prompts to their language models like Da Vinci or Ada. And we can get back responses with ease. So what we're gonna do over here is we're going to click the API button. I'm on opening ai.com currently. Let me see if I can zoom in a bit further. Let me go to API, and then I'm going to go to sign up over here. Okay. Perfect. Now, I'm just going to sign up with my Microsoft account. It's up to you. If you want to create an account, you're away. But what you do need is you actually need a valid phone number that can text. So I signed in with my Microsoft account, but it's asking me to verify my phone number. So what I'm simply going to do is I'm going to take this tab, going to move it off screen just because I love all of you, but I don't want you to have my phone number. I'm going to type in my phone number so I can validate that. Perfect. Okay. I'm just validating it now. Just give me a few seconds here. Okay? Now it asks you a few questions like how will your primarily use open it ai? Honestly, this doesn't really matter that much. I'm just going to say that I'm exploring some personal use for my Open AI account. Perfect, and now you're in the API. It was that easy. Now we'll be going through these things later. But one thing that's very cool is you can click playground, but actually have access to the entire chat GBT, Open AI, Dolly, any single model you want from here. And you can also mess up with the parameters. You can change the temperature, maximum blend stop sequences, a lot of these things as well that are important to know. And as you can see here, you can go through different models, all the different GPT-3 models, all the different codecs models. And I'm not sure why Dolly's in here, but it is available in the API anyway, so we're fine. Okay, perfect. So now we actually have an API. Now to get your API key, which is the most important thing that you need about this process, is if you go over here, I believe to personal and click View API keys. Right over here. You click Create new secret key. After you've done that, it will give you basically something to copy, put that in a notepad just so you have it, because we will make sure we actually use it again. And we'll refer to it as the Open AI API key. Awesome 4. Environment: Setting Up an Azure Account: Alright, now the next thing that we'll do is we will set up an Azure account. And the reason why we need to set up an Azure account is because we want to use Azure Functions. Azure Functions are very cool. They basically allow you to execute code without having a server. So our app requires us to connect to open AI's API, right? And it needs a computer or a server to do that for us. Now historically what you'd have to do is you'd have to buy a computer, basically on the Cloud or physically and have that computer be the one who will actually ping Open AI's API and get the prompts and responses. But with Cloud computing and with Azure, we can just set up something called Azure functions. We can tell Azure functions basically, every time you get pinged, you need to then send that ping to OpenAI, deliver the prompt, get the response back and then show it on the app. And it's all managed through Azure Functions. So again, you can go through here and read more about it, go to azure.microsoft.com and then search for Azure Functions. But it's very, very easy and cheap to use as well. And the best thing about it is you can develop in any language. We'll be using a Python, but you can really use it in any language you want. Okay? Again, I do implore you to kind of go through this. One of the best things about it is that for pricing, it's basically free, especially for our purposes. It'll be free because we don't need something that's dedicated because we're just creating test apps. But if you look at this over here, this is how the charge you, where you get, it's charged based on execution time and total executions. So you have a free grant per month. So if you don't pass 400,000 gb a second or 1 million executions, then it's free, completely free. Now, if you're just creating a sample app, you will definitely not pass this. So you should be able to do it for free. Okay, so with that being said, let's go ahead and create our Azure account. So we're going to click free account over here. It says building the Cloud with an Azure free account. Now over here. Basically, if you do qualify for a free account, you can go through with it because you actually get $200 for free from Azure. Now, I'm not eligible. You're only really eligible if you're, for example, a student, if you have a student email or a work email that hasn't been used before, things like that. So I'm going to go with the pay-as-you-go option and sign up. But remember, you should try if you have a school account or anything like that to click Start free. Now again, how we're using Azure, you will be charged anything. Anyways, it will require a credit card from you. But again, it's not going to be charged because we're just going to be using Azure Functions. Which again, as we saw, if you don't pass 400,000 gb a second or 1 million executions, then you won't be charged. And even after that, it's pretty cheap anyways. Okay. So I'm going to go in and click sign in. Now I'm going to sign in with my Microsoft account that I've already set up. Perfect. Now once you've reached this page, again, you have three options to subscribe. You can subscribe using the free trial option, using Azure AD or access student benefits. So these are different things you can do. I mean, well, we're gonna do is we're simply going to go to subscriptions. Okay? Having authentication issues, that is weird. That's fine. So remember, go to subscriptions, we're then going to add in a subscription. And again, you have two options. I'm going to select. Pay-as-you-go will then ask me for a few things like my credit card, my firstName, lastName, my phone number, everything like that. So I'm actually going to do this off screen. I don't want to advertise my phone number and to everyone here. Let me see. Let me go ahead and do that. It asks you for your phone number just because you shouldn't you shouldn't make countless Azure accounts, right? It definitely doesn't like that. So let me go through and I'm putting my verification code and then going to put in my address because again, you need to put in a credit card here Perfect. Right. Now the next thing I'm going to do is I'm going to put in my payment information. So again, all you need is a credit card to get signed up. So let me go ahead and do that. Okay. I actually put my credit card number eight, frankly, so I'm just going to try it again. I'm really sorry about that. But again, this is a intro to experts, so I wanna make sure I record everything. Because one thing I hate is when tutorials go through things, but then they like skip the most important part. So I wanted to make sure I go through every single thing. So if anybody has a question that it won't be because I skipped anything. Let me just try again here. Perfect. All right. Now, it may ask you for technical support, but don't bother, don't buy that. That is, It's not worth they just click no technical support. And you should be all good. So let's click sign up. Now it's basically confirming my information. It's doing all of its checks. So let's wait until that's done. There we go. It's done. Now, if you've done everything correctly, what you should be able to do is go to portal.azure.com and see something similar to this. So you should see something like this. If you don't, again, just ask questions in the comments below. Something you should be able to do as well if you've done this correctly, is you should be able to go to subscriptions. And you should be able to see your subscription over here now. Okay, perfect. And it should be again active. But if you've done all of that, now you're basically in Microsoft Azure. Perfect 5. Environment: Configuring Azure Functions Resource: Okay, Now that we've created an Azure account, the next thing that we're going to do over here is we are going to create a Azure Functions resource. Okay, so I'm just going to type in the main box here function. We're going to create a function app. This is where you, It lists all of your different function apps. Obviously we haven't made one yet. So we're going to go ahead and click Create. Okay, and then we need to fill out a few details. The first thing is a resource group. Now, this is basically a collection of services. So if you have many different services that you're using from Azure, you can roll them up into resource groups for categorization purposes. Okay, So we're going to go over here. We're going to create a new resource group. Again, this is for our chat GPT. Well, really it's open AI, but Open AI testing purposes. Okay, we're going to click Okay on that. Then we need to give it a name. So we're just going to go over here and click Open AI first. It's going to be a code publish. Now you need to choose basically your runtime and your language. So we're going to use Python. But again, you could code this in any language you feel comfortable in. Most people know Python, I feel comfortable in Python. So we're choosing Python. One key thing here is that right now it actually only supports up to Python 3.10. And even three-point ten is in preview mode. So we'll actually be using Python 3.9. Okay? The region is to us that's fine. Linux is fine. And make sure you select Consumption Plan. Don't select premium or App Service plan because there will be a lot more expensive for you. So again, make sure you click consumption, okay, hosting. You don't really need to really affect anything over here. Basically, a function also creates a storage account, but that's fine. You can just go to networking over here. Make sure you select Enable public access. Nothing really to do here as well. Nothing to do here as well. You can set up GitHub deployment, which was very cool, but we don't need to do that. Okay, now let's go to Review and Create, and let's click Create. So now what Azure is doing in the background is actually setting up your website for you, which is again very cool, right? It's actually setting up that function computer in the background. Then you can tell it to do multiple different things. And we'll, we'll do is we'll basically tell it to ping open APIs, api for information. Okay, So after this is done, this we'll say deployment complete. And then we can go ahead and go to the next thing that we need to set up. Awesome 6. Environment: Python Installation and Setup: Okay, Now the next thing we need to download is Python. Now, hopefully most of you already have Python downloaded and installed. And you can check that by actually opening up a command terminal. So type in cmd into your chat. So you get something like this, okay? And now type in Python. And it will tell you if you have some Python already set up in this virtual environment that I'm in. Do not have it set up. So it opens up a Microsoft Store for me, for me to buy it. Okay? So if that happens, then you don't have Python set up. Specifically the Python that we need to download right now as of this taping, the Python version that's available is Python 3.11. Now, here's the key thing. Do not download Python 3.11. Do not click this yellow button over here. Because Azure Functions currently only works with three-point ten and below. And particularly the long-term sustainable model is 3.9. Okay, so remember that please. So what we're gonna do is in the download section, we're gonna go all the way to the bottom. Okay, whoops. I think we need to go to downloads and then Windows. And then we're gonna go all the way to the bottom until we see the peak 0.9, 0.16. Okay. So let's go ahead and click that. Actually, I don't think this one has an installer, no installers. That's okay. To make it easy, we can go to download any 3.9 version. So let's go to one that actually has an installer for us to use. Let's see here. Let's keep going here. 0.9, 0.13, May 17, 2022. We're going to download the Windows installer. I have a 64-bit machine, so I'm going to download this. I'm just going to click it as well because it's done. And we're going to install Python. There we go. So let's click Install. Now. Let's actually add it to the path as well. Almost there. Okay, Perfect. Awesome. So now let's close out of this. And now Python should be involved in your system. So let's open up another cmd file. Now if I go in here and type in Python, perfect, I get Python divergence p 0.9, 0.13. Now if you type this and you get something like 3.11, then as of this taping and least, you cannot use Azure functions. You will need to use something else. Or what you do is you uninstall that version and then install Python 3.9, 0.13. Awesome 7. Environment: Installation of Visual Studio Code: Okay, Now this is getting a bit exhausting, but I promise it will all be worth it in the end. The next thing we need to download is Visual Studio Code. This is an application or an IDE available from Microsoft that really lets you, first of all, code easily. But the reason why we need it is because we actually need it to deploy functions on Azure, okay, So you actually need to get Visual Studio Code to enable you to deploy functions. Okay, so let's go ahead and click Download over here. Perfect, It's just downloading. And again, if you already have it, skip the video. There's no need to watch the video if you already know how to do this. This is again for everyone. That's why I'm going very, very, very pointed detail. Because the worst thing about a tutorial or a course is when an instructor is skipped something that you, that they think, you know, but you actually don't. And that just brings me so much. Okay. Let's go ahead and click that. I'm just going to open up here. So I'm going to accept the agreement. Next, next, digit you to create a desktop icon. Next, install. Okay, Easy peasy, lemon squeezy. Again, Visual Studio Code, very cool and honestly you feel like a hacker when you're using it. Because if you haven't, if you haven't used any sort of IDE before, it's, it's, it's a lot of fun to use. Alright. I probably just made myself seemed like a wimp for saying that, but oh, well, okay. Mine, it's almost done. Perfect. Okay, So let's launch Visual Studio Code. Perfect, so I now have it open. I'm going to choose the dark option over here. And what I'm going to do is I'm going to click Open Folder. Okay. I'm going to go into my, ah, let's see, I'm actually going to create let's see, document's going to create a new folder here called Scratch. Okay? And I'm going to select this folder to open my project in. Say yes, I trust the authors. And there we go. That's it. So now we have everything installed that we need to, we do need to configure with Visual Studio code a little bit. But hey, we are almost there. 8. Environment: Configuration of Visual Studio Code: Now there are a few configurations that we need to make to Visual Studio Code for it to work properly. The first thing we need to do is we need to make sure we can actually execute and run Python code from Visual Studio Code. Just so it makes things a bit easier. Okay, well, we're gonna do over here is we're going to go to the Explore section on the left. If you don't see it, make sure you click this guy here. And we're going to click New File. And we're going to type in Scratch dot py. Okay, this will be a Python file. Now automatically asks us, Hey, do you want to install the recommended extensions for Python? Yes, we do. So let's click Install on that. It takes us to this page under extensions. Now we're actually installing the Python extension. And it just helps us because it basically allows us to code faster. It'll tell us when there's errors. I'll provide us Jupiter notebook formatting. I'll provide us debugging, really, really good sense things. Okay? But let's go back here. And let's type in a very simple command. Let's type in print. And then in quotes. Hello world. Whoops, there we go. Hello World. Okay, Perfect, that's already installed it. Let me x out of that. Let me make this a bit more zoomed in as well, just so you all can see it. Okay, Perfect. Now, how do we actually go about running this? The first thing we need to do is we need to make sure we have our Python interpreter installed. At the bottom right, you should see basically the interpreter here which says Python, and it's using 393-39-1364 bit. You can actually see the file path that the interpreter is using. If you want to edit it, you can always click it and change the interpreter as well. Something else you can do is let me just X out of this first is you can go to Control Shift P. Let's go to, I think we can just search it in tr. Tr. You can click over here. If you type an interpreter, you can click here, select interpreter. And how I got to this, by the way, as I held down Control Shift and I clicked P and I typed in interpreter. This is basically a menu that allows you to search many different settings. So I'm going to search the interpreter setting. And over here I can see I can click Python select interpreter. And then I get this. And I'll actually asked me, Hey, what interpreter or do you want to use? And if this is not set up for you automatically, which it should be, you can always click here and type in the interpreter path of where you're a Python is installed. So you would basically go in here and type in the path of where Python is installed. Again, if you don't see this already, which if you follow the instructions so far, you should. Okay. So let's see if this works. We have a Python command here. What we're gonna do is we're going to save this file first. That's where the dot is for. The dot means that the file is not saved. So we're going to click Control S to save the file. And then we're going to click F5. And when we click F5 for the first time, it asks us for a debug configuration. Let's see. We can simply just, I think right over here, Python file and just running it. And let's see if that works. Okay. It didn't like that for summary. Oh, there we go. Hello world. Okay. Perfect. It works. That's good. If I put in here a Hello world again, and then click, Make sure you save it Control S, and then click F5. Or you can also go over here and click the Play button. Then you should do the same thing. Hello world again. Awesome. So that means it is working. And if you can't see this by the way, then you have to click this guy over here, which toggles the visibility of this panel. So perfect, We did one thing. We're able to run Python right in our Visual Studio code. The other thing that we need to do over here is we need to add in the extension for Azure functions. Okay? So let's go over here to extensions. And we're going to search over here, azure Functions. Azure function. Let's click it. This is what it looks like. It's an Azure Functions extension for Visual Studio Code. We're going to select Install. It is now installing. Now after you've done all of that, we can just accept of things that we don't need. On the very bottom, you should see an a over here. That's the Azure symbol. So let's go to Azure. And what we need to do next is we need to sign into the Azure account that we had created, that where the Azure Functions that we just created also resides. So make sure you sign into the same Azure account. So let's click sign into Azure. And then will take us to this page over here. Will then go ahead and sign in. You are cited and now you can close this page. Now you know if this will work, because if you go over here again to Azure and go over here to resources, and then click your subscription. And then you should be able to go to Function App. And you should see the function app that you had created a few videos before. If you can do that, then you are in the correct place. Awesome. 9. Environment: Running Python and Pip on Terminal: Okay, Now the next thing we need to do is we need to make sure that the Python command is accessible in our terminal. So if you don't see any of this, what you can do is click this guy to toggle this panel. By now, once you open up Terminal, it actually opens up a PowerShell terminal. So you can go in here and type python and click Enter. And it will actually launch Python for you. So if you see something like this, you've done it correctly. To exit, just type in exit, open, close. And then you go back to your PowerShell. Now, if this doesn't work for you, but you do have Python installed, what that means is that this Python command is not available to you in your environment variable. So how you do that is click the Start key over here and go to environment variables. Edit the system environment variables, click environment variables. And the one that you want to edit is called path. What the path variable basically does is it goes through all of these folders and finds commands that are residing in these folders. So right now if I type in Python, for example, it will first check if the Python command exists in this directory, then this directory, and so on and so forth. So what's likely the case if you do have Python installed, but you can actually access it from the terminal, is that you don't have one of these two paths installed in your environment variable. Now how do you know where Python is? Well, you can Google it, but it's usually in C Users. And then your name, AppData local programs, Python, python 39, if you don't see this URL updated, sometimes hidden. So for example, if I open up my directories over here and I go to Henry, I don't see AppData here. I manually need to go in here and type in app data. And now I see it. So local programs, Python, python, threonine. And there we go. Since I do have it as part of my environment variables, I can see it very clearly here. Okay? Now, again, put questions down if you don't know how to get there. But that's usually the case if you can't access Python. Okay, So that's the one check done. The next thing we need to do is we actually need to install pip. Pip is a package installer for Python that basically enables you to install packages for Python to make sure you have that. Typing pip. Click Enter. If you get something like this, that means you have pip installed. Okay? Now if you don't have pip installed, there are very good resources online. So go to pi, pi.org slash projects slash pip, click installation. And it walks you through exactly for Windows or any other operating system you're in, how to actually deploy and install pip. Okay? But that's the other configuration that you need to know. Need to have Python accessible from the terminal, as well as Pip accessible from the terminal. 10. Environment: Creation of Microsoft 365 E5 Account: All right, Now the next thing we need to do over here is we need to create a Microsoft account. And the reason why is because we're going to be integrating chat GPT into Power Apps, power Automate SharePoint Teams, Power BI, and a whole host of Microsoft 365 products. Now, if you already have A360 account, if you already have something like teams from your company or something like that, then don't worry, you're all good. You can skip this video. But for those who don't, you need to unfortunately create a O365 account. But I know a way to create a free trial account you can use for about a month. That again, is completely free and you can use it to test for the developments, which is nice. Okay? So the way to do that is go to Microsoft 365 and then go to Office 365, E5. You can also just Google this if you want as well, and it should take you over here. Then go ahead and select free trial. Okay? The next thing you need to do over here is you need to enter your work or school email address. Okay? Now, a Gmail and Outlook won't work here, right? So this isn't the same account that you use to set up Azure. This is a whole different accounts. Unfortunately again, you can use Outlook or Gmail, but what you can do is if you have a work or school e-mail, you can put that in. If you don't, then I've got your back. Something else you can do is you can have something called a temporary male. So for example, if you just refresh this page over here, Well, this was actually the same e-mail address, but sometimes you gotta you email address again because this is a temporary mail that you can use that I think changes I believe every hour. There's a few other ones you can use to, but let's go ahead and copy that to our clipboard. And you can paste that in here. And you don't have to worry because after this, you don't have to worry about this e-mail any more. Okay? So let's click Setup account will need to put in our information. So open them again, Henry. Beat business phone number. I'm just gonna put in something random here. Company name. Now, previously I put it in Udemy course, but let's call this shot GPT company. Okay, I will, five to nine people will make this Canada for me because I am based out of Canada. And let's click Next. Now the next thing you need to do is you need to verify your phone number. So I'm going to put this on another screen while I do that. Because obviously you don't want to. I mean, I love all of you, but I don't want everyone to have my phone number. So I'm just going to enter in my verification code. Click Verify. And now this is where we get to the fun part. What do you want your domain to be called? Now since you're creating a trial account, it will have.onmicrosoft.com at the very end. So I'm just going to make that my username and my domain name. And make sure you actually save that somewhere because you will need to login to it again and now put in your password. Or sorry, create a password rather. Now it's just signing the n. Okay? Now, this is the last step over here to enter in a payment method. Now if you think it will continue to use Office 365 E5, go ahead. Put it in. But if you don't that honestly, you can just close this page and open up a new tab and you're done. Your account has been created. You don't even need to put in a credit card, which I think is really funny. Hopefully, Microsoft doesn't watch this video and kind of gate it for me, but we'll see, okay, now we're back over here. What I want everyone to do now is to actually go on the Admin Center for Microsoft. So Microsoft 365 Admin Center, you can just Google that. Microsoft 365 Administration. Go over here on the top right. And you don't want to, again sign in with your personal Outlook account. Instead, you want to sign in with your 365 account. Okay? So click these three dots, click work, school or university And it should transfer you to the account that you just created, the Microsoft 365 account. Okay. Perfect. There you go. Now again, just make sure you're on the correct account. Sometimes microsoft likes to switch you around, so we can always look on the top right to make sure you're on the same account. But this is the account we just created. Now, if you go over here to the top-left and GoTo app launcher, you have access to Microsoft through 65. Let's go there. This is where you're supposed to be. Sorry. Go over here to all apps. That's weird. Why, why can't I find any of the applications? Weird? Let me just go in here. Okay. That's fine. You know, maybe it's because we didn't put it in our credit card. I mean, I use on my own personal account anyways. But you should have access to Teams, Power Apps, and Power Automate. And in order to check that something you can do over here is open up a new screen and go to make.powerapps.com. Okay? Once you go here, it should automatically log you in based on the account that's set up for you. So again, right now, it's actually defaulted to another account. So I'm just going to sign out of this one. And I'm going to sign in to the chat GPT one. So let me just go ahead and do that. There we go. I'm getting my password. Perfect, and this should load. And let's do the same thing with Power Automate because we'll be using that as well. So go to Power automate.microsoft.com. Let's sign in. Choose the account that you just created. Perfect. Get started. Let's change this to Canada because I am currently in Canada that those two are just loading. And then finally, let's open up teams. I'm not sure if you can actually, you know, we might need to download it, but we'll do that in the next video. Let's just make sure that these two things work. Perfect, okay, so if you've hit this page, then make sure your environment matches the company you just create it. Then you're in the right place if you come over here. Perfect. Okay. So you have Power Apps and Power Automate fully working. Now, again, the reason why I wanted to go to Microsoft through 65 first is because usually you can launch your applications from office.com. But maybe Microsoft has since changed that, but that's fine. You can just go to the links and it will open up Power Apps and Power Automate for you. Awesome. 11. Serverless API: Python Usage to Access OpenAI API: Now we have all our environments and software set up. The next stage is to actually create a serverless chat GPT API. So it's basically an API that we create that enables us to ping open APIs, api for any responses that we want. Now if that was a bit confusing, again, refer to the chart and the introduction section of this course, where that's how we build apps. We basically build Azure Functions that ping APIs, ask questions, get answers back, then, basically show those answers in the app. Okay? The first thing we need to do is we need to actually make sure before we even get into Azure Functions and serverless functions, we need to make sure that we can actually work with Open AI's API. Now if I open up my browser here and go to API reference. So right now I'm an open api.com. I've logged in and I go to documentation, and I go to introduction for the API reference. This is a very good guide as to how to actually use Open AI's API. Again, it's very easy and you can change the language here to the language that you're using, which in our case is Python. Okay? So this is what I'm going to use as a basis. But again, I want this to be the complete guide. So please, please use this as a reference material when you're creating your own apps. Because I'm telling you it's very, very well, it's not difficult to understand. There's a few configurations, oddities here, but it's not that difficult. Okay? So let's create a new file. And we'll create, will call the file access API dot py. Ok. Now the first thing that we need to do is we need to actually install a library called Open AI. So how we do that is let's open up a new terminal. We'll actually, we can just, I guess we can use this one, but I always like to open up a new terminal in case people are following for the first time. I'm going to actually install in OpenAPI. So we're going to write it in pip, install Open AI. What it's now doing is that it's actually installing. Open AI's a library of Python functions that we can use to make it easy for us to access open APIs, api using Python. Okay? So it's basically a bridge that allows us to connect to open AIs. Alright, so we're just going to wait until that's done. Now, while that's going on, we can actually keep going. The next thing we need to do is when we connect to open AI's API, we need to identify who we are and how Open AI does that is that it requires you to pass an API key. So what I want everyone to do is go into personnel, go to View API keys, and then create a secret key. Now once you create this, you won't be able to get back to it. So make sure you click copy on this and actually save it somewhere. Also, do not attempt to just copy my text here, because by the time you're viewing this video, you won't actually have access to this API. So please, please, please go into your own personal account and create a new secret key that way. Okay. So we're going to go back here and it looks like our PIP has successfully concluded. Awesome. So the first thing we're going to do is we're going to actually bring in our key. We're going to call it secret key equals. And then in single quotes, that API key. Okay, perfect. The next thing that we're going to do over here is we're going to simply call OpenAI and really see your work. So what I'm gonna do over here is I'm going to import in Open AI's model. Okay? What then, what I then need to do is authenticate that I actually have a key that I can use to actually access their services. So I'm going to say Open API. The API key I want to use for this is equal to this secret key variable that I have up top. So now by doing this, whenever I make requests to open API, it knows that it's coming from a good source because it can take the secret key to that account that I just made with open API, sorry, with OpenAI. Okay. Now the next thing I can do is actually I can, I can basically make requests to different models. So for example, what I can do now is I can say, let's see, outputs equals open ai dot. Now Open AI has multiple different models that I can access. But I'm going to, well, sorry, many different functions. I'm going to access the completion function, which basically creates a Pleaded response based on a prompt. So that's basically what Chuck GPT uses, right? Then I'm going to say create. This function basically takes in a bunch of arguments. The first thing I need to specify is, hey, what model do you want to use? We previously saw how Open AI has multiple different models. They have their advantages and disadvantages. I'm going to use the one that's used by chat GPT, which is the da Vinci model. So I'm going to use sweat over here. Text dash, Da Vinci, dash 003. Now this might be outdated by the time you actually view this course. So the best way to know what models to create is to actually go in here and click models and see what the latest models are. You could also look at Curie beverage and other ones too. But I'm going to look at da Vinci. Okay, perfect. The next thing you should want to be able to show is the actual prompt. Okay? So what do you want chat GPT to complete or produce? Well, what I'm going to do over here is I'm going to at the very top of this page, type in a prompt as well. Now I'm going to say that I want the prompt to be, you know, tell me a slogan or a security or a home security company. That's it. Okay. So I need to give it a prompt. So I'm going to make the prompt parameter of this function equal to the prompt variable, which is again, tell me a slogan for a home security company. Okay, now I can put in some other things as well, but I also need to do is put in the max tokens. Which basically means, again, we've already talked about what tokens are, but how many tokens do you want Open AI to create for you? If you have this number is very high, then it can give you essays, awards. If you have this very low, then you can only get, you know, I think one is, I think the idea is ten tokens is equal to seven words, right? We're gonna do 100 tokens. The idea of if you want to save your money and save your requests, then you would have lower tokens, right? A slogan shouldn't be more than, I think, ten words. So about 100 characters. I'll make it 200 characters. That should be fine. Okay. Then we're going to make the temperature equal to zero. That's again, very self-explanatory. We've already talked about what temperature is we can toggle it will just make it zero here. The last thing that we wanna do is we actually want to print the outputs. Okay? So we can actually see what it looks like. With that being said, let's go ahead and click F5 on this and see it in action. There we go. We're done. Now what we've done is we've printed the output. The output is actually a JSON file. Well, it's a JSON object rather. And it has a bunch of different things. It has a key called Choices. And within choices, you have the following here. So you have the finished reason, the index, the log prompts, but you also have the response from OpenAI over here. Secure your home, secure your peace of mind. Well, that is a great slogan. It also gives you other metadata as well. So it tells you when it was created with the ideas, what the model was used, the objective, and also tells you how many tokens were used as well for this request. So the prompts, tokens were nine, completion TO kids were 13. Okay, Perfect. There we go. We basically made our first Python function. Well, we've made our first request to Open AI using Python, which is the first step in making a serverless chat GPT API that we can install into all of our applications. Awesome 12. Serverless API: ChatGPT Responses Management: Now that we have a way, basically to use a Python script to access Open AI's API. Basically we gave it this prompt here. We ran the script, it access the API. It basically gave that prompt to this model and then returned to the output, which is this JSON file. That's all great. But we actually need to strip out the text over here because we want to be able to show that in our, in our apps. We don't want to show all of this stuff. All we want to show is the actual text. So what we're going to have to do over here is create a new variable called output text that is going to be equal to output. And let's see over here. So output right now is a JSON. So we're going to access the first element of that JSON choices. So we'll type in choices. We then also going to access the first item within choices, right? And again, since this is Python, the first item is equal to index zero because computers start counting at zero. Okay, so now we're in here. Now that we're in here, we want the text. So I'm just going to put in text. And that should return this string over here, which is great. Alright, so let's go ahead and run that and see how it works. Okay, so I'm going to click Run Python file on that ellipse would I should be doing is printing texts. Let me just do that. Make sure you save it. And then let's play it then. Perfect. Okay, There we go. So now we've been able to actually output just the quote that we need, which is great. Now there's a few things we probably need to clean up as well. For example, we probably don't want these double quotes in here. You probably don't want the period, but we have the main text. Now we can also choose other prompts, right? So instead of telling me a slogan for a home security company, we can say, give me an outline for a course on how to make web applications using bubble. Okay, so I can do that. I will up the max tokens to 300 just to see what it looks like because I want to get more texts back. So let's go ahead and we're going to play it again. One Python file. Okay, it doesn't like something. Let's see what does it not like? Oh, it's because I accidentally did that. Okay, let me go back in here. Click Run Python file again. So it's running, and there we go. Perfect. So over here, introduction to web applications. What is a web application? Benefits of using a web application. Getting started with bubble, the bubble account, building your web application and so on and so forth. So now we've created a very simple Python script. Write that again, given a prompt and a secret key, accesses the API and provides an output for us. The next thing that we need to do is we need to make this serverless. Because we need to basically wrap this in a function that our apps, like Power Apps, power Automate, bubble air table can access on the fly. Okay, so that's what we're going to do next. We're going to now put this into Azure Functions, which means that whenever we need any sort of response from an API, we can basically use that Azure function. And we don't need to have a computer running or it will basically be serverless, which is nice. So let's go ahead and do that on the next video. Awesome. 13. Serverless API: Creating a Basic Azure Function: Hey, let's go ahead and create an Azure function. The first thing that we're going to do is we're actually going to open up a new project altogether. So let's call this the basic Azure function. Okay, perfect. And we're actually going to select this folder. Okay, perfect. The next thing we're gonna do is we're going to click the Azure button here. And again, make sure you're logged in. If you're logged in, you should be able to go here, go to Function App, and actually see Open AI first as a function over here. But what we're gonna do in our local workspace before we push that function to Azure, is we need to create it locally. So what we're gonna do over here is we're going to click the Create Function button here. And perfect, okay. So it says over here to create a new project, we need to specify which folder or LVN. We'll just put it in back. Basic Azure Function, the folder we just created. It's then going to ask us for the language. We're going to select Python. Now it asks us for the interpreter. Now, again, if you've set up Visual Studio code correctly, you should see over here python 3.9, 0.13. If you don't, then you need to manually enter a Python interpreter path. And your Python interpreter, again, can usually be found in the following address here. See users than your name, AppData, local programs, Python, python 39. And here's the interpreter here. But I'm just going to click this because I've set up VS code properly. Then asks us for a template for your projects first function. And we're going to choose the HTTP trigger templates. Okay? We need to give our function a name. Let's call it basic Open API. Okay? It says over here now we need an actual authorization level. Make sure you choose anonymous. What that means is that anybody can access our function. That's fine for now because we're just developing obviously in production, you would want to make sure that you have a administrative account related to it. But for now we'll just put anonymous to make things easy. Now it's going ahead and creating our virtual environment AND function. So this might take, hopefully only takes a few seconds, but sometimes it does take a few minutes. Hopefully it doesn't take too long. Come on. Come on. Let's go. Let's go. Almost there. I hope there we go. Finished creating project. Perfect. Okay. Now if we go back in here, you'll see way more files than you saw before in this basic Azure Function folder. You're right, you see an environment here, you see some extensions here. You see a lot of different files, and we don't have to go through all of them. This course isn't meant to be an in-depth guide to Azure Functions. But the main things that you should worry about if you open up basic Open AI is this in it? Dot py and requirements.txt. These are the two files that you need to worry about. So let's go through an a dot py first. Basically, when your Azure function is called, this is what runs the main function within an app dot py. Currently what this function does is that it basically tries to find a parameter called name and then just outputs it to you in that function. So it's a very simple function. It basically just takes the name parameter, then just output set as an HTTP response. So that's basically it for this function. And this is where we will actually put our main logic. The other file that's important is requirements.txt. This basically tells Azure what libraries do you want to use in your Python script. Now, here is where you would put things like pandas, numpy, any sort of Python libraries. The ones that we're going to be using obviously is Open AI. And we'll do that a bit later. But there we go. This is a basic Azure function that we have created 14. Serverless API: Azure Functions Testing and Deployment: Okay, Now that we have our Azure functions set up, let's actually deploy it just so we get some practice at it and we can see what it looks like when it is truly serverless. So when you're in this over here, again, don't make any changes to it. This is just a default template that Azure gives you. What we're then going to do is we're going to basically run it. So over here, click F5. Okay. So this should pop up. It should basically just do a few executions. And one error that we commonly see when you actually do this for the first time is this guy over here. This activate script cannot be loaded because running scripts is disabled on the system. For more information, see execution policies at this link. Okay? So basically what that means is that visual Studio Code is trying to run the script called activate PS1. But it's not allowed to actually do that because it's blocked on this. So what you need to do then is click this disconnect button first, just so that you're not running any applications at the moment. You then need to change the execution policy of, of, of your system to allow the scripts to run. So what we can do is we can just go over here. Let's just copy this. And again, Google is going to be your best friend here. And I always again show my process because I want to make sure that at the end of this course, you know how to debug errors as well. So what I'm going to say over here is change execution policy to unrestricted. Okay? And, you know, you can usually sometimes go over here to a stock exchange and find the answer. So you can set execution policy. We don't want remote side, we want unrestricted right over here. So we need to run this command basically. Okay, so let's copy this. Go back into our terminal. Sorry, where do I turn a logo? Right here. Okay. And then just paste it. Permission denied. Okay, So it says here start Windows PowerShell with the Run as Administrator option. Okay, that's fine. Something we can do is we can close out of VS code and then just open up VS code as administrator. So just click, just find VS Code and then right-click it and then click Run as Administrator. Again, I just want to show everything that I'm doing because this minimizes the number of questions and frustrations that people get. And you can always go back and forth too if you want to skip this part. But now that we've opened it as administrator, let's copy and paste the command again and see if that works. Perfect, it worked. Awesome. Okay, Now what we're gonna do here is we are going to now go back to this file, click F5 and see if that works. No error so far in the log, that's good. And now, once it's, once this is orange, that means your app is fully up and running. Now in order to. So basically what this means is that your Azure Function is now being hosted locally. And to actually see if it's working, go to Azure, go to your workspace, your functions. Right-click this and then say execute function now. And what we're going to provide that function is a JSON file with the key name and the word azure and change this to your own name. So I'm going to change this to my name and then click Enter. Perfect, the function actually ran locally. And as we can see over here, this was the response of the function. It said hello Henry. This HTTP triggered function executed successfully. Perfect. What that basically means is that we were able to host us function locally. We then triggered it, we pass it the name parameter, and then it returned to that, back to us. Awesome. Okay, Now the next thing we need to do is this is running locally. We don't want to run this function locally because if your computer shuts down, it's not connect to the Internet, then we'll have problems. Instead, let's do this. Let's actually now hosted on Azure Cloud environment so that it can be running all the time on the Cloud. And we can access it from any single application and from anywhere in the world. Okay, So what we're gonna do over here is we're going to click F5 again, so that the application runs and distinct turns orange. Perfect. Then what we're gonna do is we're going to choose We're going to click this button here called Deploy. Deploy to function app. Now it asks you, Hey, where do you want to deploy this to? Well, we already created a function app called Open AI first. So that's where I'm going to deploy it to. That says, are you sure you want to deploy? Click Deploy. Now as it's doing that, let's actually open up Azure. I'm just going to open up my Azure portal again, go to portal.azure.com. And then let's go to our function app that we created called Open AI first. And now here, what's happening is it's actually deploying this function called basic Open AI, right? So that's what we just created in VS Code. So it's actually deploying it after it's deployed, will actually be able to see this in the virtual environment. So let's wait until that's done. Deployment to Open AI complete. Great. If there's any questions there, make sure you let me know. But anyways, what we're gonna do over here is we're going to click basic Open AI. And then there's a few things you can do here. For example, you can see the code, you can't edit it. You can only edit the code and VS code, but you can actually see it, I believe in here, which is cool. Here, yours, our code that we made. Okay, well, you can also do is you can monitor the function. So every time it runs, you can monitor it, it see the logs, see if it's running properly, things like that. But what we want to be able to do is let's go to Overview. We basically want to get the function URL. Okay? So basically this is now our function is hosted on this link. Anybody who accesses this link will basically be able to access our function. So let's click Copy on this. Let's go over here and paste it. And perfect, we basically see that HG, that, that function being triggered. Now right now, it says that we actually haven't passed in a name in the query string, so we need to go ahead and do that. But the function is actually up and running, which is very cool. Now, to test this function and actually pass it. A parameter we need to do is we need to go on Postman. So let's open up a new tab and go to Postman. Postman is basically a platform that allows you to test APIs. It says test APIs, okay? So basically what we can do is we can test this API, pass it that parameter, the name parameter, and see how the output changes. Okay, so let's go ahead and do that. We're going to go to Postman. Let's go ahead and sign in. Now we do need to create an account and everything like that. So let's do that in the next video. But at this point, make sure you sign into Postman because we're going to be using it for the next video. If you don't have an account, just create one. It's completely free 15. Serverless API: Serverless Functions Postman Testing: Okay, Now that we've actually gone ahead and signed into Postman, the next thing is to actually test our Azure function using Postman. So when you've signed in, go to collections here, let's create a new collection called the ***. And we will create a new request within APIs. And let's call this one test. Now, we're going to make a GET request. It asks us for the request URL. Go back over here to your Azure Function. Click Get function URL, copy this, paste it in here, click Send, and there we go. We have successfully tested our API using Postman. It's not that crazy because we already tested it by actually just executing the request in a browser. So it's the exact same response. But now that we've done it in Postman, we can actually see how other things impact it. So let's go to body, for example. Let's go to raw. And what we're going to do is we're actually going to pass it a parameter. And parameters are passed to APIs using JSON objects. In a JSON object basically starts with a curly brace and you put in first key and then a value. So the key will be named. Make sure you put that in quotes. And the value will be your name. So we'll make it Henry. It's the same thing that we have to do when we were testing our function locally. Okay, let's click Send on that. Now we can see that the response has changed. It's taking our input or taking our parameter as an input and outputting it. So it says Hello Henry, I can go back in here and change this to something like light bulb. Now it says hello light bulb. So what you can do is one, you execute this function that now exists. Azure can be accessed from anywhere. You can pass it inputs, not just named, but other inputs if you want. And do things with those inputs. For example, like pinging Open AI servers and then outputting a response. So that is basically the cycle that we're creating here. We've been able to create a very simple Azure function that basically just takes in a parameter name and then outputs that parameter back. Again. This is now public. Anybody can access this, any app can access, as anybody in the world can now use this function for their apps, for their workflows, for anything. This is the first step. Now the next set of videos we're going to be doing the exact same thing, but not with this basic function that doesn't do anything. But instead, with a function that basically takes in a prompt, pings Open AI's API with that prompt, and then returns the response. Okay, Perfect. Let's go ahead and do that. 16. Serverless API: OpenAI ChatGPT Integration with Azure Functions: Okay, Now that we know how to actually deploy functions to the Cloud using Azure functions. And we know how to use Open AI's API. Let's put those two things together. Okay, so I'm going to go into my Azure workspace here and I'm going to create a new function. And I'm going to call that function. And again it's going to be an HTTP trigger function. Let's call it a completion API. Okay? Will be an anonymous function. And what I will do is it'll actually just open up another init dot py and completion APIs. So if I go over here, I can see now that I have two folders, one for the other function that I worked on and one for completion API. Okay, let's go into that one. And again, we, you have this standardized template here. Okay? Now what I'm going to do is let's actually also open up the wrong thing. Let's go over here to let's create a new window. And in that new window, we will open up the thing that we were working on beforehand. Right. So let's work on English. Just call it scratch. No. Yeah, right here. Okay. This is the code that we used to actually paying the Open AI's API and we're going to be copying elements of this code. Okay? So what I'm gonna do over here is I'm going to first import in Open AI. Now, if you just do this and run it, I'll actually give you an error. Because Open AI is not a library that this Azure function environment has access to. That's where the requirements.txt comes in. So if you go to your file explorer, you should see a file called requirements.txt over here, just put in Open AI. What that will enable is that it will basically mean that your function now has access to this library. Will also overhear put in our secret key. So Secrets t. And again, this will be different for you. I'm just going to go pull up mine wherever it is. Let me just find that perfect over here. An API reference. Again, I'm gonna go to click this guy over here, go to View API keys. And there we go. I should basically this API key. I already have it previously, but if you don't know how to get to it, That's how you get to it. Okay? So I'm going to copy my secret key here. Perfect. Okay. Now that we have everything initially set up, let's actually edit our logic here. The logic doesn't really do anything right now. It'd basically just outputs the name back. So actually going to delete a lot of this stuff here. And I'm going to keep this part because we want to know if it succeeded, right? So I'm going to keep this part here. Let's also do status code equals 200 here. Perfect. Let me just get rid of this guy and awesome. Okay, So this is our code so far. Let me commas there. Okay, Perfect. Let me just put a return here. Okay, awesome. So now this is where our main logic will go. So the first thing that we need to do is we need to just put this in comments first. We need to give open API our secret key to authenticate. We then need to get variables from the HTTP request body. Will then need to call the Open AI's API. We then need to format the response. Then finally, we need to provide the response. Okay? So first of all, give open AIR secret key to intoxicate. This is very simple. All we need to do is we need to type in Open AI to access that object and have the API key property equal to this secret key variable here. So step one is done. We then need to get the variables from the HTTP request body. And we already know how to do that. If you go back in here, you can actually see that this is how we do that. We basically do wreck body equals get JSON. And then you can put in any JSON variables you want. So I'm going to put that, so wreck body equals req dot get JSON. So whatever JSON file is inputted in the request, we will get that into rack body. And what we want then is to call variables when we actually call the Open AI's API. So what we'll do over here is we will say output equal to Open AI. And we'll use the Complete, the completion function. So Doc Create. Now again, similar to what we did before, we need to pass in all these different arguments into this function. Okay? So what I'm going to do over here is I'm going to have model be equal to the variable that is provided to me in this request. Okay? So I'm going to make Model equal to the input model. We're going to have prompt be equal to the same thing, rack body. Prompt. We're going to have max tokens. Again be equal to something that's provided to us, max tokens. Then finally, we're going to have the temperature provided to us as well. So temperature equals temperature. Okay, perfect. Now the next thing we need to do is we need to format the response. And again, we've done that in a previous video as well because we note that the response is in JSON form. So we're just going to copy the exact code that we had before to format output into a valid response. And then what we need to do is we need to provide the response or more so echo the response and basically return it from this function. So all we're gonna do is we will get rid of all of this stuff here. And we'll just type in output text. Okay, there we go. Whoops, this should be underscore body. Okay, perfect. Let's click Save on that. And then in the next video we'll actually try running it and testing it. Will do it locally before we actually deploy it online. 17. Serverless API: Open AI ChatGPT Local Testing: Okay, Now before we test anything, we always should read our code back just to make sure it's okay. For example, one thing that I did find is when I was copying and pasting this, I actually didn't copy and paste the wreck body for the temperature. So I'm just going to do that now. This is very common. You'll forget things in your code all the time and it's just a matter of fixing it. The other thing that we need to make sure we know is we need to provide a sample request to actually test if this works. Because right now this function will only run if we pass in the following variables into our request body. So what I've done over here is I've created a sample request. And again, this is in JSON form. So you have the model equaling texts, Da Vinci, you have the prompt equaling four. In this case, just give me a slogan for a cookie company. You have max tokens equaling 200 and you've temperature equaling zero. Now, we can make it wherever we want. And the point is that whenever our application uses this API, we can pass in whatever model we want, whatever prompt we want, and so on and so forth. So let's make sure we click Save and then click F5. And I'm going to copy this prompt. Oh, not the prompts, sorry, the request body. Okay, I'm gonna go into Azure here. I'm going to click function's going to right-click on completion API and click Execute function. Now it says enter a request body. Let me enter that in. Click Enter to confirm. There we go, it's executed the function. We can actually look at this and it says here that the response is taste, the sweetness of our cookies. Awesome. Look at that. Now we're actually able to use this function however we want. We can pass in any prompt, any model, any Max tokens, any temperature. And it will work. Currently. It will only work locally, but that's fine. In the next video, we'll actually push it up. So then what we've done here is we've created our very own Open AI API. And you pass it a model prompt and so on and so forth. And then by doing so, you can actually get a response back. So this is the wrapper API that we've created. After the wrapper API is done, we'll learn how to integrate this wrapper API into Outlook Power Apps, power Automate a lot of different applications, and that's where you can actually start creating those applications. Awesome 18. Serverless API: OpenAI ChatGPT Deployment to Azure Functions: All right, now let's actually deploy our Azure function completion API, which uses the Open AI API, which is again, very cool. Okay, so what we're gonna do is we're going to run the application again. Perfect. We are then going to go over here and we're going to click Deploy. Deploy the function app. We're going to deploy to the Open AI first function app there'll be created. And if we go, if we now go back to Azure, we should see over here, if we go into the OpenAI first function app, we should see two functions here. Now. Not just one. We just have to wait until it gets deployed, but we should see it soon. As basic Open AI. That's this one over here. Deployment latest not found. Huh? Interesting. Okay, let's just try that again. I'm going to open AI first. I'm on. Well, it's taking longer than before, so that's a good sign here yet. No, not yet. Limit to Open AI first completed. Okay, So it should be there. Let's go back in here and let's actually refresh the entire Azure page that's linked. There it is, completion API. So let's go to it. And we will again go here and click Get function URL, copy it to the clipboard. Now, if we just try to run it and normally I believe will fail. So if I just tried to run it like this, for example, it will likely fail because it says this page isn't working. And again, that's because it actually can't find these requests. So we need to run it in Postman, which is why we were using postman to begin with. Okay, so let's go back into Postman and we will add in a new request. This will be called our completion API request. We will enter the request URL, which is again this guy here. Okay? Now let's go to body and we will put in that JSON string, right? So if I go back in here, click this guy, put it in here. And we can also format it a little bit as well. So these are the four arguments that our custom-built serverless AI function takes. Okay, Now let's make a request to this page, but not without anything with this body. Okay, So let's click Send now. And there we go, we get a response back, taste the sweetness of our cookies. Now we can change this to something else. Let's instead change this to telling me in 25 words or less how a computer works. Okay, Let's click Send on that. Computer processes data using hardware and software to perform tasks and provide information. Perfect. Okay, There we go. So now we have a full fledged serverless Chad GPT API working that we can customize. So we can not only return the response, we can return tokens, we can, for example, also use it to return not only this model, but other models, we can use it to return. Right now this is using the completion API. We can create another API for pictures. We can create another API for instructions and so on and so forth. But since we've created this, and again, this is our own API, we can now put this in any application that we want. So that's really the, sorry, That's really the end of this section here. Being able to create a serverless chat GPT API that's custom. The next part we'll really be integrating this API now in applications, which is again, the next step that we will be taking. Awesome. So congrats for creating your very own serverless chat GPT API. Again, you can now use this with postmen and really give it any prompt you want and it will return a response back to you. Awesome. 19. Outlook: Configuration of Office Add-in Environment: All right, Now the next very common software that we will integrate Open AI width is Outlook. Outlook is a simple e-mail client. If you've worked anywhere in the business space, you are familiar with Outlook. For this, you will need an Outlook client and an account that has an outlook subscription in it. So make sure you have that. You can ask your company or you can also buy Office 365. I think it's like $8 a month. And you get access to Outlook, Word, Excel, all the Office Suite products for a pretty cheap price on a subscription type basis. Alright, now, before we get started, we have to set up our environment. Basically what we need to do is we need to install the tools that allow us to add in Outlook extensions and add-ins. The first thing that we need is we need a code editor. Now we're going to be using Visual Studio Code, right? So the same thing that we use to actually create the API, to create the Azure function and so on and so forth. Okay? You also need something called Node JS. So let me open up that guy over here. So that can be found at Node js.org. It's basically a JavaScript runtime environment. It allows you to create apps with JavaScript. Now, to be honest, I don't know JavaScript that well, but that's fine because you just need it to actually run that app. The whole backend can still be done by your Azure Function. Okay? Now when you're on this website and make sure you click the LTS version and not the current version. So make sure you do that. Let's click this guy over here. Will then open up the installer. Then go through the process of actually installing Node JS. I already have it installed, so I don't really need to need to do that. Now. Something that you probably want to make sure that you have is you want to make sure that your version of Node JS is properly installed. So I think there's a quick command you can run for that. And it is, let's see. I think if you go over here, whoops, go over here to your, this guy. Let's create a completely new folder. So open folder documents, we will put this in a new folder. This will be our Outlook add-in. Will click Select Folder. Okay, perfect. Now the next thing we wanna do is we want to open up the terminal here. Now once that's unlocked, just type in node dash, dash version. So you should be using version. For me, it's 18.13, 0.0, but it should basically match whatever says as LTS over here. Now if in the future this is 20, this is 20.1, that's fine. Just make sure you use the LTS version. You should also have something called NPM installed when you install Node. So if you type in npm dash, dash version, perfect. So the NPM version doesn't matter as much. You'd have to make sure that your Node version is Version 18.13, 0.0. Okay? That last thing we'll need to install is something called Yo man, okay, now, I know it sounds pretty weird. But young man is a very cool packaging tool that allows you to create new projects. So Microsoft actually uses Yo man to configure your outlook configurations to make sure that when you're making it look extension, everything that's there is neat, is actually built in. So it's more of a project builder for you, as you'll see it as very easy to use tools. So the first thing we wanna do to actually install this is run this guy over here. But what we're actually going to do, because we only need the specific version of Yo man for our needs, is we're going to type in npm install dash g, yo generator dash office. This is the Yo builder for office specifically. Let's go ahead and let that run and finish. All right. Perfect. Okay. There we go. Now we've had we have everything installed that we need to install to start making an Outlook add-in, especially one that can be that can communicate with our chat GPT API that we've made that basically pings Open AI's servers. Okay, perfect. 20. Outlook: Creating an Office Outlook Project: Okay, Now the next thing we'll do is we will create our add n project. Okay, so we're going to use Yo man to actually do that. So it's very simple. Now, make sure you're in the directory that you want to be in, in VS Code. And then in the terminal typing yo space office. Now it's doing its thing. It's basically configuring the project. Now, this is a bit hard to see, so you can actually move this up and see what it looks like. So it says over here, blah, blah, blah, blah, blah, blah, office. I didn't see, I like to collect on anonymized usage data. So now you can actually use your arrow keys with your terminal to select something. We're going to select Continue. Now it says choose a project type. So do you want to create an Office add-in task pane project using React Angular. Do you want to create a custom function? Lots of different things you can create. We're going to create Office add in a task pane project. Okay, so let's click Enter on that. Now it asks you what language do you want to use. It's up to you if you have a preference between JavaScript and TypeScript, go ahead and choose one. I'm going to use Java Script. What do you want to name your Office add-in? Let's name this test outlook. In which office client application would you like to support? We're now just going to support outlook, but this is where you can take multiple ones. And now it's actually creating it. Just doing its thing. Solving a lot. I might have to put this in another video. Why don't I stop the video for now and then I will continue when this is complete. Never mind. It's all complete. Okay. That was perfect. There we go. Now, we'll basically what we've done here is we've added in a folder called test out. Look at him. And if you go to that folder, you'll see it's already made the entire project for you. And there's a few files that we should really focus on. The first is the manifest dot xml file. This just shows you some configurations of your project. What do you want your icon to be? When we actually click the Outlook add-in, what you want the icon color to be. What you want to say on the display name of that icon. What ribbon do you want it to be part of? Where's the location that this will be hosted on, just random things like that. But there are pretty important. The main code is actually its source. So if you go to source and go to Task pane, this is really where your app is, live, living in fired from. So first of all, you have in the HTML of your app, which is basically think of that as a thick of an app, as a very micro website. A website has HTML, CSS, and JavaScript. Html is basically what you see when you open up the application. So for example, over here, you can change the body to see something else. Instead of saying achieving more with Office integration, you can make that say something else, and so on and so forth. Css is more for styling, right? So what do you want the colors to be? What do you watch your padding to be? What do you want your display to be? This is very useful because this actually works with HTML. To produce the front end that you see. The HTML is more of a skeleton of different classes, and the CSE file defines what those different classes look like. For example, we want everything with the MS welcome main H2 header to be width equals 100%, the text alignment to be center. Finally, you have the underlying engine of the application, which is the JavaScript file. So basically this actually runs code. When someone clicks on the application and click the Run button. This is where we'll actually put in code to access the third party API that we've made. Provide a prompt, get the response back, and then show that a response in a neat and tidy way on the HTML file. Okay, so there we go. The last thing we should do over here is make sure that we've now we're actually not in our project folder, we're in the parent folder out. Look at him. He's had to make sure that we're in test out, look at it. Okay, So what we can do over here to make things easy is go to File Open Folder. I think go-to look at it and then go to the folder that was just created from yo and collect, select folder. And there we go. Now we're in and where we should be if you open up Terminal now, I'll actually be at the right space. And you have all of your files here on the left as well. Okay. Awesome. 21. Outlook: Outlook Add-in Launch: All right, Now that we've built our first Outlook add-in project, and we've actually gone ahead and gone through some of the code behind it. Let's start it and see what it looks like on Outlook. Now this is going to be a task pane. So you will click a button and then a paint will come out from the right side where we can affect our application. Okay, so open up terminal and from over here, type in npm. Start. Again, make sure you're in the right folder. There should be the folder that was created from Yo man. Okay, So let's click npm, start, started doing its thing. I'll start loading things and you probably will see something like this pop up as well. Now, you might have to install a developer certificate, so you might get a security warning like this. Just go ahead and click Yes. It because right now we're not using HTTPS. Any kind of forces you to use HTTPS. So you get lots of messages like this haze to secure. Yes, it is because I'm developing it and so on and so forth. Okay, perfect. So after this has ended, your outlook should just pop up automatically. Now, you should see a show task pane and perform an action over here. Okay, Now, in order to activate these, you need to be in an e-mail. So for example, let me open up this e-mail over here. Now I can see show task pane and perform an action over here. So I'm going to go ahead and select Show task pane. It says to debug the web view attach VS code to the web view instance using the Microsoft debugger for Edge extension. This is if you want to, if you want to debug in a professional manner, you can download this. But for our purposes, we're creating a relatively simple Outlook at an application. So we won't need to do that. Okay? And there we go. This is our admin user logo or a welcome message. Discover what you what Office Add-ins can do for you today. Modified the source file, then click Run, blah, blah, blah, blah, blah. Right now if we click run, nothing will happen. Run basically executes the code that's found over here in source. Task pane, js, the run function. Right now there's nothing in here, so nothing actually runs. Okay? But this is the HTML front end over here, right? So what we could do very simply is go over here, go to HTML, and then change this, right? So instead of saying achieve more with Office integration, we can say something like hello world. And then if we go back over here, I think we actually probably will need to restart the application. Yeah. Yeah, we don't need to do that. So how to restart it? What we can do is we can go back to code and type in npm. Start again. Click Okay. Now a new version of Outlook will start. Now let's go over here and select an email, show task pane. Oh, you know what? I'm so dumb. I think I forgot to just save the file. Yeah. Make sure you actually save the file. So Control S is how you save it. Let's do that again. Show task pane, click. Okay, hello, world. Awesome. So this is how you build your Outlook Office, add an application. You have all the tools now you need to actually build whatever application you want. What we will do in this module is we will just make a test connection. Basically, what we'll do is we will create an application very quickly that will take the contents of your e-mail, whatever has been selected. And after you click Run, it sends those content or maybe even a subject line to our Azure Function API. And then it will return a response from it. And it will show that response in the task pane over here. Okay, awesome. Let's go ahead and start doing that. 22. Outlook: Running ChatGPT API in Outlook: Now that our Outlook add-in is working properly, let's go ahead and see if we can make an API call from our Outlook add-in to the chat GPT API that we made. A reminder, just our chat GPT API. The one that I've made, at least this is the link for it. Make sure it's a post request, not a get request. And then this is the body it needs model, prompt, max, tokens and temperature. Let me just zoom in here as well. Then if I click send, it, then returns me basically the response from Open AI's da Vinci model. Okay, perfect. So let's go into our Visual Studio Code and then go to Task pane dot JavaScript. Again, all of our code that will be running, we'll be done here, and this will be done in JavaScript. Now, I don't know about you, but I'm not that familiar with JavaScript, but you actually don't need to know much in order to just make a simple API call. Eventually what we'll wanna do is we'll want to take an element from a message, for example, something like this. And then click Run. It sends that message to our function and maybe summarizes it or something like that, and then returns a summary of it from Jiangxi PT. So for example, we can ask chat GBT very easily to summarize the following statement in 25 words or less. But again, the first thing you need to do is make sure we can actually connect to chat GPT from Outlook. And as you will soon see, it's a lot harder than you think. Not because of JavaScript, but because of security. The security thing is very intense, but I'm getting ahead of myself. Let's go ahead and put in our code. Okay, So basically how to do how to actually run an API call from JavaScript is there's a function called fetch. And fetch takes two things. It takes a URL and it takes other parameters. For example, like the body, the headers, things like that. Okay? So that's it. This is what we need to do. Now when you define these things. So why don't we create a, a constant, a constant variable called URL, will make it equal to the URL of the function that we created. So I'm just gonna go to Postman and just copy this guy in here. I don't think I need everything else here. If I just click Send. Perfect, Our works, okay? Perfect. I also need these other parameters defined as well, right? So let's create another constant. So constant, other parameter is equal to, and this will itself be adjacent. So I wanted to find a few things. I wanted to find the body of the post. I want to define the method of the host. So the method is going to be a post rather than a get. And we've talked about the differences in a previous lecture. The body is going to be equivalent to this JSON body here, where we need to define the prompt model, max tokens and the temperature. So on where to do is I'm going to copy this. I'm going to put it in here in single quotes and then click Paste. Now unfortunately, what you need to do is to backspace in and get rid of the, Get rid of the new lines. Let's go ahead and do that. Okay, Perfect. And then put a comma at the very end of that as well. Also, since this is JavaScripting to put in a semicolon at the end of every statement, just so that it doesn't mess up. Okay, Perfect. So now we have other program, sorry, this is other parameters. Let's change this to other program, Okay? Now we have both of those things defined. Perfect. Now, the next thing that we need to do over here is we need to actually save the results of this function somewhere. So let's create another variable, constant response and make it equal to fetch URL. The only thing is that fetch URL is an asynchronous function. You actually need to put over here a weight. Okay? Perfect. Well then do as well as we'll create a new variable called output. So var output, that will make it equal to the response that we get from this fetch function. So basically calls the API. It then returns the response object, but this is not the response itself. It's basically has everything about the response. When it was responded with a status code, is everything like that. All we want is the actual text from the response, which is this guy here. So all we want is the response dot txt Okay, perfect. And let's just make sure we put it in as a function. Okay? The last thing we'll do is we will log the output. So console dot log. I would quite alright, perfect. So let's click Save on that. And a lot of Outlook window is open. Let me just clean up a bit here. As I was testing a few of these things prior. Okay, let's go in here and type in npm starts. And it will open up any new outlook screen. That's this guy over here. So let's go into a message I received from someone which is too wordy for me. I'm too important. I don't want to read this so I can click Show task pane over here. And this is our function. Something you can do is you can right-click it and click Inspect. And this will allow you to basically look at the console.log. Okay? So those are few errors in here, but that's fine for now. We don't need to worry about it. But what we can do over here is click Run. And look at that. It outputs correctly. So what it's basically doing in the code is, it is, let me just go back here. It is calling this API. Okay. Well sorry, it's, yeah, it's called, it's calling this linked API. It then gives it this body So defines the model, the prompt, the max tokens and the temperature. It then makes a post request, and then it returns that post request. And then it translates that into a text for us. And then it outputs that text. There we go. It's that easy. And now we've made a linkage, Rob from Outlook To Chat GPT. So again, if I go over here and click Inspect and go to console, every time I click Run, you can see that function running. So you'll see it over here on the left-hand side. If I click run. Again, the two means that it's happening again. So a computer processes data, blah, blah, blah, blah, blah. I can go in here and change the prompt, right? I can say instead, what is ice cream? And save it. And then go back to my Outlook, open up the inspector again, go to console and then click Run. Ice cream is a frozen desert of blah, blah, blah, blah, blah. Perfect. So we've been able to connect the two together. Now, if this doesn't work for you and if you get an error, if you get a corps error or something like that. Again, I shifts at this before. If you get a course error, then you need to set up your security protocol correctly. And to the next video, we'll learn how to do that. But at this works for you, then you're fine. You don't need to worry about it. But if this does not work for you, then follow the next video we will go through how to actually resolve the cores issue. Okay, Awesome. 23. Outlook: Fixing CORS and Security Issues in Outlook: Hello everyone. If you were successfully able to connect your outlook to your Azure Functions, then you are fine. You don't need to go any further. However, if you get a course error or a allow origin error or anything like that, then follow the steps in this video and it will be resolved. You know, if you have, you have a course error. If it says on the very red over here, it'll say something like allow origin error or CORS, cores error or security error or something like that. And it's actually a good thing. It's basically not allowing your outlook to make a connection with a random API. It's also not allowing the random API to make a connection back to Outlook. So it's actually a good thing that this happens. But it's also very annoying too, because although it's very secure, it kinda stops us from connecting Outlook to various different APIs. So we need to basically allow that to happen. So there's a few different things you can try. Okay? The first thing you can try is let's open up our Azure function. So again, let's go into Azure. Click our Azure function name. And if you go into functions, these are all your different Azure functions here. Perfect. Okay. What we wanna do here though, is if you go all the way down to API and you see there's a button called API Management and one called corps click horse. And then basically make sure this is de-selected. And then delete every else, every other record in here and put an asterisk that it's basically doing is that it basically means that anyone from any single website, from any browser can now access your API, which is obviously not secure. But for our development purposes, it's fine. It also says that here, Cross-Origin Resource Sharing allows JavaScript code running in a browser on an external host to interact with your back end. Okay, so just put asterisk and then everything can basically access this function. Then go all the way to the top to Overview. Click Refresh, refresh your function. And now if you go back and run your code again, let's open up our outlook again and click Run. It should now work. It says two over here. However, if it doesn't, then you need to take an additional step because clearly your browser or your outlook is very secure. How you would do that is you actually need to create an API Management Service. Okay? So what you can do over here is, isn't an incorrect state, it might have been deleted, blah, blah, blah, blah. That's fine. Let's click a link. So if you get something like this, just click unlink. But what you can do over here is create a new API Management Service. Let's, let's click Create new. Subscription doesn't matter. Resource group doesn't matter, Blah, blah, blah. Workspace name. So we're going to call this open because it's not secure. It's open completion API. Or let's just call it an open API. And then just put in some random numbers because it needs to be unique. So I'm going to put in 562, for example, then put an administrator e-mail I'm going to put in my email. Okay. Perfect. Okay. And make sure you check consumption. Consumption pricing is, I think the first million requests are free or something crazy like that. So look at the pricing of your concern, but definitely click consumption and not any of these other plans because they are, they are way more expensive. Okay? Just choose any random Application, Insight instance. Scale doesn't matter. Identity doesn't matter. Virtual network doesn't matter. Protocol settings. Nope, Doesn't matter. Tags, That's fine. Validation failed. Required information is missing. Oh, no. What did I miss? Specified service that was already in use. Okay. We can do open first AI, five-six, five. Let's put the same number of 562. Okay. Fine, fine, fine, fine, fine. Review and install. It will be make this a lot more zoomed in so you guys can see a bit more. The create deployment is successful. Now this says over here that's in a transitioning state. So it will take a little bit to kinda get this up and running. So let's just give it a few minutes here. Services being activated, we have to wait for it to be done and complete. Still being activated. We just have to wait at this moment. Again, if this is working for you, don't need to go through this video. I think if I go back right now, might not be working for me either because I just installed a security system, but let's see, run. It still works. That's good. Services being activated. Hurry up and activate. Let's go back to our Azure function and make sure It's being connected properly. If we go to API management over here, your app is linked. Okay, perfect. It has been linked. Amazing. So now what we can do over here is select API for your app. We're going to, well, actually let's go to API Management first. Let's go to API. And then we'll select over here, define a new API. Mainly define an HTTP API. Okay? Now we need to give it a few more things over here, but that's fine. This one can be called completion API. The web service URL doesn't matter here. Let's click Create. Okay, perfect. Now let's go into settings and make sure we've selected HTTP S here. This is the more secure setting subscription required. Let's de-select that guy here. We don't need to put in any header name or query parameter name. That's fine. Let's click Save on that. Let's go to all APIs. Go to settings for all APIs and make sure we've done the same thing. Perfect, there's not a requirement there, so that's good. Okay, Let's go to now Inbound processing over here. And we're going to add in a, make sure you've selected all API. So either way, if we go over here, Let's go now to our Azure function. Go to API Management. And over here click completion API that, so that's the one we just created. Let's import the functions and click link API. And we want to link both APIs and let's click Import. Perfect. Now what you'll see if you go into API management, click, well, let's actually go into the full API Management and go to APIs. You'll now see something called completion API. And if you go to all operations, these are all the operations you can make with this new API you've created. You can post to complete it API, you can make a post to basic Open AI. So basically you can make a post or a GET request to all the Azure Functions after you've linked them together, which is very cool. So now what we wanna do over here is we want to add in a policy, okay? But make sure that we've selected all APIs. And then go over here to policies. And what we want to add it over here is a policy for inbound. Okay? So let's add in. Over here, inbound. We basically wonder inbound traffic to change. So make sure you have your inbound open and close. And then inside it. Over here towards the right. Select, show snippets. Scroll down and select course. Perfect. Okay, Now a few things we need to edit. Make sure by the way, this is in the inbound. Inbound, okay? First of all, we want to change this to host. Okay? Let me see over here. Allow cross-domain calls. Okay? Yeah, we want to make sure we set this to post. Everything else in here. Looks fine. We don't need to change any of that. Let's click Save on that. Now that is not an absolute URL. Let's see over here, error and elements. Okay, Let me see exactly what CORS requests we want because I think Microsoft might have changed this or updated it, which is very annoying. Um, so just give me a couple of seconds here. Okay, perfect. I'm just going to copy and paste from a from a resource that I have because it looks like this was not the correct core source. Anyways, let's paste that guy n. So this is what it should look like, okay? So you have your core is allow credentials equals true. You don't need to have that in there. Um, allow origin. We want the origin to be from anywhere. So we're going to replace this particular link with asterisk. Allowed methods pre-flight, that's fine. Um, allow headers, that's fine. Exposed headers, that's fine. Okay, Let's click Save on that. Perfect, and that's saved. And I'll make sure I put that text in the link, in the description below is just so you have it. Okay? Now what we wanna do is if we go all the way to the left, if we click our completion API and click our post-completion API, which is the one we want. Let's go to those APIs, policies and click calculate effective policy. So this will tell us for this particular API, this is the policy. It's going to allow everything to access this API, which is what we want to do. Okay? But we are not yet done. Okay, Let's go to API management. Go all the way down under APIs to go to products. Okay? You have to click Add to create a new product. This one will just be open API. Api description can be blah, blah, blah. It doesn't matter. Okay? And make sure we de-select, require subscription. And then we're going to add that API to it. Completion API. Okay, and let's click Create. Perfect. Okay, so now we've done everything that we need to do. Basically what's happened is we've created a, another API that, that accepts requests from anywhere from all origin. And to find that APIs URL. If we go here to post, we actually test it. It's taken a lot longer. There we go. Okay, this is the name of the API over here. Okay? So we've actually tested in here, but this is the request that we need to make. Now this is a different length than what we had before, right? This is now different. If I go to my old postmen, we just find it here. That was this length. This is to our Azure function. But what's happening here is once you make a request to this API, which can be from anywhere, it then makes a request to this API that we've created, which sorry, this function. And then that makes a request to open AI's API and so on and so forth. So this is like API inception. We needed to provide an API management service on top of our Azure function to allow requests to come from anywhere if you are getting that course error. Okay, Now to test if this works, go over here. Let's create a new Postman requests. So we will go over here, click Add request, and we'll say completion API from all origins. Make sure this is a post request. Let's enter the request URL over here. Let's go to body. And we're going to take the body from completion API and put it in here. Okay, Perfect. Now, this is how you know that this is actually working. What it's doing again is it's going to this API, which then goes to this API, which then goes to open APIs api and makes the prompt, gets the response and then sends it back using that method as well. So we're painting, we're basically putting a security layer on this Azure function, which is what this guy is here. Okay? The good thing again is that this Azure function can be accessed by any origin. Now, if I go back to my Visual Studio Code and replace this URL, which is the function that we had before with this guy instead, which is now our API Management Service. And click Save. Now, if I go back to my outlook and go to Inspect, this should now 100% work. Okay, Now, obviously it was working for me before too, so I didn't technically need to do this. But if you are getting a corps error, then that is how you That is basically how you resolve it. Okay. Awesome. Hopefully that was helpful. Hopefully that resolved in EE cores or security errors that you were getting. But if you haven't, please, please feel free to message me directly. Linked tree or anything like that. And I I can help you with that. Or the Q&A feature or anything like that. Okay. Thank you so much 24. Outlook: Email Body Transfer to ChatGPT: Okay, Now that we have our outlook working and connecting to an Azure function, Let's go ahead and make a useful application. Here's what the application will do. The application will allow users to go into their emails. Let's see if you get several emails. One, for example, from this one that I got. And you can double-click it. You can click Show task pane. And then once you click Run, and it will actually summarize the email for you. What will actually happen is that it'll send the contents of the email to open AI's servers with a prompt of, please summarize, and then we'll return that summary back to you. Show it over here. Okay. Easy, peasy, lemon squeezy. Alright. Now, again, I'm not an expert in JavaScript, but you don't need to be an expert in JavaScript to do this very simple task in Outlook. Okay, so let's open up our Visual Studio code. Make sure we are in our function run and do some things here. The first thing that we're gonna do is the task of going to this website and returning a response and all that. We're going to put that into an asynchronous function. So it's easy to call. So we're going to create a new asynchronous function called run Azure. Okay? And that is going to take in a body. And we're going to put it over here. Perfect. So a few function, so a few things that this function does. It basically calls the URL, calls the other parameters. But we also need it to do over here is the prompt shouldn't just be what is ice cream? Write the prompt should be. Summarize the following. In how many words do we want? 50 words in 50 words? In 50 words or less? Okay? And then this is where we put then the body, which is basically the body of the email, okay? Now how you add it or concatenate strings together is you use the plus sign. Okay? So we're going to make these two separate strings. We're going to put a plus in-between. And then in here is where you would put in body. Okay. Perfect. However, we know that once this just takes the body of the email, but we want to get rid of things like quotes, spaces, new lines, new paragraphs, want to smash, smash all of it together. Okay? In order to do that, we have a lot of different things we can use, but this is something that our LLC just googled. If I'm going to left-click it and paste it over here. And again it can be body dot this. This can be found in the description below. But what this does is, first of all, it replaces all quotes with empty spaces or with nothing. And also does a trim, which means that gets rid of any leading spaces or any trailing spaces. What it then does is it replaces new paragraphs, new lines, and everything like that with an empty space as well. So basically, I wish everything together. And thus we want when we provide the prompt to chat GPT. Okay. So far, so good. Great. Perfect. Okay. The next thing that we're gonna do over here, yep. Constant response, that's correct. Or put text. Yep. And then since this is now a function, we're going to return at the outlet somewhere. So overturn and make sure you put the picture, you put this in curly braces, but we're going to return the output. Okay, awesome. So that is our super amazing function called run Azure. Great. We need to define some more functions. We also define a function that gets the body of the email, right? So I'll put this on top. Actually. We're going to create another function called async. Function. Get body. Okay? Make sure you use the curly braces here. Now here you have access to something called Office, sincere and Outlook. And it gives you many different methods. One that we're going to use is called Office dot context, dot, mailbox, dot item dot body. This basically gives you, hope, sorry, item dot body. This basically gives you the contents of the e-mail that the user has currently selected. But it's an asynchronous method, so we need to put in dot, get a sink. Okay. It's going to be a text. And we're going to wrap it in a function. So we're going to put it in function over here, which will take in the results. Then we need to introduce the curly braces here Okay. Now, if that was confusing, it's totally fine. You just honestly, I don't understand JavaScript that well either. But if you know JavaScript, that's great. If you don't. There's many resources online, but this is again, the context of this course is to get you familiarity with how to connect chat GPT with different applications. So I'm sorry that I can't explain all of this for you. If you have any questions, you can let me know. But that's not the scope of this course anyways. But if you do want to learn more JavaScript and there's plenty of free content for you to learn that, and especially how asynchronous functions work. Okay, Perfect. Now we're going to do an if statement here. And what we're going to say here is if the results of us getting this body is successful. So if result dot status is like Office dot async result status, dots succeeded. So if it'd basically succeeded, then we want to do something. What we wanna do is we want to make the variable body equal to result dot value. Now we don't have a body variable defined, so it's at the very top of the left body equals blank for now. Okay? So basically we get body will do is it will actually get the body of the email and then assign it to a variable called body. Okay? Perfect. The last thing that we want to do is we want another asynchronous function. I know there's lots of asynchronous function say, to actually wrap everything together. So that will, Let's put on the very top as well. So this asynchronous function will be called. Let's see, output results. Okay? And this function, we don't, this function will take in the body as well. So what this will do is it will first log the body just to make sure because I want to see what the body looks like, right? It will then call the run Azure Function. Await, run Azure with the body. So it will basically take the body from get body, and it will then pass it to run Azure. Okay, which will then call the API, whatever, whatever, and then give the output back to us. And we'll put it in the response variable. And the last thing we wanna do over here is you want to console dot log the output of that. So response dot output. Okay, Perfect. Now, that's basically everything we need to do here. The last thing we need to do is we need a function tax the execute all of these things. So at the very end, Let's just put it in here. Await. Get body, by the way, await is how you call asynchronous functions. Okay? So here's what will happen first. Get body will run, get body will get the contents from the will actually get the contents from the e-mail that's been selected. And it will put it in a variable called body, which will then, and I missed the step, which will then execute output results. Okay? Then we go over here. Output result will then log that body so we can see it. It will then transfer that body to the function run Azure. Run Azure will take that body combined with the other parameters that we have here, and then make a post request to that Azure function and then get the response and put it in output. We will then put that output and put it into response. And then we will log the open of that response as well. And that is the last thing for now. For now, we'll do some more fancy things afterwards. But that's all it will do for now. Okay, Perfect. Let's go ahead and save. And in the next video we'll actually run this and see how it works. 25. Outlook: Response Pasting in Outlook Add-in: Alright, Are you excited? Are you excited? I'm pretty excited. Okay, So we've saved our code, we've run our code. Let's go over here into our e-mail that I've opened up. And instead of this one, Let's choose one that where there's plenty of spaces and quotes and bad things and stuff like that. Okay. Let's go to show task pane. Will then right-click and click Inspect. We'll go to console and we'll see if this works. So I my console over here, Let's see if I can zoom in, into my console. I can zoom in a little bit. There we go. Okay, let's click Run. So here's what happened, which is very cool. First of all, it logs the body. This is the body of the email, right? This is exactly like this over here. It then took that one thing I forgot to actually log out. Yeah, I'll just do this for instructional purposes. I don't need to, but this is good for you guys to know. I'll actually log out the, this guy over here. So let me make this into another variable. You make, let me put this into another constant variables. So constant body json equals this guy. And then I will make the body of the other parameters equal to that variable I just created. And then let's actually log out. Console.log this body JSON as well. Okay, Take two, Let's go back in here. Click Run. Now the reason why I wanted to show you that is because check, check out what the code is doing is it's taking this email is then transferring this into a Azure body. Sorry, it's turning this into a body that the Azure function can take. This is exactly the same as this. Over here. This postman request model prompt max. So because temperature, but the prompt is now summarize the following and 50 words or less. And then it gives the email, and again it ships all the quotes out, strips all those spaces out, everything you need to space out. Then sends that to our Azure function, which then sends out to our API and then returns the response. So this is directly from Chuck GBT. It's basically summarize that entire email and 50 words or less, which is amazing. Amazing. Okay, Perfect. Now the final thing that we need to do over here is we basically need to save this somewhere so users can actually see it. Right? So let's go ahead and do that. Perfect. So over here at the very end of this output results, what we're gonna do is we're not only going to log it, but we are going to change the HTML as well. Now where do we want to save the results? Let's save the result where you see discover what you can. Maybe not there. How about this HelloWorld as well? Maybe we'll replace everything in here with that. So let's go over here and find where that is. Discover what you can do. Yeah, Let's honestly, let's replace the app body, which is this entire thing over here with that summary. Okay, so let's change this. So we just need to make a note that this is called App body. The other thing is we need to do is we'll change the name of the button from R1 To summarize this email. Okay, perfect. So again, we want to replace app body. So what we do in JavaScript is JavaScript can interact with HTML. So what we'll do is we'll do a document dot get element by ID. And again, the idea of the element that we want to change is called app dash body. You can see it over here. Dash body. Okay, perfect. We are now going to put in the app dot body. We're going to change the inner HTML. Okay, perfect. And now we're going to do a few things here. The first thing that we're going to do over here is we are going to basically put in some bolded words. And the bolded words will be something like, here's the summary, summary colon. And then we're going to put in a line break. And then finally, after that, we're actually going to put in the response. So we're going to put in response dot outputs. Okay, Awesome. Let's click, Save on that. Let's go over here to Outlook. And let's click Run and see what happens. So this has changed to summarize email. Let's click summarize the e-mail. Summary Environment, Canada, blah, blah, blah, blah, blah. Isn't that so cool? Now you can do this with any single e-mail. Right now. I don't have lots of e-mails, so I kinda test width. These are all a bit big, but see if, see if I can summarize this email here. Show task pane. Summarize. This was an error probably because there's lots of images and stuff like that we haven't handled for that. This is really good for text-based e-mails, but we can do this one again. Show task pane, summarize this email and look at that. It's summarizes email for you. Now, don't think about just the app that we've created thing about the possibilities. You can now create an app that reads an e-mail, does something with it, then gives you the response back in that very same added. So you can create, for example, the app so will create in later sections of this course will be called politely say no, which is a really cool app extension where if someone sends you a requests or anything like that, you can just click a button. It will read the email LCD prompt, a job GPT that says, hey, find a way to politely say no to this email. And then I'll give you that reply back. It'll actually open up a new reply threat as well. And it will populate our response in looking at how powerful something like that is. So what do you get requests that you don't want to do? You can just click politely say no. And it will do that all for you using chat GPT. There we go. That is how you integrate Chat GPT, width. Outlook, awesome. I'll make sure I post all of this code for a premium members and the description below. Thank you 26. Project: Configuring Outlook's Environment: Hello everyone. Let's create one of my favorite applications. Now, I personally in my business work use outlook a lot. I send emails a lot. I also have a day job a lot where I GET requests from managers and partners and things like that. And what you can do is you can use chat GPT to help you create replies to those e-mails. So the app that we're going to create is going to be called politely say no. It helps people politely say no to requests from managers and partners. If you have too much work, if it's already like midnight and you don't want to do anymore work or so on and so forth. It's a very cool application and it's an actually an outlook extension that is of great use. Okay, so let's go ahead and start creating it. Now, as we saw before, how to integrate Chat GPT into Outlook, you need to basically have something like Visual Studios up and running. You need to make sure you have Node and NPM installed. So if I go to my terminal and type in npm, for example, it should respond with something positive. Perfect. And you also need to make sure that you have available. So that is yo right there, y 0. Just make sure that you have those things installed already. If you don't go back and actually look at the documentation again and look at the other modules that we've run, particularly where we integrated chat should be t with Outlook. Okay, let's open up a fresh new terminal. Close the old one. The first thing we need to do is we need to create a yo office project. So I'm going to type in the terminal yo office. And of course Alaskan me a few questions to help me get set up. Alaskan me. Okay. What type of project you want to create? Well, we want to create an office, add in a task pane. Perfect. It doesn't ask us basically what language do we want to use? Do we want to use JavaScript or TypeScript? Let me just go over here. Why is it not working? There we go, JavaScript. What do we want to name our ad and let's name it politely. Say no. Then what client applications we would like to support, what we want to support outlook. Okay? Now, depending on where you've done that, you should be able to have a folder that's automatically created for you that's called in this case, politely say no, you should be able to open it up. And it's currently getting populated with all the files you'll need for your project. So let's give that a minute. It's taking a while longer than usual. Okay. Perfect. Now the next thing we need to do over here is we need to make sure that our terminal is within the folder that was just created in your terminal. Go over here and click C, D, and then go to politely say no. And perfect. Now you're in 27. Project: Front-End Modifications: Hey, perfect. Now that we have our projects set up, let's make a few changes to it. Let's, first of all go into source, then go into the HTML file under task pane. And let's edit a few things. So we're going to change this to say politely say no, because, well, that's what our application will be called. We'll keep the rest of these things and just for reference. But let's click Save on that. And let's actually go back in here and start our application. And you do that typing in npm start. If, if you forgot from the module, that will open up a few certificate, asks, you don't have to click Okay on it, for example. And then it should open up a new outlooks app. And now you can go in here, go to show task pane. And you will see your application over here. And now we can make a few changes to this, right? So for example, if we go back in here, wherever it says welcome, we should probably change that to something else. So when here, for example, let's change that to the name of our app. Politely say no. And if you click save control S, You should see this change instantly. Let's do a few other things as well. Let's go back in here. And we will let me see over here, discover what Office Add-ins can do for you. Let's change that to something else as well. Generates professional replies. While saying No. Okay, Perfect. Let's go ahead and click Save on that. Awesome. And now the last thing we should do is we should get rid of all of these feature bullet points here. I'll keep them in for now because we might want to, or you might want to take this app further and do a few things here. But for now we'll just change that. Finally, what we'll do is we will say over here, this run command. We're going to change this to say generate, reply. Perfect. Okay, now we've modified the front end of the application to what we want it to look like. Awesome. Now let's go to the JavaScript. The scary stuff, Awesome 28. Project: Applying a ChatGPT Function on the Back End: Now let's go ahead and program the back end of this application. A few things we need to take into account. So what we want basically outlook to do is when we open up Outlook and when we open up this message, for example, well, when we click Generate reply, it should do a few things. First, it should read the, read the reply. That's fairly obvious, right? It should actually read the reply. It should then make a request to our serverless API that we made called completion API. Let me see if I can find that guy right over here. And over here. It should actually go ahead and make, sorry, not this one here, this one here. It should go ahead and the prompt should be something like read this email and find a good way to say no to this e-mail professionally. It should then take that response back to that message and then click reply and paste that message in here. So all you need to do is review and then click send. Now those are a lot of steps, but don't worry, we will break it down as we go into Visual Studios and type it up. Okay, Perfect. The first thing we need to do is we need a function that gets the body of an email, right. And that's going to be an asynchronous function because in JavaScript for some reason everything is asynchronous. So I'm going to put in your asynchronous function get body. And we're going to put it in a few things here. The first thing we're gonna do is we're going to call the office dot context, dot mailbox, dot item, dot body. Got, get async method. What this does is it actually gets you the body's text. And that's going to be in text form. And we're going to parse that in with a function. And we'll give it the argument results. Perfect, Okay, The next thing we need to do is we need to check if us basically doing this action actually results in a success. Because sometimes there's errors that happen. So we need to do over here is say, if results dot, sorry, result dot status rather is equal to office dot async result status dot succeeded. Well, then, great. Now we could actually do something. Again. We need this if condition because if this is not successful, it should stop right there because we don't want to send garbage to the API because it costs us money every time we do that. So the next thing we're gonna do over here is we're going to set a variable called body. We're going to make it equal to result dot value. Okay? And I'm just going to do something like this. And then we are going to basically, well, Let's actually just put that in for now, but now we have access to the actual body string over here. Okay? Perfect. The next function that I want to create is the function that will actually run the API. Okay? So what I'm going to do over here is I'm going to create another asynchronous function called Run API. Now, this function does a few things. The first thing it does is it basically uses the fetch JavaScript function with the URL and input parameters. But before we even do that, we need to define what those parameters are. So we have a parameter called URL, which is the same thing as our postmen URL requests over here. Again, that is where our serverless API sets. We then also need to define a body JSON file, which will be equivalent to this request body over here. Okay? So equals. And then we'll, we need to do is I will copy and paste this entire thing in here. And then actually need to do the annoying thing of back spacing everything to make sure that this gets all in one line. Okay, Perfect. So that's it so far. We'll just keep it as this for now and we will change it to make sure that it actually accepts the body parameter afterwards. Okay? Perfect. We also need to set up some other parameters. So let's set up another variable over here, which is going to be equal to a json object, where the body is defined as body json. And the method is a post request because all of these are post requests. We are then finally going to use the Fetch function. So we will fetch the response from this URL given these parameters that we've provided, it's awesome. And we need to make sure that we also define this. We need to put a weight over here because we know fetch itself as an asynchronous function, we need to make sure you put await over here. Okay, perfect. Now, response on only gives us the actual HTTP response. We need to extract the text from that response. So we're going to create another variable called output. And we're going to make that equal to await response dot text response. Our text is also an asynchronous function. So you also need to put a weight in here. And then the final thing that function does is that it basically returns the output to whoever called the function. Okay? Perfect. Now the, those are really the two key functions that we want to be able to create. Right now, we need almost an architecture function to put this all together. So what we're gonna do over here is we're going to create another asynchronous function because clearly we love asynchronous functions and we'll see something like put it all together. Okay, perfect. Now, what we'll do over here is a few things. The first thing that we'll do is, well, we actually need to get the body from this, right? So what we can do over here is let me see over here. Perfect. Sorry, I'm just I'm just a bit lost over here. Okay, perfect. So put it all together. So what do we need to do? Well, first thing we need to do is meet you get the body. So we're going to say let body equals awaits, get body. And that will put it into a variable called Body. We then need to pass that to this asynchronous function over here. So in the asynchronous function in one API, let's put an argument called body. Right now we won't use it, but we'll just keep it in here still. And we'll say over here, the response equals. So we'll say let response rather, because this is a new variable equals await run API. And we need to pass it in the body. So we get the body and then we pass it to response. For now what we'll do is let's actually logged out to make sure that this works. Okay. So that was a lot and we're definitely not done, but I think that's a good stopping point. And we should just debug this code and run it to make sure it's actually working before proceeding any further. Just so we don't have to go all the way back if we do make any mistakes. Okay? And this is just the development process. There's going to be mistakes. But it's good to debug and test early to make sure if it fails, you actually know about it. Awesome. 29. Project: Modifying Back-End to Process Email Body: Alright, now let's go ahead and test and verify that everything is working like it should. So again, we have three asynchronous functions over here. Right now if I click run it, nothing will actually happen. All that will happen is that these functions will get defined. So what we need to do is we need to actually call this function. We'll go over here and type in await and then put in, put it all together. Okay? So the first thing that it will do is it will call the get body function, which returns a body. Okay? There's clearly something I didn't do correctly over here. That is my bad. What we should do instead, since we're calling to try to get a variable out, we can just go in here and type in return body. Okay, let's actually console.log the body as well. So we will get the body of the email. We will then pass that to the run API. So make sure you have body over here on the Run API. I might not have had that before. It accesses the API. It then gives a response back and output. We put that into a variable called response, and then make sure we do this as well. We wanted to log not the response, but the response doubt output, which is in fact the response dot txt. Okay, let's go ahead and click Save. Let's open up our email. Let's right-click and go to Inspect. We can see everything happening as it should. And then we'll click Generate reply. And let's watch the fireworks go off or it errors out, we will see, okay, there's a problem here because clearly we have an undefined. So we need to go ahead and resolve that. And the reason why we have an undefined, I believe, is because we're referencing a variable here that can't really run. The reason why can't run is because you sometimes can't return from a asynchronous function. So to test this, what we can do is we can console.log the body while it's within this function here. So let's go back in here. We'll go back and open up our console and our email. And we will click Generate reply. And now we can actually see the reply. So what we need to do is we need to mess around or function a little bit, but that's completely okay. Well, we need to do over here is this thing should actually call the run Azure function. Okay? So what we're gonna do over here is we're going to, instead of returning or will slow console dot log it. But we will actually make this itself, executes our put it all together function, which will then go ahead and execute one API function. Okay? So it's a bit confusing, but sometimes you need to do this. I personally hate JavaScript, but unfortunately you have to use JavaScript if you're creating outlook extensions. Okay, so let's go ahead and do that. So instead of all of this kind of stuff here, what we'll do is we will make this trigger, put it all together, put it all to get there. Okay, perfect. And we will pass to it, the body, put it altogether, will then receive the body. This no longer makes sense over here. We will still logged the body though, and we'll remove the log from here. After that, we will create another variable called response, which will basically triggered this function which again returns the response. We will slowly, we will still basically output that response. So the only thing that's changed here is the function that gets executed first is get body. So get body first gets executed. It gets the body of the email. It then calls this function called put it all together. Put it all together, takes that, basically logs it out, then sends that variable to dysfunction, which basically sends that prompt to the API, which then returns a response. We get the response back and we log it out. Okay, let's go ahead and save that. And now try that as well. So we'll go down here and click Generate reply. Perfect, but you got exactly what we wanted. Now, you might be asking yourself, why did I do it this way? Well, I'll be honest. I prepare a lot for these lessons, but I actually did it that first way as well and found this error and then fixed it. But the reason why I did that, again, purposefully for you guys, is to make sure that you understand that these errors do happen. And you need to be flexible in your code because that helps you find errors and debug and stuff like that. And the process of finding errors and debugging is almost as valuable as the process of creating that code. So that's why I did that. And trust me, there will be more errors as we go through. But don't worry, we will always, always resolve them together. Okay. Awesome. 30. Project: Reply Box Inclusion: All right everyone, we're so close at finishing this application. Now, what we need to do is we need to basically go to this e-mail over here. And once I click generate a reply, it actually clicks reply for me and then enters in that text the response in here. And then all I need to do is just visually look at it, confirm everything's okay. And then click Send. Okay, so let's go ahead and do that. Now, in JavaScript, there's a lot of libraries for office type things. For example, Office dot contexts. I'll mailbox that item refers to the item that is currently in here. Then dot body, dot get async gets the text of the body. So what we wanna do over here is let's create over here a constant, a variable called item that equals this item. Okay? What we'll do then is after everything is said and done, after we get the body, we then get the response and we logged the response will be done. Wanna do is we want to take that item and we want to display a reply form. Okay, so this will display that reply thing that we talked about. This is basically your reply form. And then we want to populate it with the log output from the, from the API. We want to put the response in there. So we'll do item dot display ready form. And then we put in the response dot outputs. And really, that's it. That's all we need to do. Let's click Save on that. Let's go over here. And I'm not even going to open up the log files. I'm just going to go over here and click Generate reply. And look at that. Look how amazing that is. It just generated this for me, Dear Henry. Thank you for considering me for this task. Unfortunately, blah, blah, blah, blah, blah, blah, blah. It created our response for me. Not only that, but it also generated a reply box and put it in for me. So all I need to do is look at this. I'm happy with it and then click Send. It. Is that easy? That's it. That's the application over here. Now in a few videos, we might talk about how to actually extend this application to do more cool things. But there we go. That is the application called politely say no. Basically you can open up any email, click Generate reply, and it will give you a good reply that references the task as well and gives it to you in a professional and very appropriate manner. Awesome 31. Project: Application Extension with ChatGPT Mood Options: Hello everyone. Now let's take this one step further. Let's say if the user wants to, instead of creating the standard replied that you usually see with this, right? So again, if I go over here and click Generate reply, it'll give me a very standardized reply, but it won't give me things like the reason why I can't do it. Or maybe offering alternatives or something like that. You might want to modify the reply you generate based on things about you. For example, I would probably want to reply to this request by saying I can't get it done by tomorrow, but I can probably get it done by Wednesday or Friday or whenever. So you don't want to just say no. You want to say no? So let's put that into our context here. Okay, Let's try to do that. The first thing we need to do is we need to put in a text box for a user to put in that instruction. Okay, so I'm in my HTML over here. And just above this division that says div role button. I'm going to put in this line of code over here. Input type equals text, id equals other notes, name equals other notes. This will, if I, after I click Save, generate a textbox for me that I can type in other notes. What I'll do over here at the very top here, I'll even say, you know, put in, put in additional notes. And I'll get rid of this run thing as well. So I'll click Save on that. And over here we see put in additional notes. Perfect. Now the next thing I need to do is I need to take that and include whatever the user has written here into a wrong. Okay, so let's go ahead and do that. I'll go to my JavaScript. And what I'll do here, just to make sure that this works properly, is when someone executes this function body, because the body of the e-mail, whatever, whatever before it runs the API, let's actually make sure that we can access the value that the user has written in here. Now how we do that is called document dot get element by ID. So we're getting a particular element on the HTML page. In this case, it's going to be called what do we call it over here? Other notes. So that's the get element by ID, the ID equals to other nodes. We named it other notes. So we're going to go in here and put, well, you guessed it, their notes. Then we want the value property of that. Okay? Now what we wanna do over here, first of all, it's just log it out just to see if it works. Just for our purposes over here. So let's go ahead and click Save on that will then go back into our male, will then say, gotcha and click Apply. And we should see in the actual log of this console, we should see gotcha, right here to perfect. So what is logging correctly? So let's go back. And what we wanna do here is let's create a, another variable. In here, we'll create another variable called let. The other Haram equal. Sorry, this is the other nodes, other notes? Yep, Perfect. Equal this value over here. Perfect. And what we're gonna do is we're going to put in the other notes in here, so we'll say reply to the following email, any provide polite and professional manner and reply to the following email and politely and professionally say no. With this in mind. And then we'll basically put in our things over here. And I'll put in the variable that we just created called other notes. Okay, perfect. So replied to the following email and politely and professionally say no with this in mind than the other notes can be something like 0, offer an alternative or say you'll do it by Friday. And then we'll actually give the email after that. Okay. Now just to specify to make it prompts, let's put it in a period over here and then say the email is and then it will provide the email. Okay, perfect. Let's click Save on that. Let's go over here to the actual email. And let's test this. Will open up the inspect. Well then click over here, generate reply. And let's look at, first of all, let's look at this guy over here. I'm reply to the following inequality professional. So you know, with this in mind, Nothing's right now. The e-mail is blah, blah, blah, blah, blah. So we get the same thing that we got before. Okay, so perfect. That still works. But now let's put in something else that's say this in mind. I can do it by Friday evening. If that's okay. Okay. Let's go ahead and click Generate reply now. And now we can see that the JSON has also changed as well. We can see over here that the Json says, I can do this. I could do it by Friday evening If that's okay. And now the response has also changed as well. So if I look at my e-mail, it now it says, Thank you for reaching out. Unfortunately, I'm not able to complete the pitch presentation. I can do it Friday evening If that's okay. Perfect. I can also give other instructions as well. Right. I can say something like I can put my friend under the bus, right? I can say something like Bob. Bob probably has capacity. Capacity. Suggest him something like that. Let's see if that works. So let's click Generate reply you for your requests. Unfortunately, I'm not able to. I'd like to do here is I suggest you reach out to Bob as you may have the capacity. Look at that chart. Gpt does it in such a professional and nice way. I suggest you reach out to Bob as he may have the capacity to complete the task. That is awesome. Okay, Now the final way you can try it, but sometimes chat GPT kind of blocks it is. Let's go back to the actual message and I've sold me, it looks Open now this wild. Let's go back to the message over here. And instead of writing this, say, say it in a very polite way. Let's see if that works. Already. Api. That is awesome. Did you guys see that? Replied, Let me let me put a big bigger No, I can not create the pitch presentation for Henderson files mine I AM tomorrow. It is already APM. That's cool. Right. Because now you can have different moods as well. No, I cannot. I'm sorry. Instead, if you're saying this is someone you really like, you can say the very apologetic and nice. Say that I will owe him one. Hello. Hi, I'm sorry. So there's the word sorry. Now, I'm afraid of all, let's create the breech presentation. I know this is a tight deadline. I apologize for not being able to help. I will owe you one for this. Isn't that so cool? It just recognizes what you need to do. And again, using chat GPT, I can go ahead and click Send. And I don't need to worry about what do I write, how do I write it, right? It's amazing for that concept. Okay, perfect. 32. Begin Working with Your Project: Okay, So now that you've gone through the entire course, it's project making time. At this point, I want everyone here to create a quick, intelligent application using chat GPT, and another application of your choice. Now you can obviously use Outlook because that's what we use in the course. You don't need to make something that's response to e-mails. You can even make something, for example, that summarizes emails or that translates the email to French or Spanish or whatever you want to use it with chat GBT. But there are a few other ideas I've posted on here that I've talked about before, chatted BT and Excel, chart GBG and irritable, and so on and so forth. One quick note as well. After you do this, please post a screenshot and a quick summary of the app. You create it in the project gallery below. So we all can see the amazing work that you've done. Awesome