How to create a ChatGPT app with no code using Bubble.io

OpenAI's ChatGPT API Release

Yesterday, March 1st, 2023 was the day that OpenAI released the ChatGPT API. That means that for the first time you can use the amazing advancements we got with ChatGPT 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 it is that before March 1st, any web apps or mobile apps that we're using, OpenAI's text generation, we're using this davinci-003 but now we can use GPT 3.5 Turbo and it is 10% cheaper than davinci-003. So this is just a huge advancement in what is possible, what you can do on a budget with OpenAI and with text generation.

Setting Up OpenAI in Bubble

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 OpenAI already added but I'm going to add it again for the purpose of this tutorial so that we go through every single step. I'll just call this OpenAI v2 and then I know I have to authenticate it in the header. Basically I am interpreting what OpenAI 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 copy it into there and I remove the colon Bubble as in automatically. This is just a form for building up that like code if that's the word coded expression that's better word.

Configuring the API Call

What else do I need? I need to choose a model and 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 davinci-003, this is kind of where it requires a slightly different prompt. So I'm sending data to OpenAI so I change it to post. I change this to action so that I can access this in a workflow and then what else do I need? Okay let's just look at what it means. I need the endpoint. There we go, copy that. Let's just take a moment to understand what's going on here 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 chat.openai.com. You can build that in Bubble and part of that is being able to keep track of your conversation history which you're passing back and forth with OpenAI.

Understanding the Message Structure

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 basically structure this so that you can break apart bits of your prompt and then make it much more conversational. So this is basically where you put your prime or your primer for your prompts such as "UI Helpful Assistant" and then this is where you could put the input from your user. So I'm just going to copy this bit here and paste it into here and then I need to make sure my syntax for the JSON is correct. So I'm just going to put some spaces in, make it a bit clearer, indent that. So I can say "You are a personal assistant in a software development agency. Write the following email." Okay and then this is where I could put in my user, provide the content. So you could put in "I need an email to send to a warm lead asking if they still require our services."

Testing the API Call

Right, I think that's ready to test. The last bit I need is my OpenAI API key. So I do that by going into my OpenAI 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 into bearer here and then I think we're ready to test. So initialize the call and that's good we get a response. There are no errors here and we can see that OpenAI has returned this response. So subject checking in with your software development needs. "Dear client's name, I hope this email finds you wrong." I mean that's perfect, that's amazing, that's what is so fantastic about OpenAI.

Implementing in Bubble Workflow

So how do I go about saving this into my Bubble app? So now I've initialized it through the API connector. I can say generate text with ChatGPT. There we go and if I go onto a blank page I could add in a multi-line input because that's going to be my user input and then or should I save it or should I put it in a custom state? Let's save it this time around. So I'm going to have a button 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 a dynamic value. Well 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.

Creating the Workflow

And so when my button is clicked I am going to make my API call. So this is my OpenAI v2 generate text with ChatGPT and then my prompt is the multi-line input and then I'm going to save it. So I can create a new thing and I'm going to call this an email template and call this... I'll just call this raw output and the reason I'm doing that is because when we did the test initialization we saw that OpenAI returns the subject and the body... it's basically it's not strictly unformatted text but it's kind of all just part of one big text blob and we've got some videos about how to... you search for split by Bubble officer and 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.

Displaying the Result

So what do I save? I go into result of step one and then choices. It's called choices because you can instruct OpenAI 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. Now we need a way of displaying that so 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 groups email template raw output. I'm going to just swap it out fixed so that the formatting... oh I'm building it up! My demo app here is so old that it is using the old just once menu. Okay I'll leave it as it is for now. It's still going to work in order to test this so we'll call this generate email and when the button's clicked we send the request to OpenAI, we create a new email template and then we need to display our email template and so I display this into my group here, group email template and I display the results of step two because that's where I've created an entry in my database.

Testing the Final Implementation

Right I would say we're about ready to test that. So this time I will shall say thank the client for paying an invoice on time. And then generate. So the loading is it sending to OpenAI and then we get this response from OpenAI and just isn't that amazing and remember this cost is 10 times less rather the cost of sending request with davinci-003. So you can just generate responses like this which could have rounded up could have got quite cost at one point but you can get them sent back to you from OpenAI for less than a cent. So there we have it that is how you can incorporate the true power of ChatGPT into your Bubble app by well it's no code but we have to use a little bit of JSON and yeah you can use this power in your Bubble app and really go any direction your imagination takes you with it.