Ask a question
Here's how to create an AI social media post generator using Bubble in less than 10 minutes. So this is a completely no code app that we're making.
I've got some simple elements on the page. I've got myself a title, I've got a drop down to select different social media platforms. I've then got a text input for a topic, a submit button, and somewhere I'm going to display the output. So we need to dive right into the Bubble API connector in order to establish that connection with OpenAI, as we'll be using the OpenAI chat GPT 3.5 turbo API as our means of generating text.
Bubble API Connector
So to do that, I need to go into plugins, and I'm going to add in a new plugin. This was from a previous tutorial, but I'm going to go over every step right here. So I'm going to say OpenAI version 2, and then I'm going to add in an API call, just there. And I shall say generate social media posts. I'm going to change this to action so that I can access this in the workflow as a workflow action. And then I'm going to change this to post.
And basically, I need to translate the example that OpenAI give us here in chat completion documentation, and I need to translate that into Bubble. So the end point I can see is here. So I'm going to copy that, paste into there. I can then see that there's a couple of shared headers. One of those is to say content type application/json. And then the other one is authorization. So I'm going to put that as private key in header. And so Bubble automatically populates the name as authorization for us. And then I need to go into my OpenAI account and generate a new secret key. And I'll be deleting this. And after this demo. Copy and paste into there. Make sure you notice that you have to write bearer and space before the key. So we write that in there. I can leave development key empty, so I'm going to use it in both the Dev version and the live version of my app.
Formatting the JSON data/body
Right, then I need to start writing the expression, the body content, which I can see here. So I'm going to copy this part and paste it in. So the model, that's the model, the type of API AI text generation that I want to use. So I'm going to use gpt-3.5-turbo, so that's the quickest and one of the cheapest. You could, of course, use GPT 4 now because GPT 4 is now more publicly available to everyone.
But for now, I'm just going to separate out these two so that it's really clear. We basically have got two messages loaded in here. We've got one for system and one for user. And so the system message is basically a way to set the occupation or to define to the AI how they should behave. So in this case, we're going to say, You are a social media copywriter. And then the user, this is where we're going to dynamically insert the parts of the form that the user fills out. So if I go back to my design, I'm not offering the opportunity for the user to engage in this in a full chat experience. I'm providing a form and using a form with ChatGPT with the OpenAI API to generate social media content. So I have a topic field and I have a social media platform field.
Initializing the OpenAI API call
So go back into plugins, I'm going to start to write out my prompt. And so I'm going to say, Write five social media posts for, and then I'm going to insert a dynamic value so that I can insert content into this. I'm going to call this social media platform about the topic, and then I'm going to insert topic. And make the posts highly engaging. I'm going to untick private on each of these so that they are fields that I could fill in in the workflow. I need to initialize the call. And that's just a good way of checking to see if I've made any mistakes in how I've formatted the JSON here. So I'm going to test this. I'm going to just write Facebook in here and I'm going to say Bubble. Bubble no code, in fact. Right, let's initialize the call.
So we're waiting on OpenAI to return a response. Here we go. And I can go into raw data. Right. So this is the content that's been returned. Now, for some reason, and I've done this, well, I'm working on a side project to do a social media post as well. But for some reason, OpenAI loves to put a load of use in social media posts.
Adding in our front-end form to OpenAI
But yeah, you can see that it's worked. So I'm going to click Save. Then let's go back over to design because now we need to wire up our form so that we can create our chatGPT form. So on submit, we're going to create create an action and this is going to be my API call here, OpenAI version 2 Generate Social Media Posts. And then I'm going to link these up to my drop down, which is drop down A, which is my social media platforms, and then my topic field. Just a quick note, notice that these fields, if I go back to plug in and I say that they're private, I'm not going to have access to those fields. That's what it means by private. The data is not being passed into the front end across the user. So I had to make them public. I'm just checking they're still there.
Displaying the OpenAI response in a Custom State
Right, now I need a way of displaying the content, and I'm going to do that with a custom state. So you can create a custom state, and a custom state is a temporary store of data. It's temporary because if the page is refreshed, it gets lost. It isn't saved to the database. And you can create a custom state on any element on the page, really. So it makes sense to do it somewhere logical, somewhere you're not going to lose it.
So I'll just create, often, my custom states on the page itself, like the page body. And so I'll call this AI Response of type Text. And then that allows me to my workflow, set state, choose my page, choose the custom state, and then then insert the results of the OpenAI API call. And that's going to be choices. First item, the reason that choices is a list is because you can, with different values in your OpenAI call, you can say return with more than one value, more than one version of a response. But we're just asking for one response. And so that one response is the first one, then message content. Then lastly, I just need to make my text area here filled with the custom state. So find my custom state, api response. Right, let's preview that.
So let's try LinkedIn. Just out of interest, maybe it's going to make them neater. Maybe there'll be less emojis, I don't know, for a more professional platform like LinkedIn.
Let's see. Click submit. We're waiting for the OpenAI API to respond now. There we go. So there's still emojis, even if I've chosen LinkedIn. But you can see that here's generated some fairly decent social media posts about Bubble. Now, my prompt is very basic. I'm going to think you could get a lot more out of OpenAI with a better prompt. But I just wanted to give you a quick demonstration here of how to create a form that inputs data into OpenAI and into a prompt that you've created.
Warning about JSON syntax errors & API calls
Now, before before signing off, I'm going to just point out one thing that could be very easy to trip up here, which is that what is entered into this free form field could create a JSON syntax error. What I mean by that is if a user enters particular punctuation, that's going to be put into my call without any protection, the technical term being escaping the punctuation. So that's something to look out for. It's not going to be a problem if your form doesn't have any open ended fields. If it's all dropdowns, if it's all values that you are defining, you don't need to worry about it.
But yeah, that's just something I wanted to point out. If you've got any questions or any ideas of how you could use OpenAI with building a Node code app with Bubble, please leave a comment below. If you want to reach out to us, you could do so through the website. You can ask questions. We can set you up with a one to one session with a Bubble coach like myself. Yeah, there we go. How to create a form that feeds data into chatGPT OpenAI.