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

What's going on with everyone in this video? Let's consult and integrate our own personalized llm. So to speak, we're basically going to use our own data that we uploaded so we can query it with something like gpt3 or gpt4. whatever model you want to use and we're going to do this actually with

bubble

and another type of

code

less backend called flowwise, this has been recommended by quite a few people, there's a bit of setup and configuration involved to do this. which we're actually going to look into, but just to quickly show you a demo in this example, we've uploaded the Satoshi docs, um for those of you who don't know, this was essentially published anonymously in 2000 um. eight, if I'm not mistaken, you know, um, the idea of ​​Bitcoin essentially, so you can see we've actually uploaded it here and if we go back to Bubble we can ask him what this document is about and who created it.

So let's go ahead when we click on Search, which will query it and we should get the answer below this document about Bitcoin, a peer-to-peer electronic cash system, created by Satoshi Nakamoto, so obviously guys, if this was just a language. model not ingested with any other data, I wouldn't know what it is if um, when I mean this, yeah, let's start creating this, the first thing we're going to do is create the backend and we're We're going to leverage and use a framework called Lang chain , so for those of you who don't know, just think of it as a kind of tool, a framework that solves a lot of the limitations that current language models have. a lot with it and abstracts it, it just makes it easier for us developers or even non-

code

developers to create things that you already know, create very powerful, complicated and more complex

application

s that are powered by language models and in fact, I have a whole video dedicated to this.

I'm going to let it go step by step of the high level overview type of process, but essentially this allows us to upload our own data, whether it's CSV files, you know, PDF files, any type of file format, as well as transient . data, for example, connecting this to a database or a company CRM that you know, you can do a lot of things, but again, in this kind of example, you're just going to do it with PDF documents, so, yeah, I guess there's I'll repeat it quickly, but there are essentially two arms to all of this: the document ingest and then the search query, so basically, when we upload a file, the document ingest, um, essentially we're, we're. upload a file like this, these Bitcoin documents and even though it's not that long, it's only nine pages, what we're basically doing is breaking it up into chunks, so for example, you know this could be a chunk, this could be other. snippet and is and when you know when a user asks a question, it will select the relevant snippets from this document to use as context, for example, if we ask something about, do you know how proof of work works, it won't. use the entire PDF document, you will only use a small section of it, which I think is really powerful when you do this scale, so enough talking, you guys will understand this process as we go. a lot more, but you're going to want to come to the fluid GitHub repository and like I said, guys, this is a little bit, can there be a little bit of configuration involved in doing this, you know, it's pretty simple, if you follow me. this tutorial, but essentially once it's in the repository, you just want to fork it, make sure you don't clone it, you want to fork it that way, we can host it on our own server on our own backend.

bubble

query so yeah once they've forked it they'll have a um open the repository and again they'll be able to read the readme file and for those of you who don't know this is just kind of a set of instructions provided by the developers who created this, but again, we don't really need to know what's going on behind all of this, so really all we need to do is implement this so you know we can.

Obviously deploy this to our computer locally, but if we want to access it whenever we want, we'll need to deploy it to a server, so to do that we'll use Google called render and I also set it up with versel if you guys. We're familiar with that as far as hosting goes, but it took a little bit of setup to do it, but it becomes pretty simple when you deploy it, so again guys, we're basically creating something that's live in production so we can access it. him whenever. and whenever or whenever and wherever, I'm sorry, so yeah, to do that, you set up, you want to create a FL processing account and then, um, if you just go back to

your

um,

your

dashboard, you want enter a new service and then web and then. plug in your GitHub repository and, um, from this, you'll essentially want to do, you know, because when we fork this will be in our account, that's basically, we'll just copy and paste it into our account, so to speak. once it's the fourth one, we should have access to it directly here so we can just click connect and then, um, everything, oh, as for the runtime, we don't want to use docker, in this case we'll use node, just select the node for the

build

command that looks good there again you can also follow the readme type of documentation but yeah we are going to select just the free plan for now obviously if you want to reach this production level you can upgrade to have it. more capacity but once it's created it will take about 5-10 minutes to create but once it is I won't because mine is already done probably closer to 10 minutes now that I think about it but once that we are.

We're going to have a URL provided by us through render that we can access and this kind of flow essentially drag and drop back as a service, you know it's pretty simple other than just getting all 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 go to the chat flows, add a new one and click on this little plus icon here and select for the Document Uploaders again, guys , there's quite a bit, this again is provided by the Lane Chains framework, but you know this no-code tool has made it very easy for us to implement this, but if we go into it, we can select any file uploader that we want.

There are even web loaders, like tools with Cheerio, where you can just enter a URL and scrape the site and then ingest that data, but again we'll use a PDF file uploader, drag and drop it just like that. and you can see the way flowwise is set up, it accepts an input and it has an output that you need to connect, so this is where we are going to load our document, so in our case it will be the Satoshi papers in Bitcoin papers, but we actually want set it up as a text divider, so just click on that little plus icon and go back to what you were saying.

