Combine MULTIPLE LLMs to build an AI API! (super simple!!!) Langflow | LangChain | Groq | OpenAI

hey everyone in this video I'm going to show you how to make crazy Advanced chat Bots that not only use multiple llms they also scray websites and just your files and connect to databases so that you can make some of the most powerful chat Bots today all you will need to do is make an API cord with this tiny bit of code and get a text response back we are going to use a lang flow to drag and drop all the components we need such as this URL component to get all the text from a website or this file component to get all the data from a CSV file and connect them together to llms databases and much more in order to build our very own chat boot that will answer questions about anything we want for example I will be building a chatbook that will answer questions about my website Codi anal.com as well as the full STS of a course that I sell on there as the information of what is in each module is not readily available on the internet as well as published after opening our training cut off date we will be getting all the text from this site as well as feeding in CSV data I have locally on my machine that has information on each course module to train my Chapo up this will also ensure that my Chapo is always up toate with each site release we will then also be storing some of this information in our data Stacks Astro database that will allow us to store Vector embeddings so that we can carry out similarity searches more on Vector embeddings if you don't know what they are to come by the end you'll be be able to ask questions such as does this course teach object orientated programming and receive text responses back such as the code with annual forite developer course will teach you oop in several modules or something similar now this course is free and will always be free so all I ask of you in return is that you get the lro reaper a star to show your appreciation so let's go let's click on the link in the video description head over to the star once you are logged into GitHub and give it a click I will would really appreciate it as I know it would make the Lang flow team super happy and I've really enjoyed making this video with them okay so what are we waiting for let's do it okay so all I'm going to do is head over to the link now make sure I am signed in and give it a star and off we go let's spin up our Lang flow environment so let's do it first of a quick 60c overview of what we're going to be building before we do a real deep dive into every single thing so here is the entire flow of course you can't really see much but I'm going to zoom in out and talk you through it so first off these four components well what they're going to do is help us essentially get information from the code withth anna.com course which I have put into a CSV file here so in the CSV file you can see all the module names what's in the modules and of course the module number so we're going to take this information feed it in here vectorize it and then store it in our Astro DB database as vector embedding so we can do similarity searches against it so with this now done we can essentially build out our chat bot that will look through our whole database and bring back similar text to it so we can for example ask does your course teach anything about object orientated programming and then we can choose to return the five most similar items or the 10 most similar items if we want from this CSV file okay great so so that's what that's going to help us do next let's actually build out the chatbot and of course for a chatbot you need to have a text input and a text output as well so we're going to have a text input we're going to just type in text in here or you can use the playground or eventually we're actually going to use the API and use the JavaScript API so that we can actually use this in our projects we can connect this to any app we build okay we can essentially send text through here and receive text back after it's gone through this whole entire flow okay so we're putting in some text input once again creating embedding out of it searching our database passing the data storing all the chat memory that we've previously had and then creating a prompt that we then also pass back to open AI to create a readable answer but not only that we're also getting the whole URL of of code withth anal.com so everything here okay we're essentially kind of getting all the uh text from that site so that we can also pass it and pass it through into the prompt to give us more information about the code withth annual.com course okay so all the information that you see here will be used this was published pass the openi data cut off point so this is the freshest data and we're also using this data that is not anywhere online as well well so we're feeding in two different sources into open AI to really make our chat B powerful so I hope you're excited that there's a lot to learn okay so we're going to take things super slow let's do it okay so first off I'm just going to start off on VSS code I've already created a folder called Lang flow chatbot so that's all I have in here at the moment to get things going I'm going to have to first create a python environment and for this I'm going to press command shift p and then python create environment should show up so I'm just going to click that and we're going to create a virtual environment in the current workspace so just go ahead and click on that and then I'm just going to select this python interpreter right here as I believe it's the newest one so here we go this is now creating a python environment for me great so this is looking good so so now you should see this little thing show up here I'm just going to get up my terminal by pressing here and then we're going to run the following commands I'm going to do python mpip install Lang flow U just make sure to have python 3.10 version or above installed for this to work on your system so just go ahead and do that and wait for that to do its thing and then we're just going to run it so once this is done we will do that in the meantime if you want to of course once again check out all the documentation then it could be found here github.com langlow AI langlow so just head over over to here once again give it a St just like me if you'd like it okay that would really mean a lot to me okay uh please go ahead and do that uh this tutorial is of course free and all I'm asking for is this stuff so all the information on how to start this will be here so if you're watching this in the far future and something is outdated please refer to here and get the latest information of what you need in order to start this will be the next command we use in order to run it so I'm just going to go back here and check if that's finished and it is so I'm just going to clear that and do python M langlow run and hit enter if you new to python in general and especially in using it in vsod code the instruction on how to do it so getting started with python EVS code can also be found on this URL so code. visual studio.com docs pythonpython tutorial and it will essentially tell you the prerequisites that you need so as we know we need to have Python 3 VSS code and the vs code python extension so these are essentially the steps that we did we have the Mac OS version as well as other versions too so here we are installing python if you need so great so hopefully that makes sense hopefully I've given you all the tools to debug if you have not made it this far cool so let's check back on our project so this is the version of langlow that we are starting today is version 1.0.5 but of course if you're watching this in the future that version will have changed and amazing here it is so this should pop up for you automatically if it doesn't you will see a URL here just go to that same URL like I have okay and we're going to essentially create a new project so all I'm going to do is just select new project and we're going to start with a blank flow wonderful so let's do it okay so we have Lang flow set up the next thing we need to do is set up our database which for this tutorial is going to be data Stacks Astra and we also need to get our open AI key so for this I'm just going to head over to data Stacks so here we go and just go ahead and try for free I've already signed up so I'm just going to sign in I can sign in using my Google account so that's what I'm going to do I'm just going to select that one and once you are in your dashboard should look like this great this is looking cool so I'm just going to minimize that and we're going to create a database we need to select a serverless vector database as we going to be stor Vector embeddings so I'll talk you through Vector embeddings in a bit just select that one our database name well we can call it whatever we want I'm just going to call it code with Anna for the sake of this tutorial so that is my database name the provider is Amazon web services you can choose another one if you wish and I'm just going to choose a region great and then we're going to create a database so super simple that is really it so here is our database called code with Ania and then we are going to come back to this after in a bit when pending is active so that is one thing we have done the next thing we're going to do is get our open AI key so let's head over to open AI so here we are on open AI under products I'm just going to click on API login and this will essentially log me into my openai account okay and once again I'm just going to choose to log in with Google because I have already signed up and once I am on the open AI platform I'm going to select API so the API option and this will allow me to get my API key so here I can get my API keys I can create a new key and I'm just going to call this demo uh I do have a project attached to this already you might have to create one and I'm just going to create a secret key so copy that key somewhere safe because we're going to use it later okay so great that's all the prere it's done let's continue so now what we need to do is well first off our first mission is to essentially get the modules right the modules that make up the code withth annual.com course and I have stored them in a Google sheet I will share that with you in the video description so go ahead and use use that one if you want for demo purposes okay if you take the link I put in my video description it should take you here so here are my course modules that are in my course these are just fake okay this is 200 fake modules that I have in my course uh we have the title so for example one title of a module in my cours is what is the difference between compilation and interpretation we get an overview of it we also get the category it belongs to and then we also get the difficulty level so the first thing we're going to do is actually just download this so we're going to do file download and download it as a CSV file so go ahead and click that okay so that is now downloaded as you can see here so wonderful so now here the first thing we're going to do is just essentially get that file so we can work with it in the dashboard so all I'm going to do is just search in here and this is going to search all my components here I'm going to select file and just drag it in like so so this is just a generic file loader uh we can search for a file so I'm going to do that here is the file that we just downloaded so I'm just going to select it and open it up okay and that's it if we want to inspect at the moment nothing will happen because we need to build the component first and we can do that pressing this little button right here the green tick will appear knowing that we built this component correctly and now if we inspect it we can inspect the output so we have the file path and we have all the text of that CSV file which is kind of useless to us at the moment right because we want to essentially take this and put it in our data STX database as Vector embeddings so those are two steps we need to do in order to do that because this chunk of text is kind of useless to us now so I'm just going to close that right here here and let's continue the next thing we need to do is just get a text splitter so once again I'm just going to search for split text and I'm just going to drag and drop it here and then I'm going to get that output and just whack it in here you will see it's kind of color coordinated and if you're ever not sure about what could go here you will also have the available output components to your disposal so these are all the ones that you can essentially connect your data output too so that's really useful and same goes for the inputs this will tell you which modules can have outputs that will match the input right here okay great so we're feeding that output into here so we're feeding it in here and then I'm just going to keep the chunk overlap and chunk size of that text as it is and next we are going to also get the open Ai embeddings and just Whack It Down here now we know that we want to put this in our Astra database I'm just going to search for Astra DB and here it is and drag it in like so so once we do actually have this text all split up I'm just going to ingest that data but also vectorize it so I'm going to connect that one as well now in order to do this properly we of course need to put in our open AI API key for this little component to work and for us to be able to build it so I'm just going to go back here copy that again so copy your OPI key and you can just paste it in like so that's not going to be a problem okay you can view it or you can create a variable out of it so let's go ahead and do that I'm going to add a new variable let's call this open AI API key uh however you want to do it and I'm just going to insert that value in here and save the variable so now I could just select that and that variable is saved in case I need to use it again okay the model we're going to use is text embedding three small so you do have a drop down of models you can use as well so that is something to check out and now the Astro DB database well of course we need to be able to connect to it and for that we need to get the Astro DB application token the API endpoint and of course we also need to create a collection out of it so we can do that through this component so let's just say I want to call my collection modules right because essentially that's what we're going to store we're going to store the course modules and next let's actually connect to this database so for this I need the API endpoint so I'm going to copy the API endpoint let's go back here and once again maybe let's create a variable out of this so API endpoint Global variables add new variable data stacks and point inser the value so yours should also have this kind of structure save variable so now I can use the data Stacks endpoint and same for the application token so let's go back here let's generate a token and once again this will be unique so please keep it safe it should start off with Astra CS so I'm just going to copy that whole thing go back here and once again let's create a new variable I'm going to call this data Stacks token insert the value so yours should also look like this and save the variable so wonderful amazing so now what's going to happen is we're going to get the content of that CSV file vectorize it and store it in our database if I press this little button here so I'm going to press that you will see tick tick tick and tick hopefully when this is finished building okay and next I'm going to show you actually what a vector embedding looks like and how it works so if you inspect the chunks now you will see that from a whole bunch of text that we got in the first component this has now been split into chunks okay and then if we look back in here so I'm just going to minimize that and click on data Explorer you will see a collection indeed called modules and if you scroll down here Tada you will see that ch chunk of text for example how does a web browser render a web page and then you will see the vector okay that was created out of it so I'm just going to copy that for you to see you might need to refresh this page if it didn't show up for you automatically so this Vector I've just copied it and I'm just going to show you what this looks like maybe let's do it here just going to scroll down here just to show you if I paste it in it's essentially an array of lots and lots of numbers so these numbers I'm just going to show you exactly how big this is because it is extremely large okay all these numbers what they do is essentially give semantic meaning to the text that we saw here what I mean by semantic meaning is so let's break it down let's imagine that you have three words so dot dog and cat as a human you would most likely say that cat is more similar to dog right because they're both animals but a computer might look at these words and look at them lexicographically and decide that dot is in fact more similar to dog so how can we give words semantic meaning so that computers can essentially understand that cat and dog are more similar that is where Vector embeddings comes in and I have a whole course on this a Whole 30 minute course where I really deep dive into this but for this course just know that we can assign meaning to words with these num numers and the more similar the numbers to certain words the more similar computer can deduce that they are in meaning okay so again this whole array is super important and we are essentially going to use it to look in our database for words that are similar to each other right so I'm going to show you this in action in a bit let's actually now move on to building the chatbot that uses this data so I'm going to go back here we are now done with this and up here what I'm going to do is just select chat input so I'm just going to drag that over like so and we of course want to look in the Astra database right so once again the collection we want to search is the collection we just made called modules the application token well we can just get that from here and then also the API endpoint we can get from here and then we just need to search for that word now you would think that searching our database would work as easily right as us just searching for it in here however that is not correct because we can't take some text and compare it to the vector embeddings that we saw here right these are vectors you can only compare Vector to Vector so we need to get that text and turn it into you guess a vector embedding so I'm going to go ahead and get the open AI embedding just like so let's get our open AI API key and I'm also going to just connect it here here okay so now whatever we put in here is going to turn into a vector embedding and search our Astra database for words that are similar to it so let's see this in action now it is important to know that you can only compare Vector embedding against Vector embedding if both embeddings are created from the same llm which is why I'm using open AI right now so let's give this a spin right so we can type in something here so for example do you teach oop object orientated programming question mark and then I can essentially run this so I can run it here and this should tick here tick here and tick here and essentially this is what we are sending over we're just sending over the text we also have some extra information and then we can also see the results so we will see five items come back from our database with similarity scores that are high enough now we've limited this to four okay so here's the text describe the principles of objectoriented programming it's simply looking in our database for text that is similar to what we wrote here now if we want to get back more all I would have to do is simply select the component and all the components have this it's an advanced settings now the advanced settings will essentially allow me on this occasion so here are all the options that we have I can select how many items I want to return back to me so I can put in 10 for example I can also show this on my component if I wish and I'm just going to save those changes so here we go you will see that show up now number of results 10 that wasn't there before I've chosen to show that and now if I run this once more so I'm just going to do that 10 items 10 most simp similar items so 10 items with the highest similarity score to this piece of text should show up so if I look now in the search results right here we have 10 items okay great now we have these 10 items but this doesn't really answer our question of do you teach o op right so now we're going to use this data we have found data about it so we can assume that the course does teach about object orientated programming but now what we're going to do do is actually feed that data feed in those 10 items to an llm in order to get a humanik response so in order to do that we first need to pass the data because at the moment it looks like this right and we need to essentially turn it into text so I'm going to use parse data and just drag it over here and the search results I'm going to feed into Data just like that so I'm just going to move that up here and then we're going to to pass that into a prompt so let's create a prompt I'm just going to work that over here and move it like so so our prompt what we're going to do well let's just open this up I'm going to write some text of below is the conext and then we can create a variable using these kly braces and I'm going to do context like so uh and then I'm just going to do these three lines to split it out and I'm going to write given the context above answer the users question okay and then we're going to feed in the question so the question again I'm just going to create a variable using kyli brace's question and then we'll get an on so just like that that is my prompt so if I save this just remember that we created a variable called context and a variable called question check and save you will see that context and question have appeared as variables here that we can then feed in so what I'm going to do is after the data has been passed I'm going to go ahead and feed that in to be the context of the prompt that we are writing right so if I just go ahead and run on this one right here so I'm just going to click that play button okay and once that tick has appeared I'm going to inspect this and we have turned that table into just a bunch of text so those are our 10 items and we are feeding that into the context now we can of course once we get that prompt get an answer based on this for now I'm just going to use open AI so I'm just going to drag open a ey in here like so but then ler I'm going to show you how to replace this with a different LM so we can have multiple llms in this project for the input of this I'm just going to pass through the prompt message our open a key well we're going to select open a key so we are getting the prompt message and passing it through to the input and the prompt message essentially takes the context of the data we get back from Astro DB but of course we also need to pass through the question and that question is going to be the original question that I asked here so we're going to get the chat input and just drag that message into the question like so so as a refresher we're passing you the context and the question so that will be essentially replaced here and here okay and that whole piece of text will then passing through to open AI so if I now run this let's have a look at what this looks like and then we receive the text back yes we do teach objectoriented programming our curriculum covers the fundamental principes of op including encapsulation inheritance polymorphis as an abstraction and then some more text here so amazing we get a response we get a response essentially based on this course modules data that we fed in and then we used open AI to get a humanlike response but that's not all if we really want to build our our chort even more we can essentially get it to get all the T text from Cod withth anna.com so I'm just going to get this URL I'm going to copy it let's go back in here I'm going to find a component called URL I'm just going to drag it up here let's maybe drag it just there paste in the URL and of course we also need to pass this data so once again you know what to do we're going to get pass data because if we run this component as it is I'm just going to show you the output of this this this is great for debugging as I mentioned uh we can see it here we get text source title description we just want the text okay so if we pass that through into data and we select text then if we run this we should just get the text back and if we look in here that's what I have achieved so it's just the text from my website which gives information such as how many videos there are in the course and so on so that is something I fed in in so now I can use that data for example let's see if it picks up the fact that the course has 470 videos and above so let's get that text and let's feed it once again into the prompt so for that I'm actually going to adjust the template and say below is the website data about the course and then maybe let's call this website so just a variable called website make sure that says is below is the website data about the course and use that information again to feed into our llm so now if I go ahead and connect this so the text that we get back we're going to feed into this variable so that's our website text and let's go ahead and ask a different question now this time I'm actually going to to use the playground and we need to get the output chat output in order to show our text output in the playground and this is essentially what we're going to get when we make an API call to this so let's go ahead and just connect that text to here and now I'm just going to use the playground how big is this course for example and hit enter and hopefully we should to get a text response back that gives us information about how big it is okay the course offers over 70 hours of content including 470 videos group calls show and tells code playgrounds quizzes and 22 project so amazing this is looking cool some other things we can do is actually save the chat history that means that each question can be kind of asked leading on from the previous one so they don't have to be Standalone questions so I can lead on more from a question I asked previously so that's what you can do with memory so I'm going to go ahead and search for chat memory okay so this is essentially remembering every single previous message that we asked I'm just going to put that here maybe and then link that up okay because I want to get the messages and feed them into the prompt as well we want to get all the previous messages and feed them into the prompt history so let's get our chat memory and once again I'm going to edit the prompt I'm going to also just put the memory in like so so memory check and save and now memory will show up as a variable and I'm just going to connect to the chat memory super easy okay so now that will remember all the questions that we asked previously another thing we can do okay on the advanced settings other open AI component is streaming the messages so it looks like they being typed out okay we're going to stream them and for this we're just going to scroll down and on stream we're going to show this and also activate it and save the changes so stream is now on so wonderful let's try this again maybe let's ask about something else do you teach solid principles so let's go ahead and test out I'm going to do it on the playground okay and then I should receive a text output back and great we do teach solid principles and then I can even ask a question such as is this difficult or easy so we can ask that question too and it should response based on the chat memory that we fed in okay wonderful so now instead of using the playground okay so instead of typing out here and testing out we can do so from our actual apps that we build where it's a next JS app or a react app I'm going to use the JS API and just copy all of this code right here and then I can essentially make API calls to this okay to langlow and then get responses back to my app so powerful stuff happening right here okay just go ahead and take this text all you're going to have to do is replace the base URL and the API key but that is easy okay the base URL essentially can be found uh here so you can take it from the python API so that's all you're going to have to do that is your base URL and your API code well that's also easy under settings just go ahead and get your Lang flow API key add a new one I'm going to go with demo and create your secret API key so those are the two variables you need for this two work great now one other cool feature you can do uh there's a lot of stuff going on here is you can also group components together so you can for example I'm just going to press shift and select these four right here so just like that and group them okay so you can now rename this group whatever you wish I'm going to go ahead and select this and let's go Astra DB ingestion so these are the four components that deal with essentially ingesting my CSV file and turning into vector embeddings and you can also give a quick description here so create and store Vector embeddings from files of course you can write whatever you wish and you can also choose which one of these you want to hide and which one of these you want to show okay so at the moment all these are showing but I can I'm just going to show you go ahead and under settings just hide some of these so for example I can choose to hide the open AI API key and then also hide the API endpoint and then also hide the Astro DB application token and also hide the search input as we don't need that anymore however we should probably show the path of the file that we want to upload right because essentially all we have to do is select a file and that will be put into our Astro DP database as Vector embeddings so that is another cool thing you can do with here there is a lot more advanced stuff but is outside the scope of this tutorial okay I'd really strongly suggest you getting to gits with the basics before exploring any of the advanced stuff but there is a lot more to play around with so really the world is your oyster now in order to make our flow multimodal I'm just going to go ahead and use something called Gro grock's going allow us to use a bunch of models okay so I'm going to show you how to do this first off let's just search for Gro in our components drag it over here unlink the open AI component and link up our grock one same goes for the output and now we're just going to select the model we want I'm going to select llama and then paste in our grock API key which you can get from this URL right here okay so just go ahead and visit this URL and then simply create your own API key great so now I've replaced it I'm just going to delete that opening a component and let's go ahead and test this out on the playground to see it works please go ahead and do so okay so that's it I hope you've enjoyed this tutorial uh I loved it I hope you can build something cool and please let me know what you built on YouTube Twitter Instagram I would love to see what you've created with this super powerful tool thanks again

Channel: Code with Ania Kubów

Views: 71,106

Keywords:

Id: 5lFChDglhmI

Length: 36min 31sec (2191 seconds)

Published: Wed Jul 03 2024