Build a nocode AI social media post generator in 10 mins

Creating an AI Social Media Post Generator with Bubble

Here's how to create an AI social media post generator using Bubble in less than 10 minutes. This is a completely no-code app that we're making and I've got some simple elements on the page. I've got myself a title, I've got a dropdown 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.

Setting Up the OpenAI API Connector

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 ChatGPT 3.5 Turbo API as our means of generating text. To do that I need to go into plugins and I'm going to add in a new plugin. I'm going to say OpenAI version 2 and then I'm going to add in an API call just here and I shall say generate social media posts.

Configuring the API Call

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. Basically, I need to translate the example that OpenAI gives us here in chat completion documentation and I need to translate that into Bubble. The endpoint I can see is here so I'm going to copy that, paste it into that. I can then see that there's a couple of shared headers and so one of those is to say content type application JSON and then the other one is authorization.

Setting Up Authentication

I'm going to put that as private key in header and so Bubble automatically populates the name as authorization for us. Then I need to go into my OpenAI account and generate a new secret key. I'll be deleting this 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 as I'm going to use it in both the dev version and the live version of my app.

Crafting the API Request 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. The model that's the type of AI text generation that I want to use so I'm going to use 3.5 turbo as 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.

Defining the AI's Behavior

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 kind of 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.

Creating the User Prompt

If I go back to my design I'm not offering the opportunity for the user to engage in this in like 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. So go back into plugins I'm going to start to write out my prompt and so I'm going to say write 5 social media posts 4 and then I'm going to insert a dynamic value so 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.

Testing the API Call

Okay I'm going to untick private on each of these so they are fields that I could fill in in the workflow and 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 formatted the JSON here. So I'm going to test this and then just write Facebook in here and I'm going to say Bubble. Oh no code in fact. Right let's initialize the call. So we're waiting on OpenAI to return a response.

Displaying the Generated Content

Here we go and I can go into raw data and right so this is the content that's been returned and for some reason I've done this while I'm working on side projects to do a social media post as well but for some reason OpenAI loves to put a load using social media posts but yeah you can see that it's worked so I'm going to click save.

Setting Up the Workflow

Then let's go back over to design because now we need to wire up our form so that we can create our chat GPT form. So on submit we're going to 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 dropdown which is dropdown A which is my social media platforms and then my topic field.

Using Custom States to Store Data

Now I need a way of displaying the content and I'm going to do that with a custom state. 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 like lose it.

Setting Up the Custom State

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 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 without 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.

Displaying the AI Response

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 think you could get a lot more out of OpenAI with a better prompt but I've 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.

Potential Issues and Considerations

Now 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 so it's all values that you're defining you don't need to worry about it but yeah that's just something I wanted to point out.

Conclusion and Next Steps

If you've got any questions or any ideas of how you could use OpenAI with building a no-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 slash OpenAI.