I'll walk you through the process, but click on the recursive character. text splitter, drop, drag and drop there, so this is essentially like what we talked about, we're going to split up all the data in the document, you know, in our case it's only nine pages, but obviously if it's something like your company. Um, you know the data, whether you know something internal or

custom

er facing, there will probably be many pages and obviously we want to reference only the relevant data, so we have to chunk it and this is what makes it so scalable. Yeah, essentially, once we have that drag and drop thing, plug it in, we can select the chunk size that we want, since you know Satoshi, since you know what we're going to load is just nine pages.

I think thousand is fine here, obviously, you might want to know that you have to play with that, you know, increase or decrease the fragment size and then the overlay, this is just so you know if, if, two. the fragments are very similar, we may have a little bit of overlap between the two, we'll set it to 25 again, you can play with it as you will, but as for the actual document once you have this PDF, you know, fragmented and split, we want to store it somewhere right where we are going to store it, we are going to store it in a pine tree in a vector database.

Now there are a lot of solutions if you just click on the pine tree or If you just click, sorry, just click on the plus icon there, uh, you'll see if we go into the um, where are the vector stores hidden under me here ? Sorry, but you'll see we have some. options here we use uh traditionally we use super bass uh with this to store our uh, you know, vectorized data, but in our case we'll just use the pineapple, um upsert, drag and drop that there and you can see that this kind of accept two parameters , the document that is here and then also the embeds and these embeds are handled by open AI, so we want to come back here and pull down the embeds.

We're going to use the open AI embedding model, so just Go ahead and drag it there again, if there's too much information here, all it really does is we're just uploading a document and making it readable for a computer to understand, okay , you know, this is It's more similar with this and if we go back to our example, essentially we are each of these fragments we create them in a vector that is, like I said, just numbers that a computer can just understand and how it understands them. It does this with cosine similarity, so watch my video again if you want a high-level overview of this as far as concepts go, but once we have the data stored in Pine Cone, think of this as just a baseline solution. of data, once we have all of this stored, we can now reference this our data in another string, so in our case we're going to have, if you guys go down to strings, we're just going to do um.

I guess we can recover or we can do it, we'll do a conversational recovery QA chain, which is pretty standard in my opinion again, this just allows us to make our chat conversational so it can take the previous context of the conversation, um, in context. Sorry, grab that icon here and then put it in the vector store retriever. Now we need a real big language model to drive all of this, so again, this is something that you know you can plug into your own models. a little bit that we can select from, but obviously we're going to use just the open AI model that most of you are familiar with and, yeah, we can just drag and drop it in there, so now I want to say that this allows us This is actually the backend functionality that Bubble will integrate with, so when we write this query, it will do all the kind of work necessary to find the relevant data in the document that we are.

I'm going to load and then from there, you know, use that as context and provide a response. This is called two-shot rapid response, two-shot rapid response, if I'm not mistaken, but yeah, that's most of it and really from here. I guess before we can make any calls, we need to add our environment variables or all the authentications, like our open AI API key as well as our pineapple API keys, which is pretty simple, obviously, you probably already know this. I'm looking at this about how to get your API key from openai, but I'll explain the pineapple solution here, so if you come to Pinecone you want to create an account and, uh, you just want to do it, if we go back to the indexes, you go to If you want to create an index, you can call it whatever you want, we can call it, you don't know, there's no code, you know whatever you want to name it and then for the dimensions, we'll do what Openai recommends for their embeddings, which are 1536 different. dimensions we'll use cosine similarity again, that's what's recommended and then for the Pod type, we can select what I would do P2 just because it has the lowest latency, you know, they're fast responses, so you

build

the index from there .

I have mine. created, it will take about a minute or two to initialize and be ready to update our data, so if we go back to our backend

application

, we're going to want to add all of these settings and if you guys can see, obviously, I've already added my keys API Open APIs, so all we need is to add our environment variables for pine cone for this to work, so for the index which will be the name of the index, ours is called Bubble Embeddings. Call it whatever you want and then for the environment, if you go back to um, I guess just go back to the API keys and then in the environment it will be the region that you are closest to and add that environment.

I make sure, yeah, there's no whitespace in there and lastly the API key, so just come over here and copy it. So if we're sorry, we go back and add that and then, oh, obviously, there's an optional namespace, so this is kind of the way. to segment our data correctly, so obviously, ifWe would have to create a more robust application that would handle many different users, you know, obviously we wouldn't want other users accessing other users' data and we don't have any authentication. involved in this, so obviously, that would be a huge security risk, it would be relatively easy to access other users' data, which may be very sensitive. but this is kind of a way, just think about this way of organizing our data , so for example you could have a namespace for each user who signs up to 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 call it Satoshi documents from time to time, yeah, once you have it, you're basically done, you want to go ahead and save this, we'll just call it. convo q q a string save that and then it may take a little while to load so we can just upload our document sorry make sure you guys upload your document and then click save and then if we actually come.

