Easily connect OpenAI's new "Assistants" API with #NoCode | Ultimate Step-by-Step Tutorial

open AI just blew everyone's mind this week with all their crazy new updates and in this video I'll show you exactly how to use their new assistance API feature which allows you to build powerful AI assistance completely trained on your own custom knowledge without writing a single line of code let's do [Music] it now this also does not require any thirdparty Vector databases or anything like that either you can now upload PDFs and text files or csvs or whatever kind of training you want straight into your dashboard and Bam your AI assistant is now trained then all you have to do is hook up your app to the API and you're ready to roll so click the links below to sign up for a free bubble.io account and a now three times cheaper open AI account they just reduce their prices and be sure to build along with me cuz you're about to have your own custom trained AI on your very own website let's do it okay so the first thing you're going to want to do is head over to bubble.io if you don't already have an account click the link below and you can sign up for bubble once you're signed up and ready to go you'll see something like this I mean I already have a bunch of apps in my dashboard but you will see this create an app button go ahead and click that and you can give your app a name whatever name you want I'll just put something like assistance AI test or something like that and you can start with the basic features for now and you can go ahead and skip the application assistant and we are ready to roll now this tutorial isn't necessarily meant for design this is probably going to be frankly ugly but at least you'll get the functionality done and you can put lipstick on it later so what I'm going to do is I'm going to change this real quick to a column container and I'm going to grab a repeating group why well because this group will be repeating all of the chats right all of the messages to and from the AI I'm going to go ahead and just uncheck fixed width and I'll bring the minimum height to like 600 or so I'm going to go to the appearance Tab and I'm going to uncheck a fixed number of rows we don't know how many chats there will be necessarily and now as for type of content we haven't defined that yet let's go to the data Tab and let's make a new type called message and obviously messages are text content we send to and from chbt right and what attributes does a message have well we have the text itself that's just of type text you can just choose type text there and we have from who and now this will either be the user or the AI assistant right now this is two different options user or AI assistant and so for options what I like to do is go to the option sets I know it's just two options but I still like to do it so I'll say from who question mark and just make that option set and then I'll say literally user or assistant and then I'll come back to my data Tab and I'll make a new field and I'll call it from Who and the type the field type will be that new Option set we just created from who and click create now if you wanted to like make your data private and constrain it down to only a specific user or organization you would want to add more fields and do privacy rules and that stuff but that's not what this tutorial for so I'll keep it simple for now let's go back to the design Tab and now back to our repeating group and I'm going to say the type of content is messages right and I'm going to do a search in the database for all messages now again in another tutorial I would teach you how to constrain it down to only the messages between the current user and the AI or the current users organization and the AI but in this case I'll just keep it simple so we'll just search for all messages now I'm going to go ahead and add an image so I'll just say Image Grab that drop it into the repeating group now we don't want an image that big maybe we probably want it like what like 35 by 35 something like that now this uh maybe a little bit bigger maybe like 40 by 40 now let's go to the appearance and I'm going to go ahead and upload an image of AI right because the AI will be responding back and forth now this repeating group its layout is fixed and I can drag this around and it'll be fixed wherever I put it which is good but I actually for this particular use case I'm going to change this layout to a row so that things will be all next to each other I'm going to go ahead and Center this thing vertically and I'm going to give it maybe like top bottom left and right margin of like 20 all around it so that it has some breathing room around it now I'm going to grab a text element throw it on there if I go to layout tab I'm going to uncheck fixed width get rid of minimum width fit the width to the content itself get rid of minimum height and Center this thing vertically now if I go back to the appearance and I say Hi how are you question mark or something like that well that's the chat bot saying something right but is it always going to say Hi how are you no so we want this not to be static text we want to be D dnamic so let's put that and let's say whatever the current cell's message text itself is that's what we want to put are the messages always going to be coming from the robot no not necessarily so let's go and we'll say normally it's this robot image however on condition where I'm going to define a new condition and say on condition where this message the current cells message when it's from who is the user well we want a different image so I'm going to say a different image source and for this simple use case I'm just going to Simply upload an image of myself there we go awesome now if I hit the preview button here you will notice that there's absolutely nothing on our page why well because uh there are no messages in the database remember where are we getting the messages from We're searching in our database if we go into the data tab we go into the app data tab there are no m messages here so let's make some and the way we do that is we need something to type in so we grab a multi-line input element drop it onto the page we also want a button of some sort drop that onto the page now remember this layout of this page if I click here it's a column container we don't want it to be a column container well we do want the page to be a column container but this input and this button need to be next to each other which which is a row container so I'm going to click this button hold the shift key click this input rightclick them both and group them into a row container Cool now let's change the button and we'll say send message something like that it looks like it needs to be slightly wider so I'll knock that up a little bit cool okay and I'll make that the last thing now I want to come here to this input and I'll want it to be a little wider so let's uncheck fixed width and let's bring that minimum height of that input down to like 45 and that's looking okay now if I hit preview again you'll notice that it spans the entire width of the entire page which kind of looks weird frankly so let's come back here and let's go to this outer group here this group a and maybe we'll say group send or something like that and let's make its Max width like 1,000 something like that and then we'll just Center everything and we'll do the same for the repeating group we'll say its Max width can be 1,000 pixels wide and we'll Center everything there as well and maybe we can give this like bottom margin of 20 just so that there's a little bit of breathing room between our send box and our actual message view itself let's refresh the page and yeah that looks better to me now this Bottom bar here is just for debugging and bubble we don't really need it right now so I'm going to go ahead and highlight that debug mode and Delete and Enter and now we have ourselves just the app itself okay we'll go back into our editor and let's send a message so if I click on this send message button uh what do I want to have happen well for this button click I want to add a workflow so I'm going to click on this add workflow button and say when that button is clicked I want to create a new thing in the database what thing a message and let's go ahead and add all fields and say this is from me the user and the text itself is whatever we typed here right this multi-line input so let's go back and say whatever we typed in this multi-line input A's value is the message itself cool now let's go here back to our app refresh and give it a shot hello and click Send and guess what we've got ourselves a hello and obviously it changed the image to myself because it was me the user saying it now I noticed that after I clicked send this input didn't clear it didn't erase the hello let's do that real fast and we'll just say reset relevant inputs for step two so let's try one more time refresh and I'll say how are you question mark and I'll hit send and it did indeed give me a message and it also cleared the input out cool now I personally don't really need the divider here so let's go back to the repeating group in the design tab click here and we say yeah we don't need this divider let's just say none for the separator and that looks better do we need all of this Gap spacing between each message not not that much so let's come back here and we'll say the minimum height of each row can be like 60 or so and now let's refresh and I like that okay again this isn't the design tutorial but that suffices for now now how do we get messages back from chadab or from our custom assistant well let's work on that let's go to platform. open.com if you don't already have an account you will need an account it does require a credit card don't worry it's very inexpensive but it does require one once you're here go over to this left sidebar and click assistants and I'm going to go ahead and create a brand new assistant all you do is Click create and maybe I'll say this is my weight loss Guru or something like that weight LW bot or something like that and as for the instructions this is you telling chadt how you want it to behave so maybe we could say something like you are a helpful weight loss expert please refer to the attached PDF document which I will attach soon when questions arise or something like that again you can prompt it better than that but you get the idea now as for the model this is open ai's brand new model I would highly recommend probably using this GPT 4 1106 preview this was November 6th 2023 when they launched this as of the filming of this video they have these two functions available they're planning on adding more but I'm going to go ahead and enable both of them and I'm going to upload a file now what file I'm just going to look for a weight loss PDF something like that I'll click on this and sure for this demo that will work I'm going to go ahead and download that file and I'm going to come back into the assistant API and upload that same file and voila as simple as that I have my bot trained on that specific file I'm going to hit save and you have yourself an assistant now if you want you can test this assistant if you click here and click the test on the top right you can go ahead and test it and run things and make sure it's working the way you want I'm not going to worry about that in this tutorial but you can do that if you want now when you click into the assistant you'll notice this little assistant ID here that's important we're going to want to save that for later so hang on to that now let's go back into our bubble editor and let's go to the plugins tab click add plugins and type assistance and you'll see my plug-in that I made open AI assistance API go ahead and install that plugin and click done now the only thing you'll need is your API key so go back to platform. open.com and go to API Keys here on the left create a new one I'm just going to say temporary for video and create and you've got yourself a key copy that come back to your bubble editor and type in the word Bearer space and then paste that key same thing here Bearer space and then paste that key and that's all you need to do I've done most the heavy lifting for you so now you just got to go back to the design Tab and let me explain how this is going to work so I have this little visual hopefully it helps the first thing we want to do is create our assistant we already did that right we did that at platform. open.com assistance it's our custom trained version of chadt remember our weight loss expert the next thing you want to do is create a thread what is a thread well it's just a list of messages right the messages belong to a single conversation once we create the thread we're going to want to create a message that belongs to that thread right so it's just whatever the user types kind of like what we just did earlier but now we'll be actually creating that message in open AI as well and after we do that we'll want to create a run now what is a run it's basically a command telling Chach BT hey I want you to think through this thread and respond after we create the Run we want to retrieve the run because it takes a little bit of time for chat BT to kind of process everything so we will retrieve that run to check if it's actually ready for us to get its message response back once it's ready we will go ahead and list all the messages that it has on file open AI stored them for us which is kind of cool and then we will just literally just grab the most recent one open ai's response back right your custom chatbot response back and we'll create that in our bubble database as well so that's the simple flow hopefully that makes sense let's go ahead and dive in so the first thing we want to do is create a thread so let's go back to our data tab let's go to the data types and type in thread Now by default every single data type in Bubble has a unique ID associated with it just to identify that particular piece of data but because we're saving it both in bubble and in open AI servers we want to add a new field called open AI ID and let's just make that of type text and create and that's literally all we need for this particular data object now let's go to the messages Tab and remember every message actually belongs to a parent thread right so let's make a new field called thread and that will just be the data type we just made called thread right and create so we can correspond those me messages to that thread all right let's go back to our design Tab and say this page it needs to be of type thread because at least for this particular page there will never be multiple threads on the same page it will always be one thread right one chat thread happening on this page at any given time but remember if we go to the data Tab and we go to the app data and we go to the threads data type there are no threads we have nothing in our database well let's go to the to the design Tab and we'll say when this page gets loaded so let's go to the workflow tab actually and say when this page gets loaded and only when the current Page's thread is empty cuz guess what it's going to be as soon as we reload this page then we'll go ahead and just create a new thread but guess what we need its open AI ID so not only do we need to create it here in bubble but we also want to create it in open AI so if we go to the plugins and this open AI assistance API I made if we scroll down you'll notice that there's this action called create a thread so let's use that let's go back to the workflow and rightclick and insert an action here and say create thread and that's all we need to do it'll create a thread for us in open AI as well as in bubble but we want to know the ID of that thing so let's say the ID in open AI is just whatever we get back from step one right so it's going to create and it's going to send us something back and it'll say hey we successfully created a thread here's the ID of that thread right so we'll just grab the ID and the last thing we want to do is since we have created a thread and since this current Page's thread is empty we want to go ahead and just refresh the page so we'll go to page the same exact page remember this is the index page we'll just go here but this time we want to send the data right the thread data so we'll say whatever the result of step two is is the data we want to send all right so if we go back to our app and we refresh this page you'll notice that it's going to create a thread and then add the unique IDE of that thread it just created onto the page so now if we go back in here to our data tab we have ourselves a thread now if we want to go back to the design tab we don't have to search for just all messages in the database we'll constru drain it down to only those messages who belong to the current Pages thread and close that out cool all right so the next thing we want to do is let's go back to this send message workflow so when somebody clicks I'm going to rightclick and start the workflow for when they click remember we're creating something in bubble I guess we also need to assign the thread to that message so we'll just say the current Pages thread but we also want to create that message in open AI remember it's storing all this stuff for for us as well so let's rightclick and insert an action and say create message and again this is part of my plug-in so we'll hit that and we'll say the thread ID remember we already saved that so we'll just say whatever the current Pages threads open AI ID is the user it'll pretty much always be user and then the content we don't want to always say who are you we want to say whatever they said here right in this input so this input's name is multi-line inut a I'm going to go back here and say insert Dynamic data whatever they put in multi-line input A's value cool so now we have ourselves a message in open Ai and a message in bubble so let's go back and see where we're at we have we've created our assistant we've made the thread we've made the message now we need to make a run now what is a run again it's just telling open AI hey run through those messages in that thread and give us a response so if we go back to our plugin you'll notice that there's this action called create a run so we're going to use that let's go back here to the workflow tab okay so in our send message workflow and this button is blue so sure I'll make this workflow blue and we'll go back here we created a message in open AI we created it also in bubble now let's go ahead and create a run I'm going to go ahead and do that action now what what thread ID should I use I can just use the current Pages threads open a ID now as for the assistant ID so if we go back to the open Ai and hit done here go back to the assistants we want to process this as if we were the special weight loss bot right so let's go ahead and highlight this and copy it and come back here and throw that in the field there as well now just a little Pro tip in bubble sometimes I know know it looks like these steps happen sequentially but they actually sometimes happen happen simultaneously which is a good thing because you want Bubble to feel fast lightning fast but in this case we want to make sure that step three happens after step one happens so what I'm going to do to force that is I'm going to say instead of just the current page threads open Aid I'm going to say the result of Step one's thread ID because whatever that it did in step one it's going to pass back a thread ID awesome let's see where we're at here we created the run now we want to retrieve the run now this process takes a few seconds obviously the chatbot has to think through everything and then give a response so in bubble the way to wait for a second or two or three or however many seconds you want to wait for is you you got to create a custom event so click here and go custom create a custom event and we will say ready question mark and this is again is just to check whether it's ready I'm going to go ahead and make this a red color and now let's go back to our blue workflow and we'll say after we do these four steps let's go ahead and type in the word custom for custom event and we'll say we'll schedule that custom event into the future how many seconds into the future let's say one second let's be optimistic and hope it'll be ready in 1 second it might not be but let's check right so in 1 second into the future will hit this red workflow and we'll say hey open AI that run I just did is it ready and the way we do that is with the retrieve run step so go ahead and put retrieve a run as for the thread ID yeah we can just go ahead and say it's the current Pages threads open AI ID but as for the Run ID well we actually need to get that from the blue workflow in step three it's going to give us that that ID well how do we pass it from from this blue workflow over to this red workflow that's what we call a parameter so I'm going to add a new parameter and say run ID something like that and that will just be simple text and now we can pass it along here we can highlight this insert data and say whatever the Run ID is that we passed through this Red Gate is what we're going to use for this retrieval step now let's go back to the blue workflow and say oh yeah we need to specify what the Run ID is to pass through that Red Gate so we're going to say the result of Step 3's ID cool so to reiterate again when this blue send message is being clicked we're creating a message in open AI servers we're then creating a message here on bubbles servers we're then creating a run commanding open AI please think through this and respond we're then resetting the input and we're then sending that run ID on over to our red workflow 1 second later and we're going to retrieve it we're basically checking is it ready yes or no so let's go back here and we'll say if it's ready we want to list all the messages right and create the message that it sent back so let's work on that part first let's just pretend it is ready so we're going to go ahead and list all the messages and pull the most recent one that we got which will be again assuming this is ready it will be open ai's response so let's go back into our app and say we're going to go ahead and create a new message in our bubble database We'll add all fields and say this time it's from the assistant the text is going to be we're retrieving all the messages so if you go back to the plugins this is our only data call a data call is when you can write an expression to pull the data right we're listing all the messages that we've got that open AI had so let's go back to the workflow Tab and say we're going to get data from an external API which API the open AI list messages API which thread let's insert Dynamic data and say whatever the current Pages threads ID was and let's close that up this part's a little bit confusing but basically all you'll want to do is grab the data it sends back the first item of the data it sends back and then the content within that first item we want to grab its first item and grab the text that's how you get the text back from open AI now the thread again is just simply the current Pages thread now do we always want this to happen no because what if it's not ready what if it doesn't have a message for us we don't want to create it if it doesn't have it right so we'll only do this if the result of Step one's status is the word completed if it comes back as completed then we know that we're safe to go ahead and pull that message cool but again what if it's not ready well let's Wait Another Second so how do we do that you guessed it let's just go ahead and create a new custom event and say ready question mark and then just Dash two I guess that'll work let's make this red again let's add that same parameter that we had before the Run ID right we're going to still need that so we throw that in there and that's of type text and let's go back to our original workflow and we'll say yeah we'll do the same thing I'm just going to right click copy come back here right click paste and we've got ourselves the same action now this is broken because it doesn't know what it's pulling from it's just grabbing the same run ID we had there cool now let's go back to our first one and rightclick copy come back rightclick paste and say yeah it's going to go ahead and create that reply from Chad gbt right only when the result of Step one's status is completed now let's actually do the action uh for if it's not ready so we'll say we'll go ahead and type in the word custom for custom event and we'll schedule that number two ready number two for one more second into the future and the Run ID can just be that same run ID we passed through this Red Gate we can pass through that Red Gate will say the same run ID now do we always want to schedule this thing no we only want to schedule it if it's not completed right now the message is being created if it is completed so let's rightclick and copy come here right click and paste and say we're only doing it if it's not completed AKA we still need to wait more seconds right cool so then we delay a second it hits this one number two and it tries and it creates it if it exists but if it does not yet exist if we've waited two seconds well let's just go back to number one right so let's say trigger a custom event or schedule a custom event one more second into the future the Run ID can be the exact same one and let's go back here let's right click copy this come to step three right click paste this and say only when it is not completed are we going to keep going right so it's going to go through this Loop right it's going to go it's going to hit this one and then it's going to hit the next one and it's going to hit this one it's going to hit the next one back and forth each and every second until it's ready and it actually creates the message in which case it will stop and it will not trigger the next Loop all right my friends let's give this a shot I'm going to go ahead and close this out go to the design tab did I forget anything I hope not but let's give it a shot I'm going to go ahead and refresh my page I have myself a new thread I'm going to say hi and send it's going to create it in open AI as well as here in bubble and yay I've got myself a message hello how can I assist you today if you have any questions or need advice regarding weight loss feel free to ask cool now let's see what question could I ask it that maybe the general Chad BT wouldn't know let me go ahead and open that PDF again let's see here uh I'll say what does step six in the document say maybe something like that turn off the TV and or computer during meals and snacks okay let's come back here and let's ask what does step six say question mark and send and yay it worked however it bumped the message down to the next line we don't want that so let's go ahead and go back to our bubble editor and this text here it's the checkbox fit width to content is checked let's uncheck that let's also maybe give it some right margin so it's not right aligned with the right side of the repeating group maybe something like 15 on the right and let's come back to our app refresh and that looks better awesome all right there you have it that's how to create your own custom trained assistant with open ai's new API I hope you enjoyed and if you did I'd super appreciate a subscription and a smash of the like button and if you want to learn more in depth about how to build a successful software startup completely without having to code head over to nood advantage.com and I'd love to help you out more hope you have a fantastic [Music] [Applause] day [Music]

Channel: #NoCode Advantage

Views: 10,238

Keywords: NoCode, #NoCode, Bubble.io, Bubble.io tutorials, nocode tutorials, how to code, learn to code, entrepreneurship, work from home, online business

Id: zMvBbxI4BRs

Length: 31min 6sec (1866 seconds)

Published: Sat Nov 11 2023