Build your own custom LLM application with Bubble.io & Langchain (No Code & Beginner friendly)

what's going on everyone in this video we're going to be um querying and integrating our own Uh custom llm if you will we're essentially going to be using our own data that we upload so we can query it with something like gpt3 or gpt4 whatever model you want to utilize and we're going to be doing this actually with bubble and another kind of no code backend called flowwise this has been recommended by quite a bit of people there is a little bit of setup and configuration involved in doing this which we're actually going to look into but just to quickly show you guys a demo in this example we've up uploaded the Satoshi papers um for those of you that don't know this was essentially just released kind of anonymously in 2000 um eight if I'm not mistaken on you know kind of the um the idea of Bitcoin essentially so you can see that we've actually uploaded it here and if we come back to Bubble we can ask it what is this document about and who created it so let's go on when we click search that's going to query it and we should get the response below this documents about Bitcoin a peer-to-peer electronic cash system and is created by Satoshi Nakamoto so obviously guys um if this was just a language model not ingested with any other data it wouldn't know what it is if um when I'm referring to this so yeah let's actually get into creating this the first thing we're going to do is create the back end and we're going to be leveraging and utilizing a framework called Lang chain so for those of you that don't know about that essentially just think of it as kind of a tool a framework that solves a lot of the limitations that current language models have you can do a whole lot with it and it abstracts it it just makes it easier for us developers or even no code developers to build things you know build very powerful complicated more complex applications that are empowered by language models and I actually have a whole video dedicated to this I'm going to leave that kind of goes uh step by step of the kind of high level overview process but essentially this allows us to upload our own data whether it be CSV files you know PDF files whatever kind of file formats as well as transient data so for example connecting this to a database or to a you know company CRM you can do a whole lot but again in this kind of example where you're going to simply be doing it with PDF documents so um yeah I guess uh there's there's kind of I'll quickly kind of iterate through this but essentially there's two arms to this whole thing right the document ingestion and then the search query so basically when we upload a file the document ingestion um we're essentially we're we're uploading a file like this right this Bitcoin papers and although this isn't that long it's only nine pages um what we're basically doing is we're chunking it up so for example um you know this might be one chunk this might be another chunk and it's and when a you know when when a user asks a question it's going to select the relevant chunks out of this paper to use as context so for example if we ask something about um you know how proof of work works it's not going to utilize the whole PDF document it's going to utilize just a small section of it which I think is really um you know a really powerful kind of when you do this scale so enough talking you guys will kind of understand this process as we go through it a lot more but you're going to want to come to the flowwise GitHub repository and like I said guys this is a little bit of um can there's a little bit of configuration involved in doing this um you know it's pretty straightforward um if you guys follow this tutorial but essentially once you're on the repo you want to just Fork it make sure you guys don't just clone it you want to Fork it that way we can host it on our own server on our own back end that we can query with bubble so yeah once you guys have it forked you're going to have a um you're going to pull up the repo and again you can you can read the readme and for those of you that I don't know this is just kind of a set of instructions provided by the developers that built this but again we don't really need to know what's kind of going on behind all this um so really all we need to do is just deploy this so um you know we can obviously deploy this on our computer locally but if we want to access it whenever we want we would need to deploy it on a server so to do that we're going to use Google called render and I also set it up with versel if you guys are familiar with that as far as hosting but there was a bit of configuration that was needed to do that but renders pretty straightforward when you deploy it so again guys we're essentially just creating a something that's live on production so we can access it whenever and whenever so or whenever and wherever sorry so so yeah to do that you set you want to create a FL render account and then um if you guys just come back to your um your dashboard you want to come into new and then web service and then connect your GitHub repository and um from this you're going to want to essentially either you know because when we Fork this it's going to be on our account that's basically we're just kind of copying and pasting it into our account if you will so once that's fourth we should have access to it directly here so we can just click connect and then um everything oh as far as the run time we don't want to use Docker in this case we'll use node um just select node for the build command that looks all good there again you can follow the uh kind of the readme documentation as well but yeah we're going to select just the free plan for now obviously if you want to make this production level you can upgrade um to to have more capacity but once that's created it's going to take about 5-10 minutes to create but once it is I'm not going to do it because mine's already up probably more closer to 10 minutes now that I think about it but once it is we're going to have a URL provided by us by render that we're able to access and this essentially flowwise kind of a drag and drop back end of us back end as a service you know it's pretty straightforward other than just getting all of the necessary configuration set so let's create our chat flow to communicate with our PDF documents so the first thing we're going to want to do is come to the chat flows add a new one and um click this little plus icon here and select the for the document loaders again guys there's quite a bit this is again provided by Lane chains framework but you know this no code tool has made it very easy for us to implement this but um if we come into the we can we can select whatever file loader we want there's even web loaders such as tools with Cheerio which kind of you can simply like input a URL and it would scrape the site and then ingest that data but again we're just going to use a PDF file loader drag and drop it simply as that and you can kind of see the way that flowwise is set up it kind of accepts an input and has an output that you need to connect so this is where we're going to actually upload our document so in our case it's going to be the Satoshi papers at Bitcoin papers but we want to actually you know set it up to a text splitter so just click that little plus icon there and back to what I was saying I'll kind of walk you guys through the process but click the recursive character text splitter drop drag and drop it there so this is essentially kind of like we talked about we're going to be chunking all of that document data right it's you know in our case it's only nine pages but obviously if this is something like your company um you know data whether it's you know something that's internal or customer facing it's probably going to be a lot of pages and we obviously want to reference only the relevant data so we do have to chunk it and this is what makes it so scalable um so yeah essentially once we have that drag um and and drop connect connect it to um we can select the chunk size to what we want since um you know the the Satoshi since this you know what we're going to be uploading is only nine pages um I think a thousand is fine right here um obviously you may want you know you kind of have to play around with it um you know increase or decrease the chunk size and then the overlap um this is kind of just to you know if if um two chunks are kind of very similar we can um we can have a little bit of overlap between the two um we'll set that to 25 again you can kind of play around with it as you will uh but as far as the actual document once we have this PDF you know chunked and split we want to store it somewhere right where are we going to store it we're going to store it in a pine in a vector database now there are a lot of solutions if you just click the pine or if the you just click sorry you just click the plus icon there uh you're going to see if we come into the um where is it the uh Vector stores hidden below me here sorry um but you're gonna see we kind of have some options here we use uh we traditionally use super bass uh with this with storing our uh you know vectorized data but in our case we'll just use um the pine cone um upsert drag and drop that there and you can see that this kind of accepts two parameters the document which is right here and then also the embeddings and this embeddings is handled uh by open AI so we want to um come back here and drop down in the embeddings we're going to use the open AI embeddings model so let's just go ahead and drag that there so again if this is kind of too much information here all this really is doing is we're we're just uploading a document and we're making it readable for a computer to understand okay you know this is most similar with this and if we kind of come back to our example um we're essentially each one of these chunks were were creating it into a vector which is like I said just numbers that a computer can simply understand um and how does it understand it it does it with cosine similarity so again check out my video on that if you kind of want a high level uh overview of this as far as the concepts of it but once we have the data stored in Pine Cone think of this just as a database solution right once we have all of this um you know stored we can now reference this this our data in another chain so in our case we're going to um have if you guys come down to chains we're just going to do um I guess we can do retrieve or we can do it we'll do conversational retrieval QA chain which is pretty standard in my opinion again this just allows us our chat to be conversational so it can take in the previous context of the conversation um into context sorry so grab that icon here and then put it into the vector store retriever now we need an actual large language model to power all this so again this is something that you know you can you can plug in your own models um there's there's you know quite a a bit we can select from but um we're obviously going to use just the open AI model as you most of you guys are familiar with and um yeah we can just simply drag that and drop it there so now I mean this this allows us to this this is really the back end functionality that bubble is going to integrate with right so when we type in this query it's going to do all of the kind of um you know necessary work to find the relevant data in the document that we're going to upload and then from there you know use that as context and provide a response this is called a two-shot prompt two-shot prompt response if I'm not mistaken but um yeah that's kind of the bulk of it and really from here I guess before we actually can make any calls we do need to add our environment variables or all the authentications such as our open AI API key as well as our pine cone API Keys which is pretty straightforward obviously you guys know probably by now if you're watching this how to get your openai API key but I will walk through the pine cone solution here so if you guys come to Pinecone you want to create an account and uh you just want to if we come back to indexes you're going to want to create an index you can call it whatever you want we can call it you know no code um you know whatever you want to name it and then for the dimensions we're going to do what openai recommends for their embeddings which is 1536 different dimensions we'll use cosine similarity again that's recommended and then for the Pod type we can you can select whatever I would do P2 just because it has a lowest latency um you know it's quick responses so you create the index from there I already have mine created it's going to take about you know maybe a minute or two to initialize and be ready to you know upsert our data so if we come back to our flowwise our back end application we're going to want to add all of these configurations and if you guys can see obviously I've already added my open AI API Keys um so all we need is to add our environment variables for pine cone to get this thing working so for the index that's going to be the index name ours is called Bubble embeddings um call it whatever you want and then for the environment if you guys come back into um I guess just come back into the uh API keys and then in the environment it's going to be whatever region you're closest to and um add that environment let me make sure yeah make sure there's no white space there and then lastly the API key so just come here and copy that so if we Sorry if we come back add that and then oh obviously there is an optional namespace so this is kind of a way to kind of segment our data right so obviously if we were to build a more robust application that handled a lot of different users um you know we would obviously not want other users to access you know other users data and we don't have any authentication involved in this so again obviously that'd be a big security risk there it'd be relatively easy to access other users data which can be very sensitive but this is kind of a way just think of this kind of as a way to organize our data so for example you could have a namespace for each user that signs up with your application and only that user can reference this specific namespace now in our case we'll just call it um you know whatever we want we'll just call it Satoshi papers for now and then yeah once you have that you're basically pretty much set you want to go ahead and save this we'll just call it convo q q a chain save that and then um it may take um a little bit to upload so we can just simply um upload our we can simply upload our document sorry make sure that you guys upload your document and then click save and then if we actually come in click this chat icon here let me clear my data we can say what is this document um about and if we click that it may take a little bit to initialize I think this is where it actually ingests kind of follows this whole workflow when we actually uh query it um so we can see this document is about proposed solution to double spending um you know it gives us the response that we're obviously looking for now this is cool right obviously you know we have a little chat bot application but you know we want to kind of combine this with the power of bubble right but with bubble um you know you may have your own already existing application on there whether it's a CRM or whether it's a tool internal to your team you want to integrate this with bubble you know use combine this with bubbles you know functionality make it very make a more powerful and robust application so to do that we need to um if you guys have this or you guys are going to see this little kind of code icon here this this is going to give us the API that we're going to use with bubble to communicate with our back end and again apis are just um kind as I just mentioned they're just tools to allow kind of two separate applications to communicate with one another um so you know obviously as we see here all the kind of functionalities handled in our on our server that we um you know that we uploaded on render so if we come into our curl you're going to see or really just any of these end points you're going to see the end point it's generated for us and again this is kind of the name of um or repo again this is unique to my account and you can see on the end here it's given us the um you know the um I guess chat bot ID so you know like I said if this was a more robust application and you had a lot of different users for instance each user could reference you know different IDs based on um you know what what they want to utilize so um you want to copy this whole curl this oh end point sorry and then come back into bubble and if you guys go into the plugins you want to install the API connector um it's going to be probably the first one you see here but if you guys um once once that's installed you're going to want to add a new API and then um we don't need to access any shared headers here but um expand that and then we can paste that same URL that flowwise provided Us in here and then make sure you guys select this as an action too if you don't you're not going to be able to access it within bubble which is kind of annoying and then for the content type make sure you guys have application Json just a formatting option very um you know across all apis you'll see and then you know you can select this as private obviously because we won't need to access anything but um one thing oh and make sure you guys set the data type to text I think by default it's going to be Json format but kind of from here we can actually just query we can essentially do what we did in flowwise's kind of nice little chat bot UI we can do it in bubble just to test that hey um you know we're making the connection and it's working so if we come into the Json body here we can you know either hard code something in there but we obviously want this dynamically displayed so we'll have the input here is the key and then the value so we can for instance you know quickly query this and I think this might have been actually my old kind of test endpoint that I did so let me copy this new one and then come back into bubble and then paste that in so in order to use it in our workflows we do want to initialize it so click this reinitialize call and then we should get the response yes so we said who created bitcoin is going to say Satoshi Nakamoto which no one actually knows who that is but you can see obviously it provides us a response there so now we know that our bubble application is you know correctly communicating with our backend that we just created and once we have this guys the rest is pretty straightforward now that we can access this in our application in our workflows wherever we want so um obviously in the design as you guys saw this very very simple kind of input search query um application that I've developed obviously you'd want to you know whatever you fit this to your use case your application um whatever it may be but um if we just click on the search button here and view the workflow search button you can see really we're just it's only just one step involved and I'm not sure if you guys have seen my other video of this of the I'm doing this without you know a back end or another framework you know you would have to essentially have all of this logic this functionality in bubble which would just be a pain in the ass to do so again you know rather than obviously hard coding what we want to respond with we would put the value of the input which is whatever the user would type in here and then from that we would just simply set the state of the response um so if we just click this here we can see that we've created a custom State completion that's a Text data type and then you know whatever response it gets back it's going to set it to that so we come back to our application we can say please explain proof of work to me and when we click search it's going to hit that endpoint to our back end where all of our logic is handled such as the querying and um you know doing a similarity search on our data stored in our pine cone index and if we come back you can see we'll get a response um proof of work is used to implement a distributed timestamp server yada yada you guys get the rest so yeah you can see now how easy it is to do all this with a framework like Lane chain and a back-end framework like this now obviously there was a bit of um you know setup and con configuration involved and uh you know my team were actually developing a tool to you know simply plug and play tool that you can just sign up with and you know add your data you don't have to do any of this configuration here and we'll actually have it as workflows as well so you won't even need to deploy it and then you know set up all the endpoints you can simply have it as a workflow if you guys are interested in that and this will actually handle authentication as well so you can make it very robust for whatever your use case may be so you know obviously you know if you have a lot of users we can now segment the data kind of as we talked about with the different namespaces all this kind of comes ready outside the box so if you guys are interested in that I'm going to leave a type form down below this will be a paid solution but for the first 100 users we're going to make this uh 50 off for kind of the early birds and it's going to be a 60-day money-back guarantee so if you guys are just interested in that leave your email there and we'll add you to the list but yeah guys I hope you enjoyed this and um yeah I I hope to keep continue making these Style videos maybe adding more agent-based solutions I can also kind of talk about our work with our clients the use cases that we're seeing with what's working and what's not in in production so yeah guys in the comments let me know any questions you may have I'm going to try and answer all of them to the best of my ability so yeah definitely uh I hope you enjoyed this and if you guys could like And subscribe that I'd appreciate that a lot I'd keep making these videos so thank you guys

Channel: Cerum AI

Views: 6,859

Keywords:

Id: O7NhQGu1m6c

Length: 25min 32sec (1532 seconds)

Published: Sun May 14 2023