By clicking on this chat icon here, let me clear my data, we can tell what this document is about and if we click on it, it may take a little while to initialize. I think this is where it really ingests, it follows this whole workflow when you actually uh, check it out so we can see that this document is about the proposed solution to doubling spend. um you know, it gives us the answer that we're obviously looking for now, this is great, right, obviously, you know we have a little chatbot app, but you know. We want to combine this with the power of the bubble, but with the bubble you know that you can have your own application already existing, whether it's a CRM or an internal tool from your team.

You want to integrate this with the bubble. you know, use, combine this with bubbles, you know, the functionality makes it very powerful and robust, so to do that we need um, if you guys have this or you're going to see this little code icon here, this is going to give us the API. which we are going to use with bubble to communicate with our backend and again the APIs are just nice as I just mentioned they are just tools to allow two separate applications to communicate with each other so Obviously as we see here the whole kind of functionalities handled on our server that, um, you know we load into render, so if we go into our curl, you'll see any of these endpoints.

We'll see the endpoint that's generated for us and again, this is kind of the um or repository name again, this is unique to my account and you can see at the end here that it's given us the um, you know, um, I guess. Chatbot ID so you know, like I said, if this was a more robust application and you had a lot of different users, for example, each user could reference different IDs based on, you know what they want to use, so, you want to copy this whole loop, oh full stop, sorry and then go back to the bubble and if you go into the plugins that you want to install the API connector, it's probably going to be the first one you see here, but if you go in once, that's installed, you'll want to add a new API and then, we don't need to access any shared header here, but expand that and then we can paste the same URL that you gave us here and then make sure that you guys select this as an action as well, if you don't, you won't be able to access him inside the bubble, which is a little annoying and then for the content type, make sure you have the Json application, just a format option, very, you know. in all the APIs you'll see and then you know you can select this as private, obviously because we won't need to access anything except one thing, oh, and make sure you set the data type to text.

I think by default it's going to be Json format, but from here we can just query, essentially we can do what we did in the Flowwise chatbot UI, we can do it in a bubble just to test that, hey ya you know, we're making the connection and it's working, so if we enter the Json body here, we can know to encode something there, but obviously we want this to be displayed dynamically, so we'll have the input here is the key and then the value so that we can, for example, know. check this out quickly and I think this might have actually been my old kind of test endpoint that I made, so let me copy this new one and then go back to the bubble and then paste it to use it in our workflows that we want. to initialize it click on this reset call and then we should get the answer yes so we said who created bitcoin is going to say Satoshi Nakamoto which no one actually knows who he is but you can see obviously he provides us with an answer there, so now Know that our bubble app is communicating correctly with our backend that we just created and once we have this the rest is pretty straight forward now we can access this in our app in our workflows wherever we want so obviously in the design as you guys saw this very, very simple type of input search query, an application that I developed, obviously you would want to know how this fits into your use case, your application, whatever, but if we just do click search button here and see the workflow search button, you can actually see that it's just one step involved and I'm not sure if you guys have seen my other video on this about what I'm doing without you knowing back- end or another framework, you know you would essentially have to have all this logic, this functionality bubbled up, which would be a pain to do again, you know, instead of obviously coding what we want to respond with, we would put the value of the input , which is what the user would type here and then from there we would simply set the state of the response.

So if we just click here, we can see that we've created a

custom

status completion which is a Text Data Type and then you know that any response that I get is going to be set up like this so that we go back to our application and we can say, please, explain the proof of work to me and when we click search, it will come to that endpoint on our back. ends where all of our logic is handled, like the query and, you know, doing a similarity search on our data stored in our pineapple index and if we go back, you can see we'll get a response.

Proof of work is used to implement a distributed timestamp server yada yada you guys get the rest so yeah now you can see how easy it is to do all this with a framework like Lane chain and a backend framework like this one now, obviously, there was a little bit of um, you know? configuration and configuration involved and, you know, my team was actually developing a tool, you know, just a plug and play tool that you can sign up with and you know, add your data, you don't have to do any of this configuration here and De In fact, we will also have it as workflows, so you won't even need to deploy it and then configure all the endpoints.

They can just have it as a workflow if they're interested in that and this will actually handle the authentication. Also, you can make it very robust for whatever your use case is, so you know, obviously, if you have a lot of users, now we can segment the data like we talked about with the different namespaces, all of this comes. ready out of the box so if you guys are interested in that I will leave a type form below this will be a paid solution but for the first 100 users we will do this uh 50 off for the first birds and there will be a guarantee 60 day money back so if you guys are interested in that leave your email there and we'll add you to the list but yeah guys I hope you enjoyed this and yeah I hope Keep making these videos of style, maybe they'll add more agent-based solutions.

I can also talk about our work with our customers, the use cases that we're seeing with what works and what doesn't in production, so yeah guys, in the comments, let me. I know any questions you may have. I'm going to try to answer them all as best I can, so yes, definitely. I hope you enjoyed this and if you like it and subscribe I would really appreciate it. I will continue making these videos so thanks guys.