AI engineering basics and API keys

0:00 this crash course will get you up to speed on how to build AI powered web apps using the gp4 and doll e apis you'll build and deploy an app you can add to your portfolio this course was created by scrimba instructors Tom chant peir borgan and Gil Hernandez welcome to this journey into AI Engineering in this section we'll explore how we can harness the power of sophisticated AI models in our applic ation open AI launched in 2015 but it really burst into the public Consciousness in 2022 with the launch of models whose performance completely revolutionized our concept of what AI could do since then it has continued to blow our minds so what are we going to build have you ever wanted your very own stock broker to advise you well for this project we're going to build this cool stock predictor app where dodgy Dave is going to give us all of his financial wisdom system okay I have to tell you something straight up the purpose of this app is to get us working with the open AI API it is not Financial advice and I don't recommend you use it to

1:10 choose stocks and shares to buy and sell it's just for fun and if you do follow its advice and it will goes horribly wrong don't blame me but if you end up making billions I want my percentage but seriously while the idea of using AI to help investors make predictions is really popular and really interesting this app and the data we're using are just too simplistic so don't take it too seriously but do use it as a foundation for exploration one of the keys to good investment is collating and consuming data to gain knowledge to help you make the right choices and collating and consuming data is something AI does very very well so while this project is just for fun as you grow your AI knowledge building really useful tools becomes well within your reach so how does it work we have an input here and we can add up to three stock tickers tickers are these normally three or fourl abbreviations that stock have so amzn for Amazon AAPL for Apple msft for Microsoft Etc and when we add them to this input field and we click the plus sign they get added to our list let's add one more and now let's click generate report

2:22 it takes a little time for the AI to process and then we get our report so how is this working under the hood well we start off with with the share tickers Tesla and meta in this case we pass them to a stock price data API that is a non aai API that is going to give us the stock prices over the past 3 days we take that information and we pass it straight to the open AI API where it is consumed for us and what we get back is our report which of course we render to the Dom so that's the flow of this app and it's actually pretty simple now as we build this there are several things that we will be studying we're going to look at how open AI models work we'll look at how we can set up a request we'll talk about tokens one of the most important aspects of working with the openai API we'll look at various tools that can help you we'll take in the few shot approach which is giving models examples of the kind of output you're looking for we'll use the temperature setting to control how daring our output is how creative it is we'll look at the stop sequence and the frequency and presence penalties and there will of course be challenges along the way now

3:32 as we start we're going to go into some detail on the setup of the open AI API if you've already had a play around with it that might not be necessary for you so feel free to skip ahead a scrim or two if you feel we're covering old ground okay in this course we're going to focus on the AI but in the next scrim I'll just walk you through the code we've already got so when you're ready let's make a start let's take a quick look at the code we've already got so we've got an input here for these stock tickers and this add button and those together are in an HTML form and we can come in here and add a ticker say TSLA for Tesla and then when we click add that appears on our list now you might have noticed there that the generate report button then came to life so when the app actually loads the generate report

4:21 button is disabled and we can't add a stock ticker when the input's empty that will in fact give us this warning right here now when we do add a stock ticker ticket and I click generate report the first thing you might have seen if you're very very quick was a message down here saying querying stocks API now as soon as the API has given us our data that is replaced by this creating report message now at the moment this loading SVG is going to spin forever because we haven't actually got the AI in this app which is going to create the report for us but that is of course what we're here to do the HTML and CSS are all pretty standard stuff do feel free to check them out I won't say too much more about them but what we will do is have a quick look at this JavaScript now this is not a JavaScript course so I'm not going to go into tons of detail here but

5:09 basically we've got these two event listeners one here and one here now this event listener is listening out for clicks on the add ticker button right here and when it detects a click it's basically handling the ux and also updating this array here where we're storing the tickers it also calls this render tick function which is what renders the tickers onto the screen just like that the other event listener is listening out for clicks on the generate report button and when it detects a click it calls fetch do data now fetch do data is this function right here and this is where we call the Polygon API to get our stock data and what we want is the last three days of data so we need a start date right here and an end date and we're getting them from dates and we're actually importing dates at the top because over in utils I've got dates.

5:59 JS and what that's doing is just calculating the date range so we want the date 3 days ago and the date yesterday because that will get us 3 days of data now when fetch do data is done it's going to call the fetch report function we've got that one right here it's currently completely empty because this is where we're going to use the open AI API to create our report using the data we got back from polygon and when we've got that report we'll just use render report to render it to the Dom and of course we'll wire up that function a bit later okay so there is quite a lot of JavaScript going on there so do check it out and familiarize yourself with it and then when you're ready to move on let's get our hands on the API keys we're going to need to build this app we're going to need some stock price data for this app and I've chosen the polygon API to provide it it's a really great API with a generous fre tier and loads and loads of data options so click the screenshot which will take you through to the site and then click up

7:06 here where it says sign up once you've been through that process you'll come to the dashboard and you can click down here where it says API keys from here you can generate an API key and this key should be saved in your environment variable now I've saved mine as polygon aior key and if you haven't used scrimber environment variables before you can click on this screenshot and it will take you through to a quick explainer now just for your information if you come up here to the top and you click on docs and go to rest API docs I have chosen this one here the Aggregates endpoint it provides data over a range of days which is what we want but there are a ton of data options here so you're really welcome to use any other one you prefer or indeed any other API again I have to warn you that this app is just for fun but when you have some AI skills why not investigate this further it's a really interesting field and you can just see how far you can get using AI to help you decide how to deal in stocks and shares okay now we've got the polygon API key saved in the next Grim let's get the open AI API key sorted let's get our hands on an openai

8:18 API key and that means signing up so why don't you head over to the open aai homepage and the image in this slide is actually a link so if you click it it will pause the scrim and and open the homepage in a new tab then you can go to menu and select login then click here to sign up with your email you're also going to need a phone number and once you've gone through that process you're going to get three choices and we want to go to the API once you're at the dashboard you can click your avatar up here and we want to select view API Keys here you can generate your API key and they're only going to show it to you once after that it will be obscured just like you can see here we don't get the full API key which is pretty long so just be sure to copy and paste it

9:05 somewhere safe as soon as you get it but if you lose it or if it gets compromised don't worry from here you can delete it and get a new one and like all API Keys be sure to keep it secret we're actually building this as a frontend project which is absolutely fine for prototyping but do be aware that when you actually want to deploy a project and share it you will need to have your API key safely hidden on the backend okay now you've got your API key you need to set it up as an M variable in scrimber and if you don't know how to do that again this screenshot right here is a link if you click it it's going to take you to a scrim which explains the process and it's really simple it's going to take you a couple of seconds now while we're here let's say a quick word about credit if you come over to usage that will take you to a page where you can see how much

9:53 credit you've got remaining now at the time of recording when you sign up you get some free credit to play with and you'll probably find that the free credit is plenty to experiment with but when that free credit has expired or been used up it is a payers you go model so you can just check the website for the latest info on that okay now we've got our API key what we need to do is take an overview of how this API works and then we'll build our first request so when you're ready for that let's go let's get an overview of how the open aai API works so each time we make a request to the API we need to include two pieces of information we need to pass it a model and we need to pass it an array of messages and at this point