Coding With AI 101: Intro to Github, Javascript, Claude, agentmemory and easycompletion

I'm going to show you some of my tricks for how to code as kind of a senior developer has been doing this a long time but uh really wants to a very lazy developer I really want to try and minimize how much I have to put in and maximize how much the AI gives back to me so my goal for this session is to not write a single line of code if I can avoid it maybe I'll type in a few things here and there uh uh I will write comments because for using co-pilot uh it's very helpful to write comments and I'll write instructions for Claude I've been using tra PT a lot it's great but Claude right now is clearly state-ofthe-art and so uh all of us who have been doing this stuff noticed that it's just significantly better at the um at coding specifically like long context coding and has a very large context window so if Cloud here in the background we'll probably use this the other thing that I use a lot is co-pilot so I'm going to go grab my uh let's see I got a got a vs code window hanging out around here somewhere this vs code um and I I just love co-pilot uh because it makes everything a lot faster it kind of just serves for me uh as an autocomplete but also sometimes when I'm like H I have to do some sort of map and you know filter ored doce something uh I can kind of just describe it and it will write out the code for me so an example of that would be like uh um write out uh let's see I don't know log hello world to the console right and hopefully you can see it magically recommends this kind of gray thing here let me make this a little bigger it's kind of gray thing here oh well what if I press tab hey it completes it actually just fills it out for me so I kind of use uh Claude for uh when I'm feeling particularly lazy and just wanted to magically do something for me that's larger and uh when I'm just sort of in here I'll use the co-pilot kind of either this sort of self-c comenting CU this could be really helpful I could like describe you know step one do this step two do that and let's make it a little more concrete uh read the file bot. piy which is another file and step two uh log to the console and I could say okay will it do something interesting uh maybe not but maybe I'll Kickstart it I I'll write const oh okay cool I need I need FS I'm just going to read this file No it should be and what am I going to do step two log into the console okay that looks like a program so I had to code a little bit but you saw how I I kind of cheated a lot you know I sort of told it what I wanted and said oh you probably want uh a reference to fs and file we'll talk about all these things to in a second but just so you know this is kind of the tooling we're going to rewind because I probably just went over like 10 really complicated things that we didn't talk about at all and I did promise that we would make this an intro to JavaScript and python um so we're going to just kind of delete all of that but I want you to give an idea the things that I use are GitHub co-pilot Claud or literally uh if I could get the cognition Labs Devon I would use that if uh an open source model comes out that's better I'll use that I I have no Allegiance I just want the model that's going to make my life the easiest makes sense right so today that is Claude and we're going to leave that in the background here because we're probably going to use this a lot um the other tool that I use a lot is GitHub GitHub is is really helpful for looking through code um they have a whole new like kind of code editor that's kind of assisted and you can view stuff um but what I really want to do here is I want to start a new project and usually I'll start on GitHub I assume you've like made a GitHub and you go to your repositories Tab and you can press this new button and we're going to call it uh Wednesday March 13th right makes sense and I don't need to give it anything thing I give it a license MIT licensed Li um we'll create that and now we have this repo but we need we I need what do I do with this well I want to put code here right so that other people could see my code um or even if nobody could see my code it was Private this is a great way to back up all of my code and and have all of my stuff kind of versioned and and if I lost my laptop I could go back 3 weeks and get exactly the version that I needed still it wouldn't matter so even if you don't collaborate with other people starting from GitHub for new projects is usually probably the place you want to go you might make a private repo take this I'm going to grab there's a lot of ways to do this if you're kind of more on the beginner side maybe you should open with GitHub desktop Go download GitHub desktop do a tutorial on that really easy doesn't have to you don't need to do any command line but I like command line so I'm going to copy this https I'm going to go in here and I'm going to type get clone and that is command get clone uh Wednesday March 13th cool so I cloned that and then I'm going to type CD space wday March 13th and I I'm in that repo and now I'm going to say I want to actually open up a new instance of vs code here so I can type in I'm on a Mac and type in code dot I could also go to like file open folder find the folder in here oh there it is I'll just do that instead right it's pretty convenient he I got a new folder I mean uh you know new project workspace very nice um okay so I can go to terminal the terminal and now what's special about this folder over other folders that I was in is that it's actually connected to git already by type get status you will see on Branch main well like what if I go to just some random folder get status uh not not in a get repository okay so clearly I'm in a get repository if I'm in that folder get status on Branch main well where does that come from um oh well you can see right here it says main I'm on the main branch so let's try and commit some code really quick get status okay well I need a I need a file so we're just going to start uh we'll come back to the code commit when we actually need to in a second we will start by committing uh some hello worlds in JavaScript and python I think that's a good example of uh how to what's the difference between these languages right I think they're both pretty simple they both perform a lot of the same task for me kind of just depends on um the project that I'm in so I kind of want to present them equally to you um I think now that in this time where it's really much more about understanding the concepts doesn't really matter what language you're in you could pretty much write something in JavaScript and then say hey Claud rewrite this in Python and it'll probably work the first time and if not the first time then copy and paste the error in and it'll work second time so we're going to we're going to do a little bit of like instead of going really far into either one we're going to have a fairly shallow review of the basic concepts of like modern dynamic programming um as seen through the two most popular languages for for AI stuff and and web stuff generally um and and then we'll commit that and and kind of just iteratively build on our little uh get repo here does that make sense uh cool cool all right so the first thing we want to do let's let's make a JavaScript hello world and make a new file I'm going to call it hello world. JS and all I wanted to do is log out to the terminal here this is the terminal area I want to say hello world and I could write that out I think I could probably figure that out it's probably one line of code but why don't I just tell it to write hello world right hello world in JavaScript and console.log hello world that looks perfect so where is console coming from console is what's called a buil-in um it's actually coming from uh this JavaScript environment itself which is called node.js so you think of JavaScript well it's a language that runs in your browser but it also runs on your computer through an execution environment called node.js nodejs uses what is called V8 and V8 is the JavaScript engine that also powers Chrome in your browser so you're getting the same JavaScript engine there are a lot of changes because it has a different uh security model and it's also talking to your native computer on one of many different platforms as opposed to being in in Chrome but but fundamentally uh think of it as like you're basically at this point in the modern era running sort of a mini version of of the Chrome's JavaScript engine V8 stuff on your local machine uh so when we want to call this we have to call it from the command line with the command node nodejs and the command is node if you want to install node well should really I don't know just go Google that you know how to install node it's pretty easy and probably beyond the scope here and it probably won't help you much if I install it on a Mac anyway um so you want to start with node okay node and I want to run a file this file is going to be the entrypoint file I could have a lot of files but they all have to be linked in some way to that entrypoint file and that entrypoint file is like where node starts and my file obviously is called helloworld.js oh didn't work well probably have to save it first help there we go okay node hello world. JS and printed hello world pretty straightforward nice so now let's Commit This code get status um now if I'm just working on my own repo I can pretty much just push this to the main branch and no one's going to care but if you want to be uh you know Elite thing software engineer uh senior Dev whatever well you got to make a poll request you obviously so what that means is I'm gonna make a separate Branch there is this kind of main branch that has sort of the the default code and I'm going to go off on my own for a little bit we're going to make What's called the commit we're going to save this code we did which is called committing it we're going committ it onto that Branch just like saving on you know hey put it on that Branch over there and then we're going to make what's called a poll request and we take our Branch we say Hey Now can you actually put that Branch back on the main branch and like merge them together uh sometimes this is also called a merge reest polar request merge request PR or Mr depends on where you're from I think it's a UK thing I don't know um so we T to call in poll requests uh Hey accept my PR generally there's a lot of like uh this is where random developer is now interacting with the main developer or you're like working on some crazy feature and you're like okay now I got to figure out how to bring that back into my main uh you know all the Cod that that was there before there might be some what are called merge conflicts maybe we'll get into that but we probably won't get into merge conflicts but just imagine like if if you working on something and I'm working on something well we're going to have to get those to work together hopefully we don't have any of those this time um but I will go through the polar Quest process once so I have get status okay you can see I have this untracked file well I made this file it's new so G doesn't know anything about it just going to add that get add hello world and now that file is tracked get status great um now you're probably wondering like how do you know all these good commands um I've been doing this a long time but the way that I learned them was first by painfully searching stack Overflow and suffering a lot and now more recently learning more advanced stuff just going to trat jpt asking it for what I want and getting it exactly perfectly every time and pacing it in and not having to think about it until like it became very root memory so you live in the perfect time where you don't have to struggle nearly as much as many of us who have been doing this a while don't be afraid of get command line just use chat GPT for it um there are also some great tools you can download that let you write in like you know uh some chat gbt right in your terminal if you wanted to or you could even go into this and say like hey um write a shell command to add all files to staging in git uh oh get okay well yeah that's right I could do that get add dot I already staged it but if I didn't it would make all of my files green like you see it's ready to be committed so uh if I go over anything here with get that's kind of scary just like chat GPT it dude got to chat GPT it um and it won't be so bad uh in fact I would say that anything that becomes text or I can paste in is now like more valuable to me than any kind of UI because I can I can rely on being able to Pace it in and out of one of the AIS and get a good response back whereas if I'm stuck on a UI I'm going to have to figure out what that is what it means Etc um cool so I have this uh file I am going to commit it to well I'm on Main still so I don't want to commit it to main I want to check out a branch I'm going to type it get checkout let's actually write uh check out and create a new branch called JS example okay get check out- BJs example I did this intentionally I knew it I could have done that but I wanted to show you that like if you just don't know what you want you could probably just describe it in English and then get the answer now I what what does this be what does this be um okay well let's go ask Claude um what does the dash b mean create a new branch and switch to it simultaneously oh that sounds helpful so I want to make a new branch and I want to switch to it h okay that sounds right get check out- BJs example status you can see now I'm on this Branch JS example now I want to push right but I can't and there's two reasons why one I have to commit my changes hey these are actually they're not just staged but they're ready to go two I have to do this thing of setting the Upstream origin fortunately GitHub just kind of does it oh cool paste that in let's just start there get push cool so it's created the branch but if I type in get status well I still have my file staged so I'm going to have to commit it so I want to um commit the current changes to the current Branch get commit DM first commit okay uh what is the dhm what does the DM mean um oh it's used to specify the commit message okay well H I wonder what a commit message is uh well let me just show you an example of like another repo right I have this one of our repos and you can see that the commit message for this particular commit that I made was update migration with lein like check that is the commit message for this commit the one that they suggested here was first commit and this is the first commit I don't know I'm thinking we just go with that get commit dasm first commit and now if I type status okay now I don't have any stage files there's no green but there is your your branch is ahead by one commit okay well then what do I do now um what do I do after I've committed my changes uh sever things you can do oh you can place your changes that sounds probably like what we want to do um you can continue working on your branch and push later um and then once we've done that stuff we could probably create a polar Quest very good answer Claude good job okay so I want to I want to do get push and that pushes it to you see to this remote to La Lain Wednesday March 13th and now if I click on that and I go to oh look at this JS example is now a branch and it has this hello.js nice so I can go and compare and I can do this well okay so GitHub makes this really nice green button called compare and polar Quest right and that actually lets me see all of the changes that I made and then make this polar Quest that I was talking about if you don't get that magic button you can just go to the polar Quest Tab and type new polar Quest but also they really really want you to they're really trying to help you there so first commit uh JS example um this is a really good description of what the commit does uh okay just kidding uh it adds a console.log hello world okay so I have a description I have a title let going to create that and now it shows up in the poll request tab it's see here so now some maintainer of this project can come over here and say okay cool uh oh you made a commit awesome thank you so much for contributing to my project let me go review the files oh that looks reasonable I don't I don't see any changes or conflicts I think that will be good to me so I'm going to say lgtm very famous uh last words on the way to uh for a bug on the way to production right there um and yeah great looks good and then I'm going to press this merge pull request and now I've merged this JS example Branch into my main branch look at this now I click back on my home you can see my main branch my hello J hello world. JS okay I know this is this is probably really Elementary for people who use GitHub every day but also I think a lot of people don't use GitHub every day Aon this is probably a little bit mysterious so I hope that's helpful that's kind of our daily process I just make new branches change some code make some poll requests merge them in um when I'm on my own I'm super lazy I just push to Main Branch sometimes it happens it's not the end of the world if you do that it's fine but if you do that on a team you will get yelled at so be very wary it's very bad habit um yeah cool so I think we've gotten the basics of GitHub I think we now know that we can go uh from uh you know push our code up now let's start actually doing some coding right um well one thing I want to do is I want to go back to my main branch so I'm going to go get check out me and you'll notice when my branch is behind origin main okay well then I can type I love I love GitHub just you know or sorry get this is git one big thing this is GitHub this is git git was made by lonus tvols it's a Linux thing uh it's open source GitHub is only by Microsoft it's very different but they do talk to each other like you can set their GitHub as a remote for git right it's the hub for git but they are separate um in this case you can see git pull and I'm just going to run that it is very helpful right okay and now we have this hell World js on our main branch and I type get statused you can see I'm back on the main branch very helpful okay so I have this uh file and this is helloworld.js and I want to show you well how do we do the same thing in Python um to recap really quick I can type in node helloworld.js and it says hello world let's just do the same thing in Python so I'll make a new file call it hello world. py great and again print hello world and ah love it right didn't even have to go to Cloud just use co-pilot now there's another way you use co-pilot by the way um I use it this way way I kind of like that because it's kind of self-documenting but it uses the faster model and I'm not sure it's necessarily the best uh for all kinds of coding or like more complex stuff um what you should do is press command I or you can go to uh open quick chat with co-pilot and then you can actually ask like pretty much anything you want like generate a hello world in Python um and it should just be like sure here so this is kind of more like chat GPT in your ID very very useful and you can copy it you can insert it you can see if I leave this oh it printed it beautiful now how do I run this python well uh I had node hello.js and instead of node for running uh our JavaScript environment we're going to use Python I'm going to type in Python hello world. now if you're on a Linux machine you're probably going to find that sometimes python Ty gets you to version two of python and this will not work some like this would probably work but a lot of your python wouldn't work and you might have to type in Python 3 hello.py and so that's just something to be aware of is that on my machine python aliases to Python 3 and in the recent Mac OS they finally kind of got rid of the like python 2 default stuff but for a lot of you if you type in Python you're actually loading python 2 and they decided that the way to get around that was to make it Python 3 if you want Python 3 which pretty much all code now is that's just sort of forever baked into the language so um cool node hello.js Python 3 hello.py or in my case Python hello.py and now we have Hello World in both of these things uh you will see that uh we're getting this log method from console console.log in javascripts and in Python it is just print right print the string and there's some variations on print right isn't there you can uh I don't know print a formatted string you can do this kind of thing blah blah blah but um this is just like the easy way console log has some cool stuff he could be like uh whoa you know okay we'll get into what this means but you can do like crazy objects and shove all kinds of stuff in here it's kind of we'll get back to that in a second um okay so let's just talk about JavaScript for a second I like blown past a lot of really really important foundational stuff and I did promise that we would make this a one-on-one course so the first thing we should talk about is a variable and if you remember High School I doubt you do um but if you do you might remember something like y equals MX plus b right and we were taught that Y is a variable and M is a coefficient but it's also some kind of variable X is a variable B is a variable right these are all some sort of variable and those values could represent different numbers right different values so let's just kind of start with that um uh okay well hey Claude what is a variable uh in programming if you don't know the qu answer just go ask and read about it you can get get any answer to any of the stuff you want um oh it's a named storage location in a computer's memory oh my God that's so complicated okay so you know you got some memory you got like 64 gigs of memory or 16 gigabytes of memory what that actually is it's just like a bunch of places you could put stuff and the stuff you're putting is like the value of y or the value of M or the value of x right so the variable is uh defined by whatever this you know Y is um like it's called y it's the the name of it but the actual value of y could be like 0.5 it could also be like 12 or California or a whole uh list of names or something whatever it could be on anything doesn't it have to be math it could be um you know all kinds of different stuff so I'll show you a few different options for what a variable can be this is kind of the most essential uh building block for all programming languages you know first thing you got to learn is like what is a variable right uh there's a few different ways to Define variables the old way is we would say VAR VAR very easy you'd say uh VAR I don't know uh some number equals 10 cool okay great uh how about far some other number equals 20 oh well that's that's got these quotes around it but that'll probably still do something um I could also say our result equals this I wonder what that would be let's just do it let's just log it right um I kind of messed up I probably should have let's just undo this back to hello world and we'll call this variables JS uh let's what does that do um node variables. js 1020 that's not 10 plus 20 that makes no sense oh well it did it did something Magic with this 10 and something with this 20 that's kind of interesting um okay well let me just let me just get rid of these what is what is uh what are those oh that's 30 okay and it's yellow that's kind of cool um so that that's clearly like actually doing meth so you saw that a variable could be a number it could also be uh I don't know the number uh the number five the number five right kind of confusing but okay cool the number five right oh it added these together so these are called strings like a string of characters each of these individual letters is a character or you can think of a string of letters and numbers a character is basically any anything you see any letter number glyph um and you can see that if you have a string of characters you would Define them with quotes in JavaScript you could also put SLE quotes right doesn't matter you could also put back ticks and they're all going to be the same uh but you did notice something that when I had 10 and I had 20 it did not give me 30 JavaScript this is one of the things people love and hate about JavaScript it's called a dynamic language it doesn't have types uh it's it's actually technically it's an untyped Dynamic language that means is it doesn't have types it just kind of assumes and tries to figure out what you're talking about it's got some basic types that we'll talk about um but under the hood it's doing some magic on its own and it's dealing with all of that memory stuff for you so you know we go back to Claude And it's like okay yeah um name storage location a computer's memory that holds value and in like C++ that means you have to actually like get a memory location and then you know un like use it and then release it when you're done with it it's it's just so much in JavaScript they're like n you can name it you can do something with it and then when we're we're done with it we'll just like throw it away don't even worry about it as a programmer unless you're making something really high performance you could just like create a bunch of variables and go nuts in C++ you might have to say like okay if you don't unlock those and you close this function down and something else is pointing to the same memory then you can get some crazy bugs um the the in JavaScript you don't have to worry about memory you just worry about these variables and what they are but the tradeoff is that it does this weird stuff like 1020 what is that well what it's saying is okay well you're trying to add a number to a string I I don't know I can't add like 10 to Alpha or a 10 a to that's not a number so I'm going to turn the number into a string and I'm going to add two strings together because that that would make sense and so JavaScript does a lot of that kind of stuff for you makes it kind of easy but you got to be aware of these gotches that uh uh you know 10 does not equal 10 right necessarily well actually JavaScript is crazy so let's see if does um does uh 10 = 10 uh equals 10al 10 and then we could say uh does it equal 10 no 10 does not equal 10 so we'll talk about this in a second um so we got some variables 10 20 far some words equals the quick brown fox um um we could do uh objects which we'll talk about in a second um let's just make an object um some object or some key value whatever that work oh right uh some object equals key value um you we can create all kinds of weird stuff with variables but we don't use VAR anymore because it has a couple of issues that are kind of like too complicated to talk about but basically if you define variables all over with VAR there's a risk that they are defined in places you were not expecting or are redefining values that you were not expecting there's lots of issues with it and so in recent JavaScript we've decided to banar and we never use this ever we never talk about it and it doesn't exist in the language anymore because we're embarrassed by it instead what we use is const and let so uh something else you might have learned in physics and math and stuff is this idea of constant like uh the speed of light is in a vacuum is constant uh and what that means is that it just like is an unchanging value it is not a variable it does need to be stored somewhere like a variable but it never changes and so this is fundamental like sometimes we want to change things and sometimes we really don't want things to change and if we change them that would actually cause us all kinds of problems that we did not expect so we try to Define things as constant wherever possible for example let's say I have constant uh is true and I'm going to say this is equal to the value true um well if I wanted to then say Okay con is true equals false that wouldn't work I'm trying to redefine it you see I'm saying well I defined the same value twice if I say is true equals false well it'll actually think this is okay it's going to like yeah okay and then I'm going to print wrong language is true um print that and you will see that there's an error assignment to a constant variable hey man you can't redefine this constant variable so what we also have is the ability to create variables uh that can be changed so instead of const we use let const is true and you can see that now is true is false we set is true is false so when you have a variable that you do not want to change use const you a variable that you do want to change use Let There is some memory cost in high performance applications you would definitely want constants that are predefined elsewhere but um we do use let a lot of times in patterns as well um you know if you're like okay I have a a value here's my default value is let uh no content right and then like uh if uh the thing returns some content and then we'd say like oh is true equals some content right or value right and so you'd see like we' like oh cool we got some new content so we'd over overwrite it so you know or we wanted to say like uh position right um and you'd say like position is I don't know 22 um and then you might want to like update the position to be like 32 for your player or something like that um so that's constants and let you're going to see this a lot again Claude what's the difference between VAR const and let I really recommend going through and if you have any questions ever about anything you should get them answered so you have a clear mental model it will save you an enormous amount of time in the future and we have these powerful tools to do that so uh another thing that we're going to talk about well let's talk about the types um you have numbers right like um con some number equals 10 I'm not going to fix it uh you have strings cons some string equals hello world you have booleans oh you have true and false right this is very useful for things just you where you need to know if something is true or not uh user has logged in oh true very helpful right then I don't have to go check every single I just hold that value um arrays so an array is like a list of things they could be numbers they could be strings uh in some languages this would be uh considered super super wrong but in JavaScript you could like make a an array of numbers and strings uh or you could make an array of numberers strings and then internally more arrays of strings or whatever you want you know go nuts here here this that's legal I don't know wait no that there you go that's legal um so you can do some kind of crazy stuff but usually you'll just have like an array of I don't know values or like hey let me get a list of users so you might get like an array of users and that might be like uh I I'm not going to another thing you'd have is objects and objects are very useful in JavaScript and kind of one of like the fundamental building blocks um and you don't necessarily see objects in every language um like a lot of uh um in other languages you might see something like a struct or you would see uh just like a requirement to use a class um but um it depends but in JavaScript objects are are like very often used I think in uh python this would be the similar like the equivalent would be what's called a dictionary or dict um we'll get that to a second but what's cool about an object is that you can actually create a single variable one constant that has a bunch of values in it and this is how you can create these kind of compound values so when we talk about like oh I have an array of users this looks like a user right so now I could say like okay cool well let me say con some other user and I'll just uh create that object and then I can create an array of that const array of users equals and you can see what I did I defined this object it's got name age is student and it's got this syntax it equals Embraces uh what's called a property list these are each properties of the object object properties and then I created an array out of these two objects together array of some user now another cool thing that I can do is I can get these properties so I can actually go console.log some object. Nate and that property is accept accessible so if I want you know I instead of um well you know if I wanted to log like some name Al let log some name con some name say that's John oh I can do that actually that's kind of interesting so you can see like I say con some name equals some object. name and I'm assigning a new constant but it's the same value as this one and I can log that um or I could log uh the same thing just directly all different ways to kind of do the same thing I'm going through this really fast um I will leave some resources on um like 10-hour JavaScript tutorials but mainly the idea here is to know that when you see constant L these are not like magical Arcane symbols they're really a very very simple concept and we use them so often that if you learn like these five Concepts you pretty much got like 80% of JavaScript um that's that's definitely a thing um let's talk about objects really well I guess we did objects so we'll talk about functions really interesting thing about um JavaScript and uh Python and some languages but not others is that you have this idea of a first class function which means that you can you just have a keyword function right and oh print user cool so I have a function that prints the name of any user I feed into it so I have this user object and I have this function and what it does is it'll log the name of the user that I feed into it now remember that yal MX plus b this is a function right we're saying hey let's get the value of y and then uh but to compute that we have to get MX plus b so the equivalent of this in uh in JavaScript would be function uh we'll do xmb uh we'll say uh sorry uh compute line right because it's it's a it's a line with a slope um and you can see that well to get that y+ V from Algebra 1 you know to compute the the the slope of a line the function which this is a function the way to describe that in JavaScript the same way is here and so what I'm doing is I'm saying okay function compute Line This is the name of the function these are called arguments these are the arguments that it takes and generally the arguments are the same as the values on the right side of a math function equation right more or less you know obviously things are complicated but at the simple level this is generally tends to be true and then you can see that we're returning the value now I could actually Define this and say constant value equals m * X plus b right MX plus b and that would be cool but then I also have to now return that value right and that says okay we'll actually now set it you know bring that number back back and we're not setting it to Y here we have a function that can do that so the way that we would compute y say const y equals compute line two it would be m 3 is X and B is 1 and then we can log y so this is how we'd say y equals this is the function MX plus b right so it has a direct application to math but you can use functions for all kinds of things like handle user in put uh go get all the users um render the react code to display the UI for the user to see or render the form uh you know when the user prices a button do something functions are used all over the place and between kind of constants and functions that's like half of the code probably you'll see you know you're doing some logic finding stuff but it's a lot of that constants and functions are the two things you just have to know objects are also very helpful cuz you can pass objects into functions right print user pass the user object get the value out of it turn it um hope that makes sense so we did another thing here we said return return is a special thing that says okay if I'm doing a function I want to bring back that value to come like to return back to whatever uh was calling this and set it to something I'm not get okay Claude let's um what does return do in the context of the JavaScript function uh it specifies the value that the function returns so if you think okay I'm going to call it's called Fun calling the function which like actually like running it and you can see what it does it Returns the value y brings it back out of the function to you at the higher level so you can do stuff with it so this is what you do with return now you can say something like if Y is less than zero return value and then I can do some more logic console.log Y is not less than zero and then maybe I'll say return value here so I can have this conditional logic so I can have multiple returns and when it returns here it actually never runs this code at all it just Returns the first time return so the the the return does the Val the two things it Returns the value of the function and it kind of cuts the function off there and ends it and says I don't need to run the rest of the code I already have my value that I want because y was less than zero and if it's not less than zero it's going to skip and it's going to go and return this value now I brought in another keyword here I said if right so let's talk about that um there are three uh well there's a bunch of logical keywords there's if else and then uh there are also switches um and the idea of a switch is that instead of saying well if this or that or that I can actually say well um I can give it cases and basically create like a switching router with cases or you're going to skip switch you can you can Claude switch hey hey Claude can you give me an example of a switch in JS cool and that'll cook but we really do care about if uh else exact right so let's say um con Su Boolean equals true and uh right and we'll say if some Boolean equals true some Boolean is true um so you can see that I did if and then I have What's called the evaluation argument and you see that there's three equals here that's weird so this is another weird ass thing about JavaScript is that JavaScript has two ways to do equality you can go like two or you can go three but sometimes uh you get issues with one versus the other and so generally the adopted convention today is to use three because it's generally a um a better more likely to be the equality you want in the edge case so again Claude hey Claude why would I use instead of njs um good question uh we'll let that cook uh well they're both used for comparison but they have different behaviors When comparing values the triple equality is considered the strict equality operator right it performs a stricter comparison and this is the problem sometimes you can see that well five could equal five right remember we were talking about that like um con 5 equal 5 right um or is true that should not be true that should be false should be false right because uh five is clearly not equal to the string five when we triy to add two numbers they they did not behave as expected so um but the problem is this will be true right so we have a strict equality operator and a loose equality operator right strict loose we tend to use a strict one because it catches stupid bugs like this that causes all kinds of pain for many years in javascripts and I would just say like ban this from your head if you can um so the opposite of the strict would be oh not I mean sorry the equality operator the opposite of the equality operator is the inequality operator not equals right not equals cool um so if it's not equals false then it's true that makes sense it's logical now you can also add else um right cool you can add else here um I did say I think before that there's a then then is a conceptual thing uh you can see this is actually the then and then is defined in a lot of languages but in JavaScript you actually just have if and else um you can also do if else if some BO equals true and you could do else so if it's this case run this code uh if it's not that case then check this case and if it's this case run this code and otherwise in all other cases run this code right if else if else so um you see this a lot a lot of if statements this is used to check when things are the way they're supposed to be or uh decide how to handle something uh assuming it could be true or false if true do this if false do that right very very common pattern if not logged in redirect the user to the login um okay great so we kind of covered variables um we covered functions a little bit I want to go back to functions you saw something we said function print user now I'm going to blow your minds because we can also Define functions as a what's called a Lambda function right believe oh sorry it's not it's an arrow function It's actually an arrow function um you can see it's an arrow function because it has this little arrow this is the same as this this is the same as this and again this is a weird JavaScript thing why would you have two things that do the same thing well they're slightly different in extremely Annoying Ways uh now there is this idea of this in JavaScript this right and what this references is different from here to here and so I might say like okay well I don't want to get to classes yet but maybe I'll get to classes and then we'll kind of think about this like class uh my constructed class example and we're going to have a [Music] Constructor and then we want to print user and we um print well actually we're just going to Define this print user here um and this is going to take this do name going so fast I'm sorry um maybe we'll talk about classes and we'll get back we we'll tie this back because the reason that you would use one versus the other is kind of annoying again we'll ask CH uh Claude hey why would I use uh function vers cost what's any drawbacks to one versus the other um and it will give us an answer us a little space here let's figuring it out you can Define functions using function or const great however they have some complicated scoping issues one of the issues is that if I write a function all the way down here it actually gets hoisted it gets brought up to the top here and defined which can be helpful but could also create unexpected Behavior similar to those vars so if like function and I have VAR and let's say I have these like down here um you know whatever um I can call this print user down here all the way up here which is very cool except sometimes it's the wrong one or I reference it wrong or uh it hasn't been properly defined yet and if I say like if I created a print user with const uh I create cons and I use this up here um it would actually error out it's say I don't know what the hell you're talking about I I don't know this has not been defined yet right it'd be the same thing as me typing uh or like console logging some number which has been defined down here but it hasn't been defined yet right it's like it like uh this would work because it's been defined now it's like set a value this would definitely not work um yeah so this is called scoping and uh hoisting scoping is uh well um well technically this part is hoisting but we'll talk about scoping a sec that's the other function hoisting is the function got brought all the way up to the top even though it was like defined down at the bottom um with hoping we have a different problem um which is about The Binding of this so I'm going to talk about classes in a second um I guess we'll just talk about it now we we we saw we had objects right we have an object like uh const user equals blah blah blah whatever um name cool we can also Define this user as a class and so we could say class class user seems right I could say cons class user equals new user so uh these are functionally equivalent right user class user um one of them is an object you can see it's got what are called properties in it the other one has got this funky thing it's a class it's got new what's going on here it's got some arguments okay so the class user is is um has a fun a method in it called Constructor and when I call this it sets these values it sets the name of the user the age of the user the student and it also lets me add functions which are called Methods in this case to this user so you can see I have this print user method right and what that lets me do I just call it uh I can then go and say okay now class user. frint name I've got this method here called print name and it's inside of the user class right it's called print name and I can call it right there probably hope so variables H so let's say I'll just console.log printing name you can say print name John it printed JN where did JN come from well when I created a new user I gave it JN Al say uh Moon print name moon right so I printed the name which went into the user object and was stored there and saved there that's really cool um now I could also do something even really crazier I could say function create user and it takes the name age of the student just the same way as uh the other one um but it returns an object const user to create user um I'm sorry it's a little confusing but basically this user is an object this user is a new user class instance new user class user right and this user 2 that was from this create user are all the exact same there are just different ways to express the same amount of information and sometimes we use one versus the other there's lots of reasons why you might want to avoid classes and just use objects if you're making a a game with a million bullets in it you might actually save some memory and performance by using objects in JavaScript instead of classes um or you just don't like classes because you don't like that it's got this weird state in it you don't like how it looks and you just want to use functions you can do whatever you want um Python and uh and JavaScript are both unique in that they support functions first class and let you do kind of pseudo functional programming like more more or less like most of the basic T of functional programming uh inside the language pretty easily without having to do a lot of classes um something like C++ tends to encourage more of this kind of class-based design because they don't have an object type and they don't have um this idea of like well any value can be anything what called um Dynamic uh memory so um you can see I'm sorry this's is a lot of messy gobble go what do you need to know out of this well um I did promise one thing which was uh talking about this um so you need to know that like you need to know that this object is here and that if you wanted to get the name of this user you type user.name and it would be John be this John right here if you wanted user. AG it would be this 25 um and if you wanted to go down here and say class user is new user these values you say class user.name uh would be whatever this do name is uh in this case it's moon or you could type class. print name because you made a nice little helper method that prints the name for you console.log this you can see that it would print Moon the other thing you do is create a user this is generally called like either um I think this would be like a factory method probably I don't know it's not because usually factories create classes but um you can see that it's basically returning the object there's another name for this it's different kind of pattern it's returning the object uh and it could do a whole bunch of logic in here like go hit the database for some stuff you know calculate some things and then return it and this could be like a great way to like you know create a user go hydrate go find their Avatar whatever and then return like the object um and similarly if you wanted to get the name of this user you typed user 2. exactly same thing right um it's in the end of the day it's just returning um now I skip one thing which was inside of objects over a lot of things if you have any questions feel free to uh well we're actually on Discord um and if you have any questions you can ask them on our Discord in our stage which is live right now um but I will I will talk a little bit more about objects here and then we'll go back to classes you see that the object has what are called keys this is the key and it has values so every key has a value key value and key value is very uh is a very important Concept in programming if you've seen the memes in the timeline about use like developers using redis as their back end R is a key value store all it does is stores keys and values you can do magical things you could have like name uh address location and then you know this could be like some crazy business whatever um that could be like stored as your keys and values it could be anything um but the important thing is that you access a property using the key to get the value so user.name equal uh would be John equals John right user. name equals this would be true so I've looked at the the object gotten the key and then gotten the value now classes have a bunch of special things like objects really don't have a lot of access controls they don't have their own methods you could do some cool stuff though you could say like um print name and you could actually add a function to this object right and you could say okay cool print name um if you want to do the exact same thing with a class uh you would say uh C Class user user and you would create a list of arguments right John 25 true which is like name age is student um and it would just do this and then this print name would actually be baked into that class right you see how like instead of having every object has to have all of the classes they're actually just part of the class now this new thing says hey I'm not okay so so something you should understand as a relationship between a class and an instance a class is like something you can make lots and lots of copies of right I had this class is like a it it it doesn't there's actually no user here yet I have to create the user but this is kind of the blueprint from which I can create a user now this is the class user this is the actual instance of that class so it has all of the properties and values of the class but it's the actual object itself whereas the this is like the concept of the object the the class is like the you know I mean think about classes in in video games like are you a warrior okay class Warrior you know um are you a uh Mage you know that makes sense and I'll show you one other thing you might see which is what's called inheritance right so class Warrior Mage um how about Adventurer an adventurer has some default values so why don't we make class Warrior extend Venture extends sorrys Adventure um and so what this does it says okay well Warrior actually inherits from Adventure and so I don't need all this code that's fine I will call the super Constructor of the parent class that means is I've got a class called Warrior and it can borrow all of the properties from whatever it's extending and I just have to make sure that when I construct it that I like pass whatever that constructing thing is up to the super Constructor the Constructor in that parent class and I can chain these forever but we're going to go over this quickly because I pretty much never use this and I'd say like unless you're super Advanced you probably should not do inheritance generally there is this idea in modern programming of composing your objects together instead of inheriting from them and this can create kind of problems like what if I wanted to inherit from two things not just Adventurer but also um a player who can die you know so I had some you know um so so this is not very composable so I would try to stay away from this but if you see extends what's happening is that this class Warrior is actually just getting all of this stuff for free into it um in your own programming try to avoid this though unless you're very Pro so that's a lot of the basic stuff we're going to go over all of this again but we're going to do it in a different language um did I cover everything I didn't cover I think I should cover a few more things actually um we're going to cover make a four Loop okay four so here's a four loop we're going to cover for Loops really quickly because you know this is probably that's you're going to run into day one uh but probably day two uh the four Loop says Hey iterate over something iterate over every message and save it to my database uh iterate over every user and notify them that another user join the channel or um iterate over every Row in my database and print out the name of user right for Loops are very useful we use them all the time um so you can Define the first value is like the initial value of the for Loop should start at zero the next value is the condition under which the for Loop ends you can you can also return from the for Loop and break it early but by default it's going to end what uh it's going to continue as long as I is less than five once I hits five no more for and then you're going to call this called the increment how does it actually go from I to five well it adds one this this could also be written as I + one uh there's a little bit of sugar this is called an increment operator uh which just adds one to the ey that's plus plus but if you I would actually recommend you don't do that I recommend you do something like I equals I + 1 which if you're a beginner this is like a lot easier to make sense of I think um and then this should just log one 0 1 2 3 4 5 right uh no variabl such 0 2 3 4 5 very straightforward now we can also have a while loop while Loops go forever until a condition is met so we're going to make the exact same thing as the four Loop but this is a while loop now the while loop could say I could say like if xals 3 I'm going to break um I'll actually do I'll just run the while loop I run the while loop without it you can see this is the exact same thing as the four Loop X is less than 5 while X is less than 5 as long as this is true log X and then add one to X this could also Beal x + 1 now if I wanted to return early from this say if x equals 3 then break and that break you can see 0 1 2 3 stops calling the while loop and breaks out of it I could also type return and it does the same thing but what the return does is that would like I could return X I could actually bring the value back back out of this while loop up if I wanted to and like give it to something or somewhere so generally if you want to stop a while loop use break and if you want to return a value from while loop you use return uh something um a good example of like a for Loop or while loop is like if I'm doing an open eye completion and sometimes it doesn't work or it doesn't give me back like the function values I want so I'll do like a while false or while true and then once it gets me back what I want I'll break or return out with the values that I want um okay another um let's see what else we got to cover we have to cover Imports exports npm and um maybe a little bit about like what module JS is I don't know actually we're going to talk about requir versus import and um and then maybe we should probably do some async so um one of the hardest parts to grasp for beginners in um programming generally excuse me gen generally is asynchronous programming the problem with asynchronous programming is that you're calling things that don't happen immediately so if I I have steps I say do one thing do another thing do the next thing now what happens if I say do a do one thing while that's happening do this other thing and then do another thing do you know well there's a problem with that because every code I've showed you so far it's like one thing happens after another do the thing I'll say like function do something right and uh console log doing something um and then I'm going to have another function do something else uh right now I want these to happen at the same time but the way that programming works is that they happen one after the other right do something calls and then do something else calls and I can verify that for you by running this hello world goodbye world right now what if I want to run them at the same time well this is where I have to start thinking about like moving things along in parallel okay let let's say I have um I'm trying to get five users from the datab base and I could get one after the other or I could just get all five at the same time and let's say this is a terrible example and I haven't I actually have to make a different call for each one so I have to like get you know get user one get user two get user three oh my God right and this is going to let's say this takes like one second and this also takes one second and this also takes one second well now we're at 3 seconds just to get the users and the users like waiting for my page to load ridiculous so I've got to be able to do all of these at the same time um or I've got to tell it hey I'm going to do something and I'm going to like the user's not going able to do something for like 5 seconds so you got to go tell them that they can't do anything and this is loading I'm going to go do it and then I'm going to return back and I'm going to give you the answer and then you can like remove that window from them and and we can continue on and so we have in in um this is probably one of the things that JavaScript is best at is asynchronous programming and I will show you some examples of this so um I don't know um hey Claude can you give me an example of a think programming with await in javascripts and can you show me a simple uh promise okay so um I probably should have just played a little more dumb and just asked for the await in JavaScript I ji a little bit ahead there's a thing called promises promises are really cool uh you can create a promise and then it will do something and then you can come check on later and see if it's done uh you could wait for it to finish and pause your whole program until it finishes and we'll we'll cover that in a second or you could call it and let it do its thing and never check back on it it just works or you could like check on it regularly and see how it's doing so this might be like hey upload file and that gives you back a promise and then you're like is the file uploaded yet like NOP still still running still running um so a good example of this would be for example let's just analyze this file fetch data very common thing that you're probably if you're doing web programming the most common thing you're going to have to use a promise for is like fetching from some remote you know database or backend or whatever and you can see that this uh fetch data returns a new promise and does a bunch of stuff in here I this is Way Beyond the scope of our thing I don't even know why don't we just say hey can you explain this all right let's do here actually uh write a detailed explanation of the code with comments on each line what is going on here nice nice nice nice I would like to I'd really just like to paste it right can't I just no okay Pace good cool it actually added comments so like okay the function is name fetch data and takes in the parameter URL cool makes sense function returns a new promise object remember we talked about returning so it actually creates a promise new created and then gives it back to whatever called this fetch data so you'd be like con my promise equals uh cons my promise equals fetcha right okay that makes sense now you can see if the URL is what I was expecting we can resolve the promise return it otherwise we can reject it this resolve reject is special to This Promise API we're not going to get too much into this if you see a promise I really recommend and you could learn everything about it but you could also just select it and uh go and do the chat GPT magic because this is probably where you're going to mess up is in this asynchronous stuff this is a little bit more complicated in fact this what would the value of this be this is actually not going to be um whatever this would return this is going to be the promise itself it will give me this and I can check on the state of the promise but until it's finished I'm not going to be able to get all the values out of it so I'm just like I got a promise I don't know what to do with it um well okay that's why we have this code here right async function get data cool so you can see we have this function get data and it has this async value on it what that lets us do is use this other keyword await in JavaScript async and await are tied together you use them together if you want to use a weight you have to use it inside of an asynchronous function what a weight does it says okay instead of like calling fetch data and going on and whatever I'm going to I'm going to call it and I'm going to wait for it to return the value and I'm going to freeze everything else in my program just wait for this to come back right um now conveniently like my UI and stuff can probably still run and I can make this very efficient so it's not like everything freezes um but it is waiting to continue to log or do any other code until this fetch data has called The Promise has resolved what it's called Remember resolve and it's brought back the values that we want which in this case would be id1 named John this is an example API obviously we're just hardcoding some values but you can see that if we called this URL which we did we would get a resolution of id1 Nam John and the data that we'll return is this which as we discussed before is an object cool I have gotten a request to speak I'd be happy to speak uh actually let's let's do a little Q&A uh in just a minute after I go through a few of these and then we'll try and make sure that we got everything this is the most complicated part of what we're going to talk about I'm very sorry um but specifically with this um uh you should know that you're going to see async and a weight a lot don't be afraid of it it's really one of the best parts of JavaScript is that you can really simply do this because this kind of thing is actually can be much more convoluted and annoying in Python it's probably one of the weakest parts of python is Python's async handling um and we use async a lot because we contact a lot of websites and databases and uh we send messages from our agents and stuff and so generally like why would I use JavaScript all why am i showing you JavaScript in the context of Agents um because fundamentally while I do make python packages and JavaScript packages because so much of what we're doing is like string manipulation and working in browsers and stuff JavaScript is actually a great language for programming AI agents stuff like that um and it makes this kind of stuff this AI this async or working with other live liaries that are you know manipulating a browser or something whatever it's doing just way easier to work with um this await this async are new to javascripts last I I mean relatively new you know the last 10 years not the not the first 10 years um and when they came out they really made a lot of the programming easier uh for for async programming and I really recommend you you you look at these and think about these now I could rewrite this in a different way I could write the same function like this fetch data do then so there's another API which is very similar it's the same thing as the promise API but I'm using then instead of awaiting say fetch it and then whatever comes back from that we're going to log out and this would be functionally the same as what I just showed you I me functionally uh this code async function get data data equals a weight is the same as this uh get data fetch data then right await fetch data return data here give me the data value here it's like uh do this and then get the data and then pass it on down what happens here though is that you could say like fetch data again and you're saying data. url. then and then data 2 and you're like oh my God I got all these braces and they're wrong what's going on why like oh my God this is where Javas starts to look really ugly right like this is this is called call back hell and we want to avoid this we want to avoid this ugly coding style that's confusing by trying to always use async in a weight so again you can use then if you see then you'll know that this is an async operation that's like returning some data and doing something asynchronously but in your own coding you should really avoid this because it's confusing and hard to write and you will write bad bugs and this is easy to write right you just added that await how did I know how to write that I had to have an await well um actually that would not work um necessarily unless this was also asynchronous right so this is an async function this and that async function fetch data says hey you should await me I'm going to do stuff that's asynchronous this get data is also async because it also has um it you know it's it's got to be awaited when it's called um and uh and so it's kind of like it's an async function calling an async function now you'll notice though that we're not calling a weight down here good you call a weight. get data and um I'll show you I'll show you something weird um console.log getting data and then we'll say console. log do data oh right because we are not uh because it doesn't support top level of weight is 20 um okay so I'll make another basic function test um and I'm going to call test so I'm calling this test function here and I want to see okay if I call the test function test function I want to say it should say getting data it should get the data and then it should say got data right that's the order it should it should go um that would make sense and you can see it says getting data got data and then oh whoops my bad I did something terrible we're GNA delete this getting data got data and then I return the data later wait that's the wrong order I want to get data and then I want to do whatever the data function is and then I want to say got data right but you can see that it it skipped out of order because it called this then it called this and it didn't wait for it to end it just like did it and then it immediately went to the next line so what I had to do is say await I want to await this so now this is getting data now you see it froze then it got the actual data and then I got data this was the right order you can see wrong order right order why because I waited for this function to do all of its stuff and then come back and then I kept going if I don't do this it'll still work you saw it work but this is now asynchronous off on Zone in no man's land it's got nothing to do with whatever is going on in this test function anymore this is just going to keep cranking through I could be like you know blah blah whatever you can imagine just keeps going and this is all just going to keep crunching through all the logic and this will happen at the same time but but it's off there somewhere else it's not uh you know if I want to make sure that I got that data like const user data equals awakea data then this this will be populated one of the biggest errors you're going to have as a beginner is you're going to do this you say const user data equals get data and you're going to forget the await and what you're going to get back is the actual promise object and not the values of that data that you want and you're going to be like why does my code not work and you're spend two hours on this and then you're going to say oh and your code is going to work and this is going to happen to you like five times but then you'll learn and it's going to feel great believe me this I've done this so many times uh cool so um I know this is complicated the way that you solve this specifically is that you should really use chat GPT to explain the code say fix the code say I'm trying to do an asynchronous thing and it's not working why is it broken I think that will help you um an enormous amount so for example you know we run this and we say console.log got data and then we log console.log user data right and okay cool we got this and I'm like use your data promise what what is this I don't want this promise I want I want some values right um how do I get those values well I'm going to go take this and I'm going to go paste it into our friendly Claud and I'm going to say um I got this value for user data it is wrong right okay us data promise and what does it say you need to use the awake keyword thank you Claude you're so smart really is so smart Okay so I think that we've covered um uh well there's a couple more things I got to cover that are nothing to do with JavaScript but we got to talk about npm and node.js so so let's start with npm npm is cool it is a uh so what does npm stand for stands for node package manager the node is obvious we're we're using node uh packages well that's what we're going to look into our our pulling in packages that we want to use which are basically bundles of code they could be libraries or just functions or whatever um and then manager so npm helps us manage our packages so if I have an application that has Bunch pack like open Ai and chalk I don't know Express I want to install those bring them into my code base and then I don't have to write all of the code that those packages are and in fact if you have never programmed and you're coming into this you might be surprised at how far you can get entirely just with packages and very very minimal coding and just pulling packages together that do a lot of the things that you probably wouldn't want to do yourself for example I want to generate unique names this is a very common thing I have to do and there is a package called unique names generator and to install that well I I could install it I could type in npm install unique names generator uh and that would add this package to my project but I have to have some way of listing what packages are part of this project right like I can't just I can type this if that works I'm going to be kind of blown away cuz I don't think I have uh a way of it that makes no sense um it's possible there's a package Json somewhere else but you shouldn't be able to install packages unless you have what's called a package.json and so this is like um probably one of the most important things for being a a node like JS Dev is you want to know what are the packages that this project Imports how do I run it how do I actually run the project and these are things that are contained within the package Json usually so I want toit this uh repo I have here with npm so that I can add packages to it and the package I want to add we're going to add this unique names generator right that seems right and I'm going to go npm install no I have to in it first right npm in itpm in it and this is going to go through some stuff uh what's the package name I'll just leave that version I don't I don't care this I'm just G to go Smash It smash smash smash is this okay yes and it created a package Json for me right very useful now you can see it's got some stuff main hello worldas whatever that that's actually really helpful if you're making a library you don't have to worry about that there's two things you have to worry about which are going to be the scripts and the dependencies so right now you don't see any dependencies there's no dependencies but we wanted to add a package and those packages our package dependencies so you can see npm install generator cool I'm going to copy this npmi unique so you can npm install npmi and that's going to add the package to this project let do that npmi and you can see now I have dependencies unique D generator right so now I can actually use this in my project very useful it also created a file called a package lock now you can delete the package lock and you can install again any time but this will actually lock the the versions of all of your packages as well as all of the packages that they themselves also import because packages are built on packages on packages and no JS is crazy you know uh so that's how we do it so we sometimes you have weird package dependency errors and you want to lock your dependencies because you know if it works on my machine and your machine we probably don't want it to you know on Gerald's machine to have slightly different versions of the same packages so that's what the package lock is for the package is mostly important for defining the dependencies of your project and for um these scripts remember I was running node variables. js uh I did that thing cool says fine um I can actually make a script call this variables and instead of typing in node variables JS I will remember I'll save this like command in here and then I don't have to remember what that was and the standard convention in um in node.js projects is to create something either start and that's like something to get people started or to create deaf um so deaf um and we'll just do the same thing yeah whatever so if I run npm run start it's functionally calling node variables the same thing as if I type node varable JS but what's nice is that I don't have to maybe I had to have like some crazy like uh environment far equals whatever open AI API key equals and then like instead of having to type all this in every time Jesus and sometimes it can get really crazy with your with your scripts um I could just type in and PM Run start and when I'm going to a new project I'm going to go to a new project I'm going to go to um let's say I have some friends who have this thing called pocket JS right going spam them a little bit I go to um their package Json I can see oh they got all these scripts right so if I want to build this Library I'm it's probably pretty safe to assume that npm run build is going to do what I want to do um and they've done this nice thing of like okay npm run Dev that's probably what I want to run if I'm at home just just doing this thing uh and then um then I have all these other like Dev all okay that probably runs everything and uh or you know no cash that probably removes the cash Dev pocket just just run like some of the things here you know just run the signers just run the providers whatever um same thing with builds so I can like Parts out build just part of it or and you can see all these crazy things in here you know these arguments this is part of like larna probably um or Turbo or whatever um don't worry about that just know that uh death okay cool Dev uh I don't have to know what this does I just have to go back and type in npm run Dev and it will work so when I'm analyzing a new project for the first time the first file I go to is the package.json because that's where all of the scripts are right that's that's where like you're whatever developers are running this this is what they're running to get their thing going so I should probably look at that too uh and then you can see well in this case this is a library so it doesn't have dependencies but it has Dev dependencies like typescripts and the turgo stuff sometimes it'll have dependencies like if it was depending on another project um but in this case it it is a self-contained Library um let's say let's go to one of ours let's go to bit this is one of my projects it's pretty cool right give us a star let's go to the package Json uh you can see very similar name version all this stuff but the main important part is scripts we've got Dev got build Floy you know um and then we've also got Dev dependencies as well as regular dependencies right so these are things that need to get built into the actual app and and shipped with the library and then these are things that we only use for doing the development and they don't get shipped with our library but we do need them installed here to two so very very important this package Json um and uh another trick I'm going to show you guys a trick a lot of times I want to find a project that's already doing what I'm trying to do right um I want to I want to let's see what do I want to find I want to find a um a super base I was doing something the other day I like a super base uh Discord bot superbase Discord I know I'm going to go to npmjs and I'm going to look at subbase and I say okay cool the package is called uh I don't know super b super base but yeah okay sure it's called super base and then the other one is called uh let's see what Discord um surpris that I don't just see it here you would think discord.js that's what I'm looking for cool discord.js so I see that there's a discord.js and I see that there is a uh um superbase so I'm going to search superbas discord.js and I'm going to search I think I think it's file path package.json this is some like let me remember which one it is it's one of these yeah pack path package. Json and now I can see all of the projects on GitHub bu their package.json which have the libraries that I am interested in oh there's a fork of upstreet my old project which has discord.js and sub Bas very cool um oh very fascinating um and I can see like maybe I'll find examples of what I'm looking for in there here's a lang chain JS um uh oh they're doing something with Discord that's cool um etc etc and so like a lot of times Discord oh hey magic how about that another one of my old companies um and you can see that like I can find the projects that are utilizing that and I can go in and like do something you know I can I can find out where they're using that and in this case like magic I'm curious like where is the scjs being used um and I can then in the repo search for discord.js and see that oh there's a Discord plugin and all of the code for Discord that I would be interested in is actually right here right very cool very useful um spam if you like AI agents you should check out magic it's a AI node editor it's very Advanced uh it's free and open source and it's made in typescript and you can download it here um so that's like a that a lot of times when I'm trying to hack stuff together I'm like I'm going to go find the most similar project I can and I'm going to search the package Json just the way that I showed you guys um that's a like a I think a really important hacker trick it's also let me have like a lot of alpha on things that are coming out or like things people are working on because I'll just like straight up search like okay well this package just came out like who's doing what with it you know um oh uh you know like Microsoft just releases like semantic kernel like okay well who's who's using semantic kernel what are they using it for um and and python has similar trick which we'll we'll talk about in a second so uh this is package Json we have this unique name generator how do we use this how do I actually generate a unique name I'm going to make a new one called unique names sljs and we should add this we'll say let me get rid of this say unique names sljs so we can just write npm we'll just call this unique and then I can run npm run unique and nothing will happen because there's no code in it cool so now we have to get the unique names code into here and we're going to type in unique names in npm and we're going to look at this because they probably have an example of how to use it so generally in npm you'll see that if you find a package there's a read me and you can read it and usually it'll have some documentation and this is probably what we need if it's not what you need you should look for the docs inside of the documentation here or you can click on the GitHub and you can go to the original GitHub and pretty much every package on npm is also open source on GitHub so you can see the project and uh even contribute to it fix it see if there's somebody else like was working on a poll request that fixed your bug um very useful so we're going to try and uh look through the read me and get it to work um now that looks right cool let me just copy this I'm just pasting a demo in right can't go wrong and we run it um oh well we have to log so let's log out random name and let's log out short name so I just I literally just took their usage um you can see they imported some stuff we'll talk about this in a second they um created a random name and they created a short name but they didn't do anything with them yet so we have to log those overall great manate provincial snipe you can see random name short name cool so um let's break this down we have const and then we have these values equals require H this is so complicated so this is called an object D structure you can see that this is an object we talked about objects right con sum object equals key value you know like this um you can also have it be just key equals key and then this key will is assumed that it's coming from wherever it's being pulled out of so you could also say con uh well let me let's say I have const key equals value like this right some object I have this thing now I could Define a new constant called key like that and equal some object and the value of key is going to be value so I created this object called some object equals and see it's got this key of value and now I'm destructuring key back out and turning this into its own variable and this is destructuring because you can see that well I create I created an object structure and now I'm like undoing and reversing what I did so this is called a d structure like structuring an object destructuring an object and if I log key it will be value if I log some ob. key it will also be value these are the same values when I want to import a package into node.js they kind of make me do the same thing so I could do const uniques equals require and then I could say const unique name generator equals unique. unique CH generator I could do this right um and that's fine that's legal you're allowed to do this and if you are scared of what I'm showing you when you require you should just require the the not braced not destructure just like the overall object this is like the whole package and then you can get the things out of it that you want like eating teer but if you're feeling brave the same way to do that would be to write this right this is the same as this so look at this structure right Quire unique name generator unique St unique name generator let show you one other thing we didn't talk about but another another crazy JavaScript thing um python 2 is you can type in um unique Cham generator equals uniques and this is actually the exact same so you can use this do notation or you can use this property AIS or notation it's the two different notations but they they're functionally the exact same thing um but if you see this just know that in JavaScript at least this and this are the same and you can use them interchangeably and this is also the same as this the same these three are different ways to represent the exact same thing right kind of silly but yeah dynamic programming um cool now there's another fun thing about javascripts which I absolutely love which is that there are many different versions of javascripts uh there is es6 there's es5 there's es20 there's ESX there is uh ecmascript which is different than JavaScript for legal reasons because uh Java is a licensed trademark of sun Corporation I think something like that um and uh it's very confusing because sometimes you can use require and sometimes you can't you have to use import H so why why okay um what am I talking about here well you see like usage here's my normal usage unique we'll just do just and they're also like oh but you could do it in typescript too I know we're not doing typescript but this is actually not typescript this is called No JS require syntax this it's called es6 import syntax sometime in 2016 uh the ecmascript foundation so JavaScript is actually called ecmascript but didn't really catch on um for legal reasons Etc um but they're the ones who determine the the future of the language so they call it ecmascript yes yes six so for Eon script 6 um they decided I think it was around 2016 so seven eight years ago um we are going to add this import and uh I believe I believe this at the same time they were like doing modules and classes and um um like ASN a wait a lot of this stuff got added in the S6 um an es5 um and I'm sorry if you are a jobri person and like I'm telling the history wrong I probably am but like generally just know that node.js used to have this require thing and this was how you like got something in and then with in in browser JavaScript everyone was using import for a long time and then very recently nodejs which we're in said okay cool we will add support for all of the es6 language features including import which means that if you are using uh node sometimes you can use import and sometimes you have to use require I will show you the problems I I'll show you why like this is probably one of the most important stupid things to know that will screw you over when you're like trying to program is why doesn't require work why doesn't import work I am try to make a browser thing and requires not working okay um so first thing to know no JS require syntax only works in OJs if you see require your code will not work in a browser there are ways to shim that or polyfill it or basically fix that problem um and you can look into those but by default this code will never run in a browser this code will run in a browser and it will sometimes run in node.js but you have to make a specific change to our package Json and to the project we're in to get that to work so um you can see that they gave me some code I'll just paste that in it's basically the same as code we had before but instead of um uh requiring we're importing and I'm going to log console.log I don't think I'm log this random name and ah there's an error right cannot use import statement outside of a module so when I said there's many kinds of JS there is regular JS which is kind of like you write some js and then there's what's called module JS and module JS is what enables you to create things that you can Import and Export so let's say I have like a function um my awesome function uh sorry my awesome function um and it does wow this is such a good function right and I want to use this in another file this is in unique names and I actually want to call uh um I want to import my awesome function from I'm going to make this called functions. JS I'm just going to have that one F make more sense so I've got this function sjs my awesome function and I want to import my awesome function into this file so that I can call it right so that's why we have this import because like I have multiple files I want to access things in one file in another file that should be really easy right that seems like something you probably have to do every day if I had I could have a a package called functions package which I like npm installed and you can see it doesn't have a do slash but if the file is in my local uh this is another file in the same folder I can do dot slash like this right so now I'm I'm going to try and call that um I'm going to say node variables. js uh and I have the same problem it cannot import this my awesome function right not going to work how do I solve that well I have to tell it that we're not just doing no JS intax we're doing that special es6 inax and we're going to use modules um module support so I'm going to go to package Json and I'm going to type in type module this is important when you go to people's package Json and you're not sure what's going on this is a very good indicator of if they're using es6 or node.js stuff you can see when the type module is set to yes6 it supports modules otherwise it's set to Common JS so the two main types of JavaScript language in this day and age are commonjs and module JS but the future is rapidly becoming module JS and the rest is being forgotten so we have to generally set this type module if we want to use module JS and that import syntax I'm going to type in node variable. js still didn't work Why didn't it work well because node doesn't treat. JS files like module JS it's very annoying it does however happen to like MJS MJS uh stands for module JS and so generally when we are es6 programming in node without any kind of special web pack or Fe like any bundlers or special uh stuff out there that helps us compile our code just just doing what we're doing right now raw if we want to use this import syntax we have to use the MJS and you will sometimes see MJS and just so you know that is Javascript but it is in this module syntax format for some reason so now if I run this variables. MJS hopefully it works but it doesn't because I have to make sure that's saved um there you go now I have a different error import my awesome function from functions. MJS it does not provide an export because even though I have this function it's actually not exposed it cannot be imported I have to add another keyword called export so now I'm exporting this function now you can get this function in other files cool okay uh let's try that again so now I I exported it from functions and now I'm importing it here let's try that boom wow this is such a good function it actually worked so I had to make some changes I had to change my files to MJS pretty sure I had to typ change the type to module I wonder if I could do it it actually worked um I think that there's uh this is very important for believe typescript and probably also um I think that mod I don't know I thought the node 20 would just respect this but it seems not to be so if I just turn it to MJS I don't even seems like I need that seems just fine yeah but I do need to change these to MJS for for node to respect them as modules you can see if I turn them tojs it would just not work um even if I turn this one tojs and the other one is MJS it would still not work um so import export npm all that great fun f one other thing I forgot to mention is that if you clone a project like let's say just go and clone bjet right you can go get clone type it in I already downloaded it so it's already here um the first thing you're probably going to do if you have that I have another here you're going to go and you're going to look you're going to look at the package you're probably going to write npm install and that npm install is going to set up all of those packages for you in your project because initially there's hundreds of packages um you can see I've got lots and each of these has many sub packages so they're not going to like just download with my repo those are installed when you run npm install if you want to see what was installed you can open this node modules folder and you can see these files um and you can see these are all the different packages that are like actually installed in my project and this is one of the things you'll make fun of node.js for is that you know you install one thing and it's actually like 50 things um something to know is that you can delete your node modules folder at any time you can delete it and if um um whoops sometimes you might have to because you have weird bugs and if you do um that's okay uh but you will notice that you'll end up running into a problem like if I run um node uniqu names. MJS oh that's weird I don't care about adjectives care about sorry um it's really interesting that it works because it doesn't have a RM package Json give me a second I think I have some stuff um okay so if I run um node unique d. JS you can see it can't find a package called unique D generator and then I'm like but I know it I know that I have it in my package Json it's right here that's because I have to npm install it doesn't have a node modules folder in here um and that's actually where it finds this code so when I add a package that adds code to this node modules folder you can see that now there's this unique name generator and if I want to delete that that's fine but then I have to install all again um another thing to note is you should ignore your node modules and you should not commit this to your GitHub you can add a dog ignore and you'll see this in pretty much every uh project dog ignore and the main thing there is node modules and that way you'll see it's it's it's not going to be committed um if you go to my get ignore here andent see ignoring a lot of things but we're definitely ignoring node bches um cool I am going to now open it up for questions for people on the Discord um I am going to take a quick bathroom break please feel free um to ask any questions we'll be back in 30 seconds if you have any questions on the uh Twitter space we'll also review that as well we want to make sure that we've kind of covered this then we're going to go into our next session it's going to be a lot of fun we're going to cover all of this again in Python if that's all right um it's been a pretty long session but um I I feel like uh it's probably good cover I think we're going to cut some of the uh Asian stuff short unless we have time but I do have a couple of Asian examples that we can go over and I think the one that I really want to show off is in Python um so we'll we'll kind of review all of these Concepts again same thing uh but doing it in Python and um we'll probably go a little bit faster since we already talked about a lot of the Core Concepts so stay tuned we'll be back in 30 second I don't know 3 minutes we talked about how you have scripts that you can call like this is this could be like Dev node whatever you know um you have a name you have dependencies the uh the same is not exactly the case for python the the by far most annoying part of python is actually the fact that it doesn't have this really that all of the packages for node.js are contained self-contained inside of this project node modules and it never really goes outside of this and with python what you get stuck on if you ever ask anybody who use Python it's like what's the hardest P part of python and it's actually not the language at all it's the environment the problem is is that python globally installs packages so instead of having a package here in my little folder here it's going to install it globally on my system and whatever is available in that environment might be different than another python project that I'm working on so now I have to start managing different python environments and what people decided was well we can have all of these different tools to help you manage your environment right and um let's see let's talk about this so um I just want to use dumpy uh how do I just like use a package in like that numpy thing we'll get back to the environment problems because we'll probably run into them or I'll try and create them but basically uh instead of having a package Json we just have a computer and there are packages installed in it and I can see what packages I have um I think it's pip dasm numai no no what is it um it's python DM numpy might be version I should remember this let's see how do I check the version of numpy currently installed you get to work I SL of course that would be obvious um so I can just type in like python I can say import numpy and then I can say print numpy do version and I can see I have numpy 1.2 Pi cool I've installed it it's but where is that coming from there's no package Json there's no definition you see I have I definitely have 4.71 of this in in JavaScript but in Python I have no real way of knowing what my dependencies are in this given environment so I have to solve two problems one I have to know what uh packages I want for this project and I want to like tell other people so they can make sure they have them install in their system and then I also want to make sure that I'm running in an environment where I don't delete or like mess up my environment for my other projects so there's a lot of ways to solve this problem um uh I don't have cond on here do I um back so one of them is cond if you can go to cond and cond you install it and then it let you manage a bunch of different versions of python and each one has its own environment and settings and everything and we all decided that was horrible after trying it for many years and so we created a new thing called poetry and poetry is kind of the the uh the latest and greatest in a lot of ways because it does solve some of these problems with dependency management um you can see like poetry um and and generally this is probably your best bet if you see poetry or you see any of this stuff like fine just use it um there's a bunch of other things VM is one VM is good you can create virtual environments with VM and that basis is I'm going to create my own environment with my own packages just in this folder and I'm going to activate it every time I want to run that project kind of awkward but use VMS um I let's use poetry uh let's see hey Claude how do I use poetry in my python project uh I'd like to install lpai you will see cond pip virtual M VM um poetry I missing other ones sometimes you'll use two or three of them in the same project because there was some stupid bug or reason why you had to it's really dumb um cool so you can see well we need to get poetry so okay we'll curl install it cool thanks I probably already have it but whatever um let do his thing then we will poetry and knit well it's not ready yet you know what while it's installing poetry I'm going to show you pip we'll go back I'm sorry for jumping around a lot but um I talked about npm earlier and npm would say like oh there's actually numpy on npm okay great uh whatever it's a package manager for JavaScript there's actually a similar project for Python and it's called piie pypi python package index pii and if I wanted to find a package on here type in npy you can see okay cool it's actually got it's got umpire right here umpire 1.26 and it shows me how to install n pip install n that and they should all be good I should just be able to do this I shouldn't need poetry and all this stuff the reason that I need it is because it didn't just install uh um numpy into this project it installed it into my system and like I actually have another project on this system that uses a different version of numpy that's not compatible with this one and they will not work together which means that's who change projects I have to go reinstall those versions of all the dependencies and it's a freaking nightmare so poetry's goal is to say like oh you have dumpy 1.26 here but in this other thing you have 1.25 so I will let each project have its own uh kind of setup and environment much like what we take for granted in in npm and no. JS so I do poetry ad numpy oh sorry I had to poetry and knit first I do poetry and knit um sorry just do this no no yes I knitted a poetry project which gives me a pi project. toml and then I can say poetry ad numpy and so this basically gives me the experience that I was expecting from npf where now I have like a file that tracks my dependencies uh it's specific to this project it doesn't if I have another project with different dependencies it doesn't interrupt with this one and so you can see this p project. toml is basically the Poetry python equivalent of a package.json if you look you know it's got the dependencies here it's got name version description name version description basically the Poetry was like Hey those those JavaScript guys they're doing they got it set up why can't we get some of that and they basically kind of added that uh that devx so if you're doing python I do recommend looking at poetry try to avoid the other ones unless you download a project that already has them set up um you know but it's probably the place that's going to cost you the most pain so just like try to stick with the latest thing that everyone else is using it'll probably be less painful um but definitely this issue of like why doesn't this python thing work on my computer is always related to this environment problem and it it plags many many developers even senior Developers for many many years um so just to be aware so to recap if you want to export something you just make it and everything is public everything is exported you can't hide stuff from me if I want Hello World out of this file I'm getting it right right there um to import I can do from Hello world. import or I could just say import hell world and call This And they would be the equivalent um now this P project. toml this is the way you should do it I really think so but if you're uh masochistic and you want to avoid all that you could also use uh pip and what's called the requirements.txt so I thing you'll see in a lot of of uh projects I'll do one I have one called Agent memory is requirement. txt and this just shows you all of the uh projects that are associated I mean sorry all of the packages that are associated with this project so this project needs onox runtime python. environment psychop PG chroma DB cool and it doesn't actually care what version except for this one it says it has to be less than 1.15 but it just wants the latest version but sometimes you don't want the latest version of something you just you want to pin your version and so another thing you might see um why don't we just search for like uh I don't know let's sarch for like stable diffusion let's just see what comes up anyway got some automatic 1111 um what's in here you can see this requirements on txt for for stable Division webui and this is where they're like defining in what it's called pinning specific versions they needed this specific version of gradio and a higher version of this a fast API um and so this is like how people used to do this kind of dependency management stuff pip you install you do like pip install dasr requirements.txt and you install your requirements but this is terrible nobody ever liked it we always suffered P project. toml this is the way to go use poetry it'll make you so much so much happier um okay I believe that I've covered kind of everything that I wanted to cover from the basic programming and I have one last section that I want to accomplish which is that I want to build a basic chat bot in p python um I want to take everything we've learned and I want to put it all together and I also want to use this as an opportunity to promote some of my own work that I've done that I think will actually really help you I would not make you suggest this stuff for you if I didn't think it was cool but I want to show you two libraries that I've made that a lot of people have gotten some use out of and they're uh Asian memory and easy completion so we start agent memory is a way to easily create search recall memories this is very useful for like conversation or storing facts and recalling them later about a user basically anything where you want to have like a memory system that means that it can give you a list of the last conversation or it could actually search using retrieval augmentation uh for the appropriate memory so this gets into a thing called Vector search and if you've been playing around with llms you've heard about llms you might have heard of a thing called rag retrieval rag retrieval augmentation what is Rag and you can go look at this but basically it's like hey um can I take your query and turn it into like a latent space uh I don't that's terrible can I can I can I like compare how similar it is in its conceptual space as uh to some other thing like if if I turn the yeah if I turn the words into numbers and I uh reasonably correspond the numbers with one another are the number numbers close together and I'm kind of basing it on what the words mean those numbers I'm making yes and so like a PRD graph Vector you know whatever if I look at this plots uh generally if you think of like literally you could take any two words and you could put them in a graph somewhere I these are very good graphs and you could measure the distance between any of these two arrows and say well those two arrows are facing the same direction and they are the this far away so they're the most similar to each other and that might be like hey what color are my eyes and the agent would be like well yesterday said your eyes were blue and the idea of eyes was so conceptually embedded in those words that that what color are my eyes and your eyes are blue are actually very very conceptually similar to each other so we use that as a way to do like memory systems and this is like pretty much everybody right now who's doing memory is using some version of retrieval augmentation or rag and the way that we do that is what's called Vector search there is a uh h nsw there is a um very specific uh algorithm that we all use called hnsw hierarchal small world it's the same thing in PG Vector postgress pine cone Feist elastic search we8 doesn't matter they all basically use the same algorithm um different implementations but fundamentally the same to compare the similarity of two things and those could be like king and queen or uh some news in Russia Today and some news in California and like how similar are they and you can get a number between zero and one of how similar they are um you can see there's a bunch of libraries for this um and if you're interested dig into that but generally just know that we use this as like our fuzzy matching uh memory system and we've created abstractions like agent memory so that you don't have to worry about the math you could create a memory like can't do that Dave and then you could search for all memories in the conversation or all memories that uh are of that type um you know whatever you want um and it's a similarity search so even if the words are not the same it will similar C similarity by concept so that's kind of what agent memory is this is like fundamental for creating uh agents that can can have memory this is very similar to what you get with the open AI assistant API is essentially um a memory retrievable system like this the other one we're using is easy completion and easy completion uh basically calls the open AI uh API all other apis as well but it focuses on things that are really annoying about calling apis like validating that when you call a function call that the parameters that come back are the ones you expect or validating that when you call the the API at all that it actually returns if it fails it will try again and and again and you know and and fall back into other conditions if it's running into problems or another thing it does is if if your response is too long the context window because your conversation got too long it'll start to trim the conversation down to what fits within your your contact so that you don't run into errors so easy completion basically makes it so if you want to call a function it's very easy if you wanted to call um just a very basic like um text completion to open AI it's like one liner kind of thing we're going to use uh use this a little bit use both these in our next little demo here um and if you want to add these it's pip install agent memory pip install Easy completion very simple so um let's see let's take let's let's take a crack at it pip install age of memory and I can also add easy completion and those will install and hopefully that wasn't horrible um great and now we need to have a we want to make a bot so I want to make a bot that uses my libraries that already exist and um this is another hacker trick I'm going to show you um and they're not in Claud I don't think but I want I definitely want like to have this all be relevant I wanted to use my library right from GitHub so I'm just going to go take the entire read me copy this I'm g go to Claud and I'm just going to paste it in so now it's got my whole read me for H memory and I'm going to take my whole read me for easy completion I go paste that the cloud too um now what do I want I want a chatbot right so um create a chatbot chat bot that does the following in Python does the following one receive user inputs two uh send the input um two uh easy completion and get a response three print the response um note what this not be list note we want to use agent memory to store the conversation and retrieve um retrieve it we want to use get um I just I'm going to be very specific and say I want to use get memories to get the conversation because I know that when I look in asent emories that there is a get memories get all memories for conversation like this is the function is get memories so I'm just going to tell Claude like instead of guessing just we want to use the get memories to get the conversation history um and it's probably fine let's just try it let's see what it does it's going to take a minute what we got from Easy completion import chat completion seems right from ma memory import create and get memories seems right we Define a chatbot it prints welcome to the chatbot enter quit to exit okay while true so you can see there's a while loop we had discussed while true do all this stuff in a loot forever um if the user writes quit then we're going to break break out of while loop we didn't talk about while Loops in Python but they basically work the exact same way as in JavaScript where you have you have some condition while the condition is true you do it and you can break out of it so the while loop is not an infinite Loop because it can break um we get the input from the user we create a memory uh we store basically the user's input and then we create conversation history because now we've stored the memory we can recall all recent memories um which will also include this one then we set up the system message here and then for each message in our conversation history which we got out of the database we're going to add a new message to our messages list that we're going to send to chat jbt um for message in conversation history uh well the role equals message uh is the speaker the content is the document and append that I think this probably is wrong this should probably just be user but it's fine we'll uh we'll verify that um then we get a response from chat completion chat completion is a function that is called from Easy completion and this is just wrapping the open AI uh uh chat API then we're going to create a memory from the response the agent respondents and that will save that as another conversation memory and then we will print that response and then loop back over and because we're recalling and storing memory constantly from the database it is creating the illusion of a ongoing conversation history even though we're not storing any like conversation history memory whatever we're actually storing it in and out of the database so um cool so let's try it let's see if it works copy code back to V world let's call this chatbot Pi let's try it python chatbot py I think that I probably had to save it let's try that again pi [Music] and welcome to chatbot enter quit to exit hello okay we ran into an error right well oh no what is this error text input sequence must be a string uh okay that's a problem well I will just go paste that blindly in the cloud because I don't even want to think about it I don't even want to know I just I'm going to assume that the AI is smarter than me and knows what's going on doesn't really give you the instant satisfaction of chat GPT yet you got to wait for it but interesting to resolve this issue you can sure that response X is a string okay I'm really skeptical in fact I know that this is wrong because I know that the it should probably be response content but you know what let's just see what it says let's just paste it in blindly and let's try it because we're noobs and AI is smarter than us hello and the isn't said none okay so we definitely got some sort of issue um uh well I know that the issue is that response tax has probably got some sort of thing not right so let's print out the response print out the response and we can see the response text none usage finish reason could not get a response from the open API AI well I noticed something um we're not providing an API key usually you have have an API key to get uh AIS to work um see let's go to easy completion and we should be able to say API key okay so when you call a chat completion which is what we're doing um it wants an API key now I know this library and I know that you could you could like set an API key in the environments or whatever um you could say like easy um I think it's open AI API key or whatever but we just need to make sure that we pass an API key in for the open API key and I think that our thing will work um so the chat completion um API key equals but where do we where do we get our API key from um and the reason I'm doing it this way kind of in a convoluted way is cuz I want to uh convey something which is that sometimes we have to access Secrets or environment variables and I really don't want you guys to see what my API key is for open AI like that's not great but I do kind of need to like past this in so um well how do I do that without you seeing it uh so there's a thing called do end and I use this an npmm there's actually a bunch of different uh in in Python could use like uh kwrs and stuff to pass things through whatever but I like environment variables in npm we use a lot and this lets you use a um a file which stores all your secrets locally and you do not put that file in your GitHub or anything you store it locally and and that like stores your your like open AI API key and stuff for you and um oh there a new version NX I have to look at that um but also uh python has a similar problem whoops python uh piie uhm and we have M here um we also I think it's p.m yeah so we have p.m and that lets us read values out of a file which we're going to create here called EV and I'm going to put open AI API key equals and then you're going to uh I'm going to have to go delete this immediately after this because I don't think there's any way I can secret this into the year without you guys seeing it um but that's fine give me one second API key create new API key delete this immediately it's the name of the key and I'm going to paste my key here open I keys to start with SK whatever I'm going to close that so now you can see open I key equals that and I have a DOT environment variable I mean file now I'm going to take this chatbot dopy go back to Claud I want to import open AI API key using p.m and set it to the API key field uh in the um easy completion uh chat completion call please modify my code and I'll paste all the code and hopefully this works Fromm blow. M looks right looking good looking good we can see it did and then we have os. getet ends and we can run that okay so what changed was we imported M called low. M and then we did os. get API key and we run that hello hello how can i s you today okay so this is a super annoying thing um the current process yeah so you can see it's basically saying to disable that you have to set the environment variable token and this blah blah blah well conveniently we can actually go into ourm and we just say equals false we'll just do that and let's try this again um and that actually got our warning to go away now we just have to get rid of this annoying log here um hello so so this um this token Paralis is a thing from hugging face tokenizers that was just yelling at us like hey here's a warning and that's fine but it's really annoying in the midst of our conversation so we had to like get rid of that um and then I had some print statements that were getting in the way too now I got rid of that now we actually have a working bot hello how can I sist you today um my eyes are blue hello how can I oh oh oh no it is not working the way that I intended um and there's a reason for that and I know what the reason that is which is conversation history to get memories problem is is that the memories need to be reversed um let's see if that works now think about it when you recall data from a database um in message history you want to get the most recent messages but then you have to flip them upside down because they are happening in reverse order right because like you're you're rewinding time or flipping it you know the most recent message um is actually the last message you print so I had to reverse the messages um will it work I said hello how can I ass you my eyes are blue that's great blue eyes can be quite striking it's very so so now I know the conversation is clearly has context it's working and now I have a chatbot awesome very good uh blah blah so let's just review this code really quick we imported easy completion just the track completion now this could we could import import open Ai and do the whole open AI dance but um then we'd have to have like wrappers around the code to handle the loop errors all that stuff um so instead we have our easy completion Library we have agent memory we could just use chroma like chroma DB or something but it makes it a really really nice simple oneline attraction to like add a searchable memory to the DB like this this is retrieval augmentation right here you know just this line and this line and or search memories if you want um search retrieval like that's all you need to add retrieval to your your uh project um so we have eing completion H memory we're using M to get the environment variables we don't actually need thism we could just uh when we start up our thing shove the API key in here but one it's going to expose my API key and two it is horribly ugly this will work you can see I just pass the environment variables directly but the do M solves the problem and basically saves my environment varibles so I don't have to like pass them into my command line it's really gross uh chilling yo um so we set up our environment variables loaded in our open AI API key then we create this chatbot function right which has a while loop in it um now we could actually don't even need this St we could just do this and instead we just have a single script with a while loop right this is fine this is legal um that and you can see that so while true in our python script get input from the user this is a python function built in called input and that's what is actually down here see the user colon and if I type in Quit Break Out of This Loop and end project you know and the and the script if I don't type in quit create the memory get the conversation history reverse it the reverse flip the array so that the the messages are coming out in reverse order um set up my messages array with my system message add all of my messages to the conversation uh to this messages array get the open AI API key then run the openai completion with that array of messages to get the next message as well as the API key get the response get the text value out of the response and then create a memory and store that message uh in the in the database for the next conversation and then print the assistance resp and that's the entire chat bot like any chat bot should be this simple right you can have custom functions and all kinds of crazy stuff but fundamentally this is this is what you're trying to do and um as is you know get the conversation stuff going and then you could have evaluation you could you know if you wanted to go from here you'd say Okay um evaluate the response do we want to perform some addition action you know and you could say if response text uh I don't know equals this then respond with 42 right um and so that would be a way like for example um uh this they would replace this you know I don't know whatever replace with 42 I use this kindy I do a lot of action handling and other things in here um to like determine if the agent should move to a space or wave or whatever kind of things we want be tools or or 3D actions or or saying something um but usually that like in a chatbot Loop I'll usually respond with an action it takes or respond to whatever it responded with with an additional action followup and that' be kind of basically all chat Bots and AI agents and stuff kind of have this sort of some core core Loop right now this doesn't have to be input this could just be like uh a timer like wait a second and then run this whole Loop and do something monologue to yourself perform an action uh and um or whatever but um but in this case we are have we do have this like chat bot kind of wait for message and respond

Channel: Moon Makes Magic

Views: 226

Keywords:

Id: CL8aQu2KHRs

Length: 144min 4sec (8644 seconds)

Published: Thu Mar 14 2024