How to Build a GenAI Recipe App Without Code (feat. Bubble Developer Sam Morgan)

[Music] we are going to learn how to use bubble's API connector to integrate with open AI to create a recipe app I'm excited to introduce our instructor Sam Morgan who is a bubble developer on the team that builds bubble.io Sam would you like to say a few words about the class you're teaching today sure thanks Nicole uh it's great to be here like Nicole said I'm Sam I'm a bubble developer on the product team here at bubble um in this session we're going to be talking about apis and specifically the open AI API which allows us to use the functionality of chat GPT to power our app so for this use case we're going to be building a recipe generation app where we send some user data to the API and in return we get a fully generated recipe powered by chat gbt so it should be a really cool session um so with all that said let's go ahead and dive into the video [Music] hey everyone my name is Sam I'm a bubble developer at bubble and today we're going to be diving in and building a recipe generation app let's get started so I'm going to use a floating group for my header uh mainly so that as our recipes grow uh and expand down the page our content stays pinned to the top give it a minimum height of 60 expand it there we go I'm also going to create a little bit of contrast on my page background like to set my page background to some kind of gray just the the header sticks out a little bit and then we'll go ahead and start just putting in some of our basic UI elements so I'm going to want a logo and we'll just call this my recipes make it a little bit bigger give it a nice primary color maybe I'll do one button on the other side uh for a future feature that we may not get to in today's session uh where we just store our recipes make that look a little bit nicer there we go also Center it let's make it bold primary then I'm just going to use uh to put this to the other side I'll use my roll layout here space between then we'll add a little bit of padding to our header so that things kind of stand apart now I just want to add a page content group and so to do that we're going to just drag group onto the page and then I just want to make sure that I give it enough top margin to clear my header so here it's 104 pixels I'll go ahead and make this group column and then give it 104 top margin like that we'll go ahead and expand it so it takes up the whole page and then we'll also give this some padding just so that as we scale down we don't hit the edges of the screen beautiful and now finally I'm just going to put in a little content card um that will allow us to put like our input and our recipe on it right so here um let's go ahead and say that uh this is a column I'm going to give it like a Max width of like five 528 and Center it um this just an arbitrary number I chose you can really set any max width you want I generally wouldn't go above something like 1130 um which would be like a very widescreen sort of UI but here um 528 seems fine for just a little input and a recipes below it um I'm also just going to give this card a little bit of style so I'll go to group border and you can see that I have this as just a flat white color with some border roundness here and so that's going to kind of give us this nice looking card right now we can go ahead and insert our input and this is going to say what do you want to cook right we'll go ahead and also insert a button that says generate recipe that let's go ahead and group these in a row so that they're next to each other and then just a couple aesthetic changes to make things look really nice and let's go back to this group and give it a bit Gap spacing we go so now we have an input and a button and then the last thing we want is just a text placeholder for our recipe I say placeholder because we haven't hooked up any AI functionality yet and so there's really not much we can do to actually get the real recipe back yet until we hook up that functionality so we'll just put in a little text element that will kind of hold the place of where our recipe will go let's also give this some Gap spacing so the recipe is down and then finally just some padding on our card let's do our same 20 4 all around um just a a quick voice over in terms of why I'm choosing 24 um just a number that I like from the bootstrap system it doesn't really matter which number you pick uh but stay consistent that's kind of the key thing if you're using 24 padding in one place it's probably going to look good for you to use that same padding somewhere else uh there's all sorts of best practices online for this type of stuff um okay so we have our main input our button and our recipe text and now we're ready to actually start hooking up our AI functionality so we're going to be using open AI to connect an AI to our app this AI is going to take the user input and then when they click generate recipe it's going to return a recipe based on that input right that's that's our goal so in order to do that we need to use open Ai and the first step is going to be to browse open AI documentation um I already happen to have it open so I'm going to go ahead and pull up the documentation here when you first look at this if you're not used to apis it's going to seem very very intimidating there's a lot to look at a lot to read and this code that obviously you know doesn't make a whole lot of sense to us right away um so one thing I want to just highlight is that almost all apis will have this type of code called curl and bubble actually allows you to import this code and turn it into uh a call in our API connector which is very very useful so to help learn this uh what I want to do is import this call and start talking through some of the uh pieces of what makes up the API call um I want to point out a couple things here we're using the chat completion call from open aai I'd say for about 90 to 95% of text based Generations that you're going to be doing with AI this is the call that you would use if you're using open AI um there are other endpoints for things like images and audio but uh for the most part for text based generation you're going to be using the chat completion object right and so what we're going to do is just copy this curl code right so I just hit the copy button and then over in our bubble editor we're going to go ahead and add an API connector to our plugins right and so with this API connector we can now hook up to the open AI chat completion call so I'm going to add another API and I'm going to call it open AI I'm going to leave the authentication to none for right now because we're actually going to handle the authentication in the call itself I'm going to instead of expanding this and working on this blank call here what I'm actually going to do is just click this import another call from curl link and that's going to allow me to paste in the code that I copied from over here and and when I do that and hit import it's going to actually bring all of that information into my API connector as a call and this will allow us to kind of go through this and see what everything's doing so what I'm going to do is just delete this default blank call and now we're just left with this imported call let's rename it chat completion and let's just talk through some of what's going on here right so one of the first options I have is to use as either data or an action here we want to select action uh basically the difference between these two is depending on what you select your API that you're setting up can either be available for use as part of the Expression Builder um via the get data from an external API data source in the Expression Builder or it can be used as a workflow action itself here I'm going to want to use it as a workflow action because we're going to make this call when the user clicks the generate recipe button the next part of my API connector is the data type where I'm going to leave it set to Json um that is a very very common data type and most apis you connect with will be Json and then we have this post and a URL and this comes directly from the API documentation this is exactly what they want us to do here right they want us to post to this URL and so uh that's been brought in here and then we have these headers right the headers so um for our headers those are actually coming from here in the curl code right you can see content type application Json and authorization Bearer and then your API key um it is important to make both of these headers private that will just prevent them from being exposed to users and especially the API key one that's sensitive information so we want to make sure that that's private and then for the API key what you want to do is just grab an API key from your open AI account um and you're going to want to do that by signing up for an account here um and then you'll be able to access a section where you can create API keys I'm going to go ahead and copy mine on another screen and paste it in here so here's my API key I'm just going to replace this variable notice I left in the bearer that's very important uh the format should be Bearer and then your key okay and then body type is still going to be Json and then we get down to this actual body content which is kind of just a direct copy of this code over here right and so what this body content uh is saying is a couple things first it's defining our model right here we're using GPT 3.5 turbo you can update this to GPT 4 if you have access to that API um honestly for our purposes GPT 3.5 is a bit cheaper um and it will work just as well so I'm going to go ahead and leave it on this and then we have this messages object right and so this messages object contains two different messages one is a system message and the other is a user message so in the system message we are telling the AI how we want it to behave so here because this isn't really going to be changing I can just statically type this right so I might say something like this right so something very very simple you're a helpful recipe generation wizard you'll take a user input and generate a recipe based on what they ask for right um I may give it some additional instructions here like make sure to include information about ingredients measurements and steps to complete the recipe right just so that every recipe that comes back is full and consistent in format and now I have my user message and this is what's actually going to change every time right our user message is going to completely depend on what our user types into this input and I can call this input recipe request right so whatever is in input recipe request that's what we want to send to the API and in order to do that we need to make our user message Dynamic right so our user message has to be able to be changed out with every call and in order to do that we're going to use this opening bracket and closing bracket for dynamic values so I'm going to copy the user message including the quotes and I'm going to just put an Open Bracket and then say user message and then a closing bracket and when I do that you notice that I get a parameter generated down here called user message and I can now fill this in with a message for initialization right notice that I included the quotes around here and we're going to talk in a little bit about why I pulled the quotes out of this section and into this section it'll make sense I promise when we get to that part of the demo um so a couple things here we want to make sure this is not private because our users need to be able to access this to change it out um and then we also want to initialize it with something that kind of makes sense so maybe I'll say I want to cook chicken tonight right um I have my quotes in there my user message so now we should be able to initialize our call let's see if this works it's going to take a minute and there we go right we get back our recipe so the message content says great uh so it's asking us how would you like to prepare the chicken there may be delicious recipes to choose from so such as baked grilled fried now we're not building an app where the user can continue this conversation so we need to be really clear in our system message that we don't want it to do this we don't want it to ask questions right so I can fix that right if I go back here um and I just add some information to our system message I can tell the AI and say um the user may not give you enough details if that is the case you should be creative and suggest a delicious recipe and provide the details anyways right uh and maybe I'll be explicit do not ask followup questions just generate a recipe right and so now if I try to initialize this with the exact same information hopefully we get a actual recipe back instead of a question from the AI let's see there we go so our AI says now great how about trying a classic recipe for chicken parmesan here's what you'll need and it goes right into the recipe that is awesome right so that's exactly what we want we'll go ahead and hit save um and then yeah so our a our API is set up and now we're ready to connect it to our UI on the front end so again what we want to do is take the user input and send that user input into the user message parameter which should in turn return a nice recipe for us to then display so let's take a look at how that's going to work when our users hit the generate recipe button what we want to do is first make that call to open Ai and I can find that call in my plugin section of the workflow actions and this is because I selected action in my API connector then under user message I can simply replace the default with a reference to the user's input right and so here I can say input recipe requests value now remember I mentioned that we're going to address those those weird quotes and why we pulled the quotes out of the body and into the parameter and it's because there's a a funny variable here where we don't exactly know what our users are going to type and it's possible that they might use characters that are not what's called Json safe and Json safe just means these these characters can be sent over the API so some examples of characters that are not Json safe include things like quotes and forward or backs slashes um asterisks sometimes right and so we don't have any way of knowing if our user is going to include any of these forbidden characters and so there's a bubble operator called formatted as Json safe which will automatically Escape any of those invalid characters and turn them into valid characters if they exist but the catch is that this formatted as Json safe operator also adds quotes to the outside right and so if we left the quotes in our body we would end up with double quotes which itself would return an error right and so we want to get rid of them so that the formatted as Json safe takes care of them for us that's the whole reason behind that that setup um so we've made our call to open Ai and now what we want to do is display open ai's response somewhere we need to save it somewhere here I'm going to use a custom State um you could also save it to the database there's a lot of different ways that you could handle this but I'm just going to use a custom State on the page we'll create a new State uh called AI response and it'll be a text value and what we're going to do the way that we're going to access this response is by saying the result of Step ones choices first items message content now this may seem like a strange expression but if we look back at our API response it'll start to make sense open AI sends us back an object and one of the top level properties of that object is this choices property now choices what you see when you see the square bracket that means that this is a list of choices right the square bracket stands for an array in uh Json and that means that this is a list and so that's why we say choices first item because there could be more than one choice and we're just going to take the first option that the AI sends back so choice first items and then you have another property underneath choices called message and then another property underneath message called content and that's where the actual response is stored and so that's why we have the expression the result of Step ones choices first items message content is going to be displayed in that custom State then all we really need to do is just update our recipe text to reference that AI response or that custom State and that way when the state is set our recipe will just display right here and that's pretty much it um we now have a functioning recipe generation app so let's take a look at what it looks like I'm going to go ahead and hit preview and let's try to generate a recipe so let's say I'm in the mood for salmon tonight and in just a second we should have our recipe back there we go it says great here's a delicious recipe for honey glaze salmon um so that is some pretty cool functionality that we set up pretty quickly there's a lot that you can do with this right um we can continue we can add a loading State uh we can add a save button to save your recipes right and we have this my recipes button up here so there's a lot that we can do to expand on this but this is the basic functionality of a recipe generation app um one thing I can show real quick at the end here is how you would create this save functionality so that you can save recipes like this to the database right and so what I would do is back here I'd probably add a new data type called save recipe right and here I would probably just save the recipe itself so I'd have the recipe text right and then um that recipe would automatically have a Creator field so we'd know exactly who created it um we probably want to somehow save the title as well um and so what I do is just create a recipe title field and instead of text just to be more clear let's call it a description or actually instructions right I can then come come back to my UI and add a new button below the recipe that says save recipe and when the user clicks that what we're going to do is create a new saved recipe right now there's one interesting thing here which is that at this point remember when we generate the recipe we clear out the input so we don't really have a title for the recipe we just have the recipe text and we kind of lost the user's input and even then the user's input wasn't necessarily the right title for the recipe so one thing we could do that's really cool is actually use AI to generate the title based on the recipe right so when we click save recipe um we're GNA uh first make a call to that chat completion endpoint right now um what we are going to need to do is actually have another Endo because we're not going to be generating a recipe with this right we have our static text in here um so there's a couple things we could do I could make this text Dynamic um or I could create another call in this case I'm going to make the text Dynamic so what I'm going to do is just copy this and I'm going to actually use the command X to cut it and then I'm going to put in system uncore message like this right and then I'm going to paste that in the initialization and uncheck private so we can change out this system message and then I'll reinitialize the call and by doing that we've made it so that we can now change what we're instructing the AI to say and so now I need to go back and in my generate recipe workflow you notice I still have the default here so this is fine that's exactly what I want to leave here right um but now this gives me the opportunity to do another call where I change that message and here instead of your helpful recipe generation wizard what I want to say is take the user input and generate an appropriate title for the saved recipe right so we're going to submit the recipe text and say give me a title for this recipe and so then the user message is actually going to be the recipe's text right so here I can actually reference that custom state right so index is AI response and then we're also going to format that as Json C right and so it's going to sort of generate a title for this and then I can save the title by saying the result of Step One choices first items message content and then my recipe text right the instructions are actually just going to be index's response right and so we've now just saved a recipe to our database uh by using the same call to generate a custom title right so lots of things that you can do with this um that's going to be all the time we have for this demo yeah I hope everybody enjoyed learning how to build an AI app uh with bubble get the ball rolling I have a question for you Sam in this recipe app you set the API call to be an action what are some common use cases for setting an API call to be data as opposed to an action yeah uh great question so data calls um generally you want to think about if you're going to need to use the call as part of a workflow or not so a great use case for a data call would be anything um that you really just need to show on the front end of your app and you don't need to actually do any processing with right so um let's say you have you're making a call to an API to get a list of data to display on the front end that'd be a great use case to just set it up as a data call and make that call inside of a repeating group um as soon as you need to use the call as part of an action and reference the result of a certain step uh in a workflow that's when you'd want to use an action awesome that's really helpful context I'm seeing a question about any limitations that might exist with using AI in bubble um do you mind elaborating a bit on that sure uh this is prettyy General but in general there's no uh like limitations to what AIS you can use it's really we connect to AI using the API connector so as long as the AI service has API endpoints or uses a rest API um you have the same capabilities on bubble that someone using native code would have um what bubble isn't is we're not a platform for uh you know fine-tuning a model on our servers um but an API is a third party service that you can connect to uh and use the model that they have finetuned to generate results and return those results back to your bubble app um so in that sense there's really no like hard limitations it would be limited by uh you know if a certain service doesn't have an API uh you wouldn't be able to connect to it but you could say that those Services likely don't want to be connected to in the first place if they don't have an API fantastic it looks like your answer probably just touched on a bunch of the questions that were in the chat um I am seeing one about users who are looking to create a custom trained model and wondering how to connect that using the API connector would the steps be really similar to what you just showed us or what would the difference yeah this is this is a great question so um one thing I wasn't able to cover in my video we talked about the chat completion endpoint right and so this is a great uh API endpoint that open AI provides for simple um you know call and response type AI use so in our case we sent a message to the AI uh that asked for a certain recipe and the AI sent us back that recipe um as soon as you start talking about context and you want the AI to remember things or you want the AI to have awareness of say your data or some document that you upload um there's actually another API that I would recommend it's also by open AI so you'd be using the same documentation um but you would want to look at the documentation for something called the assistance API this is a more recent uh release by openai before the assistance API was out uh you would have had to use something called fine-tuning which was a lot more complex the assistance AI uh API sorry the assistance API makes this much more accessible um basically it provides a couple of extra endpoints where you can send image data you can send file data um and work with more file types to provide the AI context and then it has an a mechanism for automatically remembering all that context in subsequent calls um so it's really great it would be a whole other lesson and Video in and of itself to go through the specifics of the assistance API but definitely check out the documentation and it's definitely possible to hook up to that API through using bubble amazing that's a really helpful tip um I'm also seeing a question about how a user would go about generating images or audio based on a description because in this app that you just built the recipe comes back as just text so what advice would you give to a user who's looking to generate something other than just tax yeah great question um so open AI provides uh another service called do uh which is image generation so there are it's not the only option by the way there are several different um image generation Services there's uh mid Journey stable diffusion um couple others that that are coming out um but I really like openai I think their API documentation is great so they have one called do uh one just caveat to keep in mind when generating images and I think a lot of people get surprised by this when they start using AI image generation in their apps it's not super cheap and you want to make sure that the use case you have for generating images uh is worthwhile and that you have some sort of monetization plan because it can quickly if you're generating a lot of images open AI is going to charge you for that that use um in terms of audio I would recommend there's a a separate company not open AI called 11 Labs that does a great job with audio Generation Um um I actually saw somebody at the uh bubble house last year in Spain make a bubble app using 11 Labs that allowed me to speak in my normal uh English voice and it played back the message in my voice but in Spanish it was a really unbelievable use case uh of 11 lab so they have a great API uh definitely worth checking out if you have some time those are some really helpful pointers I'm also seeing a question about how users might be able to provide multiple input so I think some of our users who are building apps are thinking about the UI and how a user would go about providing inputs and then getting uh something generated and return um and so if they are completing something more like a form and providing uh multiple inputs like chicken fried and dinner how could they go about um incorporating those inputs to then generate a more specific user message yeah awesome question here so um I think this question was asked before the end of my video and so you may have gotten a peak into the answer when you saw how I replace the system message with a dynamic parameter um so the answer to this question is yes you definitely can have multiple user inputs you can customize this prompt to be to have as many user inputs as you want um the the key is just using the open uh Carro character in The Clos car character to surround your Dynamic parameter name and that will create a new parameter uh underneath in the API connector for you to work with um you want to make sure that you're structuring things as that Json safe using that format is Json safe operator because every uh Dynamic input that you create uh the user has the potential to put not safe characters in there like backslashes or quotes So on the front end just make sure you're using that formatted as Json safe operator um and you will be good to use as many inputs as you need to Fantastic um what would you say are common pitfalls that you've seen when using apis in bubble because it's clearly a really powerful feature that a lot of our users take advant of so curious if you could elaborate on some pitfalls great question um there are a few the the biggest one that comes to mind is just is honestly and I it's it's honestly just not staying patient enough um and and not recognizing that this stuff is not supposed to be easy and there's no uh quick solution to a lot like a lot of times the solution to hook up a specific API is to read the documentation over and over again until you find what you're looking for and I know that may seem like kind of a copout answer but it's it's really true these apis are complex um and there's no one size fits all every API is different from the last so what we saw with hooking up open AI is going to be different if you try to go to 11 labs and use their their API right um the best piece of advice I can give is to use that import curl functionality that we saw to teach yourself about the different functionalities of the API connector um another just common Pitfall too is just not getting authorization right so authorization is just um basically your username and password credentials sometimes there's no username and it's just a password other times there's both but authorization meaning your credentials for being allowed to use the API this is a pretty complex subject that varies from API to API and so because of that um a lot of times people get used to one authorization method and then they try an AP that uses something different and don't necessarily switch things up but again that goes back to the API documentation will be very clear about what the authorization should look like so the more details you can read in the documentation the more likely you are to get things right and set it up correctly absolutely and I would highly encourage that our users check out bubble documentation as well because we do cover some of this for the most popular uh API Services out there um I'm also seeing a question in the Chad I think our users are really appreciative of all your knowledge on this topic and are wondering if you have any recommendations for good custom AI training platforms um that do offer an API that they could connect to Bubble uh great question so I'm goingon to go back to the assistance API as the easiest way to do this uh there was a service before the assistance API came out called pine cone that was really great and there was this sort of moment in AI development uh again before open AI kind of changed this moment with the release of the assistant API uh where in order to store context you were sending things to what's called a vector database um and that would allow you to sort of fine-tune the model um and have it remember certain context or maybe you wanted to train it on uh you know your entire uh products manual right um this stuff is all much easier now with the assistance API so I would would recommend uh that like the best way to get started with training and and creating like a very custom implementation if you're thinking stuff like custom gpts the assistance API is basically the API version of a custom GPT where you can upload as much context as you want and the AI will remember all of that context very cool I think we have time for one more question about error handling how do you go about error handling and checking that the response is coming back in the right way any advice around debugging yeah great great question so there is a checkbox in the API connector I think it says something like include errors as part of the response so you definitely want to make sure that's checked um once that's checked I didn't cover this in the video because there wasn't uh a ton of time to get through everything but once that's checked what's going to happen is you'll be able to reference the results of Step whatever the step is that you called the API in your workflow um and there'll be a parameter called has error and that parameter will come back as either yes or no and so what I usually do is I'll set up a custom event uh you know on the same page or backend workflow wherever I'm calling the API there'll be a custom event called handle error and after I call the API I trigger that custom event only when the results of the API calls has error is yes and so and then you can also put uh you know on all the steps that continue with the workflow only if has error is no so you basically Branch off your workflow into two different paths based on that parameter that comes back um a lot of times for an error I'll show just a custom popup and say Hey There was an error please reach out to the team there's a lot of different ways you can actually handle the error but that would be the basic technique in the workflow awesome well Sam thank you for walking us through how to build an AI powered recipe app bubble's API connector truly opens up a world of possibilities and open AI is only one of many services you can connect your app with

Channel: Bubble

Views: 3,743

Keywords:

Id: AUchia_Hf2w

Length: 32min 59sec (1979 seconds)

Published: Thu Mar 21 2024