Build a Chat with Document SaaS in under an hour completely No-Code! Using Bubble, Flowise, & Stripe

hey folks so many of you have asked if it's possible to create a chat with PDF application using complete no code framework so here we go I'm announcing a bubble based template called Lanas where you can take the template and deploy it as a SAS application in under an hour it comes with pre-configure drought to talk to flow wise which is a no code L chain tool it also comes with routes to communicate with strip for payments also it has routes configured to summarize a document so in essence once you deploy this template users can chat with PDF chat with knowledge bases which has multiple documents in them and also they can summarize documents using coher API it also has integration with zip memory store to keep track of the conversation and memory of the chat in the next few minutes I'm going to walk you through the steps of setting up the template setting up flow wise and setting up the stripe products so that you can combine all of that bring them together in this template and deploy your SAS application so let's get started so first thing I would like to show is the functionality of this template so this is the landing page you can come in make changes you can add elements so if You' used bubble before or have built applications on Bubble then you know this is quite easy you can pretty much modify any aspect of this landing page now second is in the pricing section there are multiple plans available so users can subscribe based on monthly or yearly plans and all of these buttons are configured so that they take you to the respective plans now if the user is not signed up or is not signed in then this dialogue box shows up where they can sign in sign up and if they are then they can directly go to the plan now next is the app section of course this is where all the magic happens and first thing is again as mentioned user needs to sign in or sign out and once they do that then they will be taken to this default page which is chatbots so the template is divided into three sections one is chatbot which is chatting with a single document and the way users can create a new chatbot is by uploading any particular document they have there are multiple formats available right now as is in this template so users can add name description any initial question they might have about the document and then upload that document and once they do that then they'll see that the chatbot is going to be available in this section and if the chat bot was created using a PDF you'll see that there will be a preview for the PDF also same thing for the websites so if a web page was used to ask questions about then you'll see a preview this is totally up to you as a developer if you like to use the preview option or not uh regardless the chat option to chat with the document that is used to train data is going to be available now it also comes with the option to delete this document this will delete the document from your app app as well as from the embeddings and we'll talk about that in a minute there's also the option to create a knowledge base which has multiple documents together so in this case I have uploaded documents I have uploaded some web pages and there's also an option to add more of these so you can upload files and websites together all of the document formats those were mentioned before are also available here here to be upsert uploaded and also together with the websites and another thing that is available in this template is a summarizer this is again something if you'd like to keep the section you could or you could remove that essentially it takes a document and it asks a user to generate summary of that document you can imagine a document maybe you know a few hundred Pages you can generate a summary of that it could be in a paragraph our bullet format and once that is generated then it will be available for users to read through the summary and this is using coher summarizer endp point now a few additional things is that users can have their profile settings available here so they can go into their account make a few changes they can also go to payments and look at their current subscription in stripe and then they could also manage their subscription to either upgrade or downgrade or cancel as needed now once you have this template there are two major areas in terms of setting the template up the first one is what happens when a user uploads a document the workflow to go from uploading the document to chatting with the document and The major portion of this workflow flow involves flow wise which is a no code Lang chain tool and I have made a few different videos on how to use flow wise there are many different ways you can install flow wise and something that I've shown previously is using render and Railway so feel free to go to the doc section of flow wise and follow along the tutorial mention to get the render base deployment up that's what I have used in this case just make sure that you use an instance that does not delete your flow there is some documentation at the bottom which talks about persistent disc and this is something that you definitely need to make sure that your flows are not deleted so once you install flow wise you will end up at a screen like this where you will have blank nothing over here in case you have never made a flow you can add new flow or you can go to the marketplace to bring over some of the available chat flows from here now something that I have used for the template is the upserting of document this is where user can upload a document it goes through a few steps where it first takes the document be PDF or text file it chunks it into smaller size and then once the chunks are available as text it converts that into numbers vectors and saves it into a vector database and then we can chat with that document so it's as simple as that and this is the template we are going to use as well there is another template available which is for the loading of document so once the document is already uploaded and upsert it into the vector database now you can provide the same information of where it is and then start chatting with the document and my recommendation is to watch one of the other videos where we go in depth of what is happening with upserting and loading of document in this video will keep that minimal now what I've done is using the template mentioned before this is pretty much same the only thing I changed is I used coheres embedding model CU I wanted to use a multilingual embedding option now with this it allows for users to upload documents in over 100 languages so that is quite beneficial and then of course everything else is similar I use pine con Vector database one could use any other provider and you can go through the list available here for the document loaders to change that instead of PDF to any other document loader whichever option you'd like for your users to have uh for the vector stores there is that option as well you can explore through any of the provider all of those work pretty similar now what I've done is for PDF I kept the PDF blog for web based upload I use used a web scraper and for that a different type of splitter and again another one for text and Json and also for docx so the key information that we'll need from here into the langas template is that we will go to any of these links for curl JavaScript python you'll see that there is this link available where we can send data to flow wise from and this is exactly what we'll copy and within the API connector we'll go to the route or document that you would like to modify so in case if I'm using the web document I'm just going to copy that route over here now you'll notice that if it is the web API then there are a few parameters here the body type is Json and there is some Json avail ailable and if it is a document then the body type is form data and there are a few fields that are configured here if you plan to use only these apis then you just need to modify the link and that should be it just make sure all of these correspond to the right flow wise chat flow so that the parameters that we're going to be using match with the API parameters that we're going to be calling so that pretty much takes care of the obser of document now feel free to watch some other videos that I've made about how you can set up pine cone or coher embeddings and different uh providers for your large language model now the second flow that is of importance is the loading of document now as I have shown previously that you can take the marketplace template and pretty much in uh here I changed to coher embedding since I want to use the multilingual model and then everything else is similar the only change is that I added a Zep memory store the uh reason for that is there is a built-in memory in this node but I would like for it to be in external format so that I have memory saved for each user separately and Zep is something quite easy to install and run the way you can do that if you were to search for Zep memory store there is quite some documentation available the setup is quite fast so I would highly recommend for you to use one of these providers which is easy to install and deploy and use and in this I am using render option again because I already have a render account you can click on this link and it will take you to the setup you basically need to give a name and then create resources it automatically does the creation of resources for you since that is configured in that button and then you'll notice that you will have a few of these Zep services in your account the key information you're going to need is is this web service that is available from Zep you will need to copy this URL now there is a way that you can add authentication to the server so that it's not open to the public please follow along the steps mention here to get that authentication set up now once you have that URL you can copy that over to our loading template and basically provide it over here as the URL and other than that we are pretty much set we will take this URL available from this load template and then we'll bring that over to our load document section and the URL in here and that takes care of connecting with flow wise with all of these document formats now as you can imagine if you were to add another type of document you will add that particular upsert flow in flow wise and also you will add the link associated with that particular API call once you have done that you'll notice that in the workflow there are a few different items those are something that might need your attention so the one in green are something that you can go and have a look at it and see if those are the options that you would like to provide to your user now there are some which are in s color these are the one you might want to change in my case I have these document formats available and the web page based absortion available you might want to add more if you'd like to provide that option so you just copy paste any of these the way these are working is that it triggers a custom flow and this custom flow at the bottom you'll see that it calls the flow wise API creates a new message so if you have something else if it is let's say for example other than CSV format then you will call that particular API now in this case all of these common formats are available and already set so you don't necessarily have to change anything here now similarly the knowledge base option is also set up which calls backend API and if you are a bubble developer then you know there is that option to configure backend API and in here there are a few different option first thing for creating knowledge base it goes through the list of files and it detects the right format of the file and then whichever format it is then it calls the corresponding upsert API and all of these are available and configured for you so you don't necessarily have to change anything now some users might want to change the metadata then they can come in and change that but if you'd like for it to leave it as is then all of those are configured for you now again it's also up to you if you'd like to keep the summary section or not if you do want to keep the summary section then you'll notice that there are two API calls those are made one API call is to unstructured IO which is a pro provder to extract text so if you were to search for unstructured iio then you'll notice that they have this API section and you can pretty much apply for the API key once you have the API key you can add that to the unstructured API section and modify your key other than that everything else should be preconfigured and then the second step that happens in generating summary is once the text is available to us then that is sent over to coh here to summarize now same thing for coh here you'll notice that there is an endpoint setup foro here that you will have to modify and use your own API key in that case now with that all of your configuration of flow wise is taken care in addition we talked about the summarization which is also taken care if you would like to use the formats those are available here now it's all preconfigured for you you don't have to necessarily modify but if you'd like to add additional document formats then you'll have to create a custom workflow here and then just add it to one of these route so if you're creating Chad bot then you just add that trigger here you can just copy any of these and then paste and modify the elements as needed now the second big portion after you set flow wise is the stripe now if you are new to stripe then you probably have to create your store and once you do that they'll ask for some tax documentation and once all of that is taken care now you'll have an active store that you can create products now once you create a stripe account then first thing you'll do is you'll take the API Keys uh this is something that you'll get from test mode and the live mode and then you take the publishable key secret key and then bring that over to the bubble application where if you were to go to the plugins and in the stripe section you will add those values here as live secret live publishable and then same thing with the development versions and in here what I've done is I created a few different products and the way you can do that is you click on ADD product you can name the product give some description if you like and now there are different models available I've used standard pricing and gave it some sort of price and recurring monthly basis I added another price here which is on a yearly basis and gave it another price for that and with that I have created these three plans now it's totally up to you how many plans you'd like to add just to give you an idea in the entry plan I said that there is going to be something $10 per month and there's something which is $100 per year so there's a monthly plan and a yearly plan now the key thing here is this API ID and this is what we will take over to our application now in our application in the data and app data there is an option called plans and in here you will have to manually add these PL plans so you will make a new entry and in here you will add the live API ID and test API ID those are available for this plan so in here if the test mode is off these are the live price ID and then if the test mode is on then you will have your test IDs that you can take those over so that that's exactly what I've provided here you can keep the same plan names if you like or you can change this the way you can change that is within the option sets there is something called plan names and I have given here some of these plan names you can add more plans or modify any of these and then you can select that particular option in here so with that now you will have a bunch of plans here with their test API ID and their live API ID this is something that we'll be utilizing in the next few steps so the main place where all of these are going to be utilized is in the pricing section and here there are a few elements those will be using that pricing ID first thing is based on what you have set up the names you can modify these names of the plans and also the pricing so if you were to look at the hidea bles then you'll see that there is the option to subscribe to each of these plans so this is something that you will have to modify as the workflow where all of these take them so if it is the initial entry your basic plan and if is the monthly option then you might want to go in and modify the workflow and once you do that then you'll see that there is a workflow Associated all of these are also marked to make it easy as what you need to change now in here once the Subscribe option is clicked then there are a few workflow items those are happening one is that you need to modify this plan to point to something that you have as your entry plan or any plan name that you have given so you notice that there is for monthly and for yearly so you'll have to select the right plan for that particular button now second is for the user points there are monthly points available these are chat points or chat credits so there are 50 in this case that I'm given to any entry level user and then the use points are zero so they will keep adding as the chat with any of the documents and in my case I have given the chatbot credits as five for the entry user and knowledge-based credits are true you can modify this as needed or as you decide for your app now once you have given these credits to The users the next step is that in the trigger complete section it is triggering a custom workflow which which is at the bottom here and the key information we're providing here is the amount that is going to be added to the billing history now this is something that is available in the template that it keeps the billing history you don't necessarily have to keep that since stripe also has the customer portal which could be utilized for billing history by the users but if you do decide to use the billing history available in this template then you will have to modify this for each of your plans and once you have modified this amount that's pretty much it now I've also given free credits to people who sign up so that is with the sign up button if they were to click sign up then we give them free knowledge base and chat Bots and monthly points to chat this is totally up to you if you'd like to give your users free credits or not or how many you would like to give now the same thing is also in the app section where if the user were to sign up then you'll see exactly same thing there are two different places users can sign up from you just need to make sure both of the points are matching now with that going back to the pricing section again you might want to make sure that in design you are changing all of these elements so that they reflect the pricing plan that you'd like to add there is the monthly pricing and then you'll notice that if you were to click on the pricing there's a condition which checks if the yearly is selected then you can give the yearly pricing over there and this is also the case for all of these monthly plans here now there is another section where users are updated on a monthly basis with the points those are associated with their particular plan that happens in the backend workflows if you look at the workflow points Handler then in here we are saying that if a plan is entry plan per month then those are the points that we assigned previously and it recurs on a monthly basis so you just need to modify the plan names according to the points that you have Associated now I have three plans and all of those have monthly and yearly options so six of these that I made changes to the bottom and now with this on a monthly basis their account is updated now this is for firsttime users and they're recurring use now what if the user would like to change or cancel their plan there are a few workflow items those are set up in the backend workflow so you don't necessarily need to modify any of this the only thing that needs to happen for this particular case is when user go in their payment section and click manage subscription it takes them to the stripes customer portal this is something that you can set up in stripe once user provide their email then they will see a portal like this where they can update their plan cancel their plan they'll see invoice history over here as well they can change some of the billing info all of this is from stripe so we don't necessarily have to change anything the only thing is we need to configure this in stripe and the way one could do that is if you were to search for customer portal in stripe then there is the option of creating one for your products you'll see first time there will be an option to generate a link here once you generate then it will give you this link you probably might want to go through one of the tutorials to see how the payment different type of payments those could be set up different subscription that you can select I have selected all of the options that I had monthly and yearly for all of those plans and then you can also edit some of the information here so let's say for example if you have someone in the portal they're modifying their plan and then they would like to go back the redirection link is something that you'll have to set so for my particular case this is the test link that I use then for the live case same thing I will generate a link and also I will have a redirection back so in this case I just said Meno Park lab but again for both of your app the deployed app and for the test you might want to configure this redirection link and then also we need this portal link that we will use in stripe so once you copy these links you will go back to the app and in here there is a button that is configured that was shown manage subscription that we need to change so if you were to look for manage subscription this basically opens a URL in a new tab and if the version it says that it isn't live if that's the case case this is the test version so we add the test destination if the version is live then you'll provide the live link that was taken from stripe and with that the managing portal is also taken care and everything else is pretty much preconfigured if the users were to update or cancel their plan in the stripe portal that also is reflected in our application database now there's one additional thing that you'll have to do in stripe is that you will have to set your web hook URLs and these are the URLs that stripe uses to call your application once the changes happen so the two that are needed are the first two these are the one for the chat with doc application one is the subscription cancel now the way you know that this is the URL is by going to your workflows back in workflows and you'll see that the subscription cancelled and stripe account updated these are the workflows that we need to call so let's say for example for subscription cancel this is the link I have for my application in the test mode and I am going to be basically adding that link here same thing with the other web hook which is the stripe account updated that's exactly the name I have here in the backend workflows and for the backend workflows to be enabled you might probably know that you have to enable that in settings and in that you can go to API and then you need to enable backend workflows and for this you need a paid account I believe that will enable this URL so as you notice this is the first portion and after this WF is where we have the that particular workflow added now if you were to go back and look at these are the test web hooks in the live app you might want to modify this in my case I still have one this is version test I need to modify that so once you deploy the app then you're probably not going to have this version test it will just look something like this and it will correspond to the application that you have so just to make sure in both of these cases I have certain link Associated that I can say detect and I can get this link from here and I would suggest for you to maybe follow one of the tutorials available on YouTube on how to set up stripe if you're not able to understand in our case all of this is set up for you so you don't necessarily have to do any of these set setup pretty much you just need to create two of these web Hooks and then make sure that the test and live version correspond with the test and live version of the application link now from a usability perspective I would suggest for you to play around and see what features you'd like for users to have maybe you don't want them to have this deleting option available for knowledge base maybe you want to add some additional things here or restrict a few things maybe change the available credits for them so that is completely up to you how you'd like for your application to look like also if you were to go in the app and look at all of the hideable elements there are a few options those are kept hidden so my suggestion would be to either keep them hidden or make that available for users the way that this app is set up is that you'll notice that there are some elements which are tagged as page so these are going to be the pages in the app if you were to go to any of these Pages you can make changes so chatbot is one section knowledge base is other and summarizer is the third one which has the major functionality and within chatbot you'll see there's an option to view chat Bots this shows the repeating group uh of the chat Bots and within that you can look at what are the options available for that particular repeating room now in here there's also an option to show visibility this is currently hidden in the general setting but then you can imagine something could be public or private so a private a user can see their own chats and if it's public then you can have a different section at the bottom that shows all publicly shared chat Bots across your application now there's also an option if you might have noticed in the um chatbot that you can embed chatbot so this is something users can take this script and add it to their website and it will show a popup at the bottom which can communicate directly with the chatbot that they have created here and this has taken the dynamic information of namespace and session from Zep those two Dynamic information will help them take this chat bot and embed on their website so this is something you can make it as a premium feature so you can basically go to the chatbot section so there is this which is the view chatbot there is the chat page which will show the actual chatbot and in in here you can go to any particular element and in here I said okay the condition is that they are if they're on the entry plan then this is not a an available option for them to embed so you can change any of the features and say that some of the plans have that and some don't have that particular option so that is about the pages how pages are configured there are a few popups over here that you can also look at for deleting chatbots um adding knowledge based documents and then one last thing I'd like to mention is that in the workflow when the delete option is clicked those are these three elements here then what I've done in this particular case is I am deleting all of the messages associated with that chat bot now it's up to you you if you'd like to delete the messages or not essentially there could be an option instead of just showing deleted it also shows an option to have the chat uh available to view so that is something up to you in this particular case I've deleted all of the messages deleting the file that was associated with that chatbot so it's not available in our server it's not available on the Vector database and it also changes the chatbot it deletes all of the messages so basically removing all information about that particular chatbot except the name of the chatbot so there we go folks if you'd like to deploy the website shown here chat with document together with flow wise back in apis uh this was the setup and then for the plans shown on stripe we went through how to configure that and then also we have seen how the pricing and landing page looks like now in terms of API setup we talked about flow wise that we will be adding the upserting of document and then cohere is for the summary U and generation of summary and also unstructured this for the same purpose and then one last thing is in this template we're using pine cone so we will also add the API key for pine cone and this is something that will be available from your pine cone account this helps with deleting of any of the documents so you will have to make sure that your API key is added here and in addition to that you'll have to add this URL that is available from your pine cone Vector store as well and just to show you where it is in my Pine con account I see that right underneath the index that I've created there is this URL that I will copy and the first portion of that is where I will paste it and you might you want to leave this here so that the delete functionality works and that covers the different API connections that we have added in here and with that you can deploy a complete chat with document website and start making money as a SAS application

Channel: Menlo Park Lab

Views: 3,154

Keywords:

Id: p5XrKvifLd4

Length: 38min 36sec (2316 seconds)

Published: Sun Oct 15 2023