How to create a ChatGPT app with no code using Bubble.io | Bubble.io Tutorials | Planetnocode.com

foreign yesterday March 1st 2023 was the day that open AI released the chat GPT API that means that for the first time you can use the amazing advancements we got with chat GPT and you can add them into your own app even your own no code app such as with bubble and I'm going to be demonstrating that to you so here are just a few examples but we're going to be focusing on this part here and is that uh before any before March 1st any um web apps that or mobile apps that we're using um openai's text generation we're using this DaVinci version 3 but now we can use GPT 3.5 turbo and it is 10 cheaper than DaVinci version three so this is just a huge advancement in what is possible what you can do on a budget with uh open Ai and with text generation so how do you put this in the bubble app without having to learn loads of code let me show you so in my bubble app here we install the API connector from the plugin directory if you haven't already and you see I've got open AI already added but I'm going to add it um again uh for the purpose of this tutorial so that we go through every single step I'll just call this open AI V2 um and then I know I have to authenticate it in the header um basically I am interpreting what open AI provides here into bubble so I know I need authorization and then Bearer and then my API key I'll come back and do that in a moment I know I need another shared header so these stands for headers and so that's content type application Json and then just watch carefully what I do I'm copy it into there and I remove the colon bubble ad set in automatically this is just a form for building up that like code codal if that's the word coded expression that's better word um what else do I need I need to choose a model and uh put some data into the data part so I'm going to copy and paste that and this is where it's different if you followed any of our videos using uh DaVinci version 3 this is kind of where it requires a slightly different prompt so I'm sending data to open AI so I'll change it to post I change this to action so that I can access this in a workflow and uh then uh what else do I need uh okay let's just look at what it me oh I need the um end point there we go copy that let's just take a moment to understand what's going on here and whereas before we had the field name or parameter prompt we now have messages this is so that you could in theory build a complete copy really of what was on uh chat.openai.com you can build that in bubble and part of that is being able to keep track of your conversation history um which you're passing back and forth with the with open AI um so just to understand this bit a little bit more if we go on to the documentation we can see that a message contains a role from system and content so this is where you can they've basically structured this so that you can break apart bits of your prompt uh and then make it much more conversational so uh this is basically where you put your prime or your primer for your prompt such as UI helpful assistant and then this is where you could put the input uh from your user uh so um I'm just going to copy uh this this bit here and uh paste it into here and then I need to make sure my syntax with the Json is correct so I'm just gonna put some spaces in make it a bit clearer uh in that um so I can say um uh you are a um a uh you are a personal assistant in a software development agency uh right the following email okay and then in this is where I could put in my user uh provide the content so um you could put in uh I need an email to send to a warm lead asking if they still require uh services uh right I think that's ready to test the last bit I need is my open AI um API key so I'll do that by going into my opening account and then API keys and I generate a new secret key I'm going to be deleting this before I publish this video but copy that onto clipboard and then uh into Bearer here and then I think we're ready to test uh so I initialize the cool and that's good we get a response there are no errors here and we can see that open AI has returned this response so subject checking in with your software development needs uh dear client's name I hope sorry I hope this email finds you well I mean that's perfect that's amazing that's what is so uh fantastic about uh open AI so how do I go about saving this into my bubble app so now I've initialized it through um the API connector I can say uh uh generate text with chat GPT there we go um and uh if I go onto a blank page I could add in uh the multi-line input because that's going to be my user input and then uh uh or shower saver or shot put in the custom State let's let's save it this time around um so I'm going to have a button um and then if I go back into plugins and then the API connector the part that I want to be able to fill in in my workflow I need to make that um a dynamic value and I can do that in bubble by using triangle brackets and so I can call this user prompt and then it's not private it needs to be part of my workflow so I uncheck that uh and so when my button is clicked uh I am going to make my API cool so this is my openai V2 generate text with chat GPT and then my prompt is the multi-line input uh and then I'm Gonna Save it so I can create a new thing and I'm going to say uh call this an email template let's call this uh I'll just call this raw output and the reason I'm doing that is because uh when we did the test in this initialization we saw that open AI Returns the subject and the body all it's basically it's not strictly unformatted text but it's kind of all just part of one big text blob um and we've got some videos about how to um insert you search for split by um Bubble offers an ability to split up text if you know how to use it check out our videos on that but for now I'm just going to save it as one Big Blob of text um so what do I save I go into a result of Step One and then choices it's called choices because you can um instruct uh open AI to return more than one version of your prompt but in this case we're just asking for one so we can go first item message content um now we need a way of displaying that so uh I'm going to add in a group and put some text in the group and so the group is going to be of type email template this is just so I can display one email template and I leave the data source blank because I'm going to be filling that in in the workflow but the text is going to be parent group's email template raw output um I'm gonna just swap it out fixed so that the formatting oh I'm building up my demo app here is so old that it is using the old just once mentioned okay I'll leave it as it is for now um it's still going to work in order to test this so we'll call this uh generate email uh and uh when the buttons clicked we send the request open AI we create a new email template and then we need to display our email template um and so I display this into my group here uh group email template or template and I display the results of step two because that's where I've created an entry in my database um right I would say we're about ready to test that so this time uh I will shall say uh thank the client for uh paying an invoice on time and then generate and so the loading is it sending to open Ai and then we get this response from openai and just isn't that amazing and remember this costs um is 10 times 10 times less rather the cost of sending requests with DaVinci um version three so you can just generate um responses like this which you know could have rounded up could have got quite costs at one point but you can get them sent back to you from openr from open AI for less than a cent um so there we have it that is how you can incorporate the true power of chat GPT into your bubble app by well it's no code but we have to use a little bit of Json um and uh yeah you can use this power in your bubble app uh and really go any direction your imagination takes you with it foreign [Music]

Channel: PlanetNoCode

Views: 14,412

Keywords: bubble, tutorial, saas, bubbletutorial, nocode, startup, entrepreneur, webapp

Id: 2asnepkQ_-I

Length: 11min 35sec (695 seconds)

Published: Thu Mar 02 2023