Yesterday, March 1, 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. Before any before March 1, any web apps that were or mobile apps that were using OpenAI's text generation, we're using this, davinci-003.
Why gpt-3.5-turbo (ChatGPT) is better than davinci-003
But now we can use GPT 3.5 turbo (gpt-3.5-turbo) and it is 10 times 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.
So how do you put this in a 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.
Bubble API Connector
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 down to the headers and so that's content type application json.
And then watch carefully what I do, I copy it into there and I remove the code on Bubble add set in automatically. This is just a form for building up that like word coded expression. 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.
How gpt-3.5-turbo (ChatGPT) is different to davinci-003
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. So just to understand this a little bit more, if we go on to the documentation, we can see that a message contains a role from system and content.
Structuring your GPT-3.5 prompt
So this is where you can they've basically structured 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 "You are a 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 of 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 provided content. So you could put in I need an email to send to a warm lead asking if they still require our services.
Finding your OpenAI API key
Right, I think that's ready to test. 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 initialise 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 clients, name I hope sorry, I hope this email finds you well.
I know, it's perfect. That's amazing. That's what is so fantastic about Open AI.
So how do I go about saving this into my Bubble app? So now I've initialised 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 multiline input because that's going to be my user input.
Saving the response from ChatGPT
Or shall 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. 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 and so when my button is clicked, I am going to make my API call. So this is my OpenAI V2. Two generate text with ChatGPT. And then my prompt is the multiline 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, 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 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 was split by 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.
So what do I save? I go into results 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.
Displaying the ChatGPT response in a group
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 group's email template, raw output.
I'm going to just swap it out fixed so that the formatting I'm building up. My demo app here is so old that it is using the old responsive engine. 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 is clicked, we send the request to open AI. 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. Right, I would say we're about ready to test that.
So this time I will shall say thank the clients for paying an invoice on time and then generate so the loading is it sends to OpenAI and then we get this response from OpenAI and just isn't that amazing?
Wrap up
And remember this cost is ten times less, rather the cost of sending requests with davinci-003. So you can just generate responses like this which could have added up, could have got quite costs 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. You can use this power in your Bubble app and really go any direction your imagination takes you with it.
