Build a nocode AI social media post generator in 10 mins
In this Bubble.io tutorial, we demonstrate how easy it is to create a social media post generator for facebook, twitter, instagram, youtube, etc. powered by OpenAI's ChatGPT model using the nocode app development platform Bubble.
Create an AI social media post generator: Learn how to build a no-code app that generates engaging content for multiple platforms in just 10 minutes!
Master Bubble's API connector: Discover how to integrate OpenAI's powerful ChatGPT API into your no-code projects for instant AI-powered features.
Elevate your form-building skills: Unlock the secrets of creating dynamic, AI-driven forms that seamlessly connect user input with custom states for enhanced functionality.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.