In this Bubble tutorial we demonstrate how to use the new OpenAI JSON mode. Any Bubble app creator using OpenAI in their Bubble app will benefit from this tutorial because JSON mod returns a much more reliably formatted message reply from OpenAI.

Introduction to OpenAI Integration with Bubble

If you're building a Bubble app that uses OpenAI text generation to give a chat GPT like experience to your users then this video is for you because I'm going to be addressing one of the key irritations, frustrations, things that waste endless time when trying to get OpenAI to work with Bubble and that is getting a reliably structured response back and that's become a whole lot easier with the latest updates to the OpenAI API including JSON mode.

OpenAI API Updates and Bubble Tutorial

In this Bubble tutorial video I'm going to be dialing in to that but before I do you should check out our website slash mastery because we are setting up for an exclusive mentorship program to take you from an idea to a fully fledged SaaS application with experts, plenty of help, more details can be found at but let's dive into this tutorial here.

Understanding JSON Mode in OpenAI

JSON mode basically affects the format of the response that comes back from OpenAI and I've got that set up in the API connector here. Now I'm jumping in a little bit into the deep end this will require some background knowledge on how the OpenAI API works. We've got plenty of videos on that so do go and check out our library if you're unsure how to get to this point but effectively all I've done is taken a normal OpenAI API call and made sure that I'm using one of the latest models where I've got that from is... where did I get that from? It is... yeah here here so I've got to be using one of the models that supports it because JSON mode is brand new so make sure you're using one of those supporting models and then I've added this type JSON object as a response format parameter into the API call and I've got a demo here and it's basically saying you are a movie recommendation bot to reply with just a JSON object.

Working with JSON in Bubble and OpenAI

Now it's important that you instruct the system or at least in somewhere in your messages you say it has to reply in JSON and then I say using the following parameters title direct recommendation reason and then I say I love Inception please recommend the similar film and why. Let's get rid of this response here and initialize the call and have a look at exactly what format we get back.

Interpreting the JSON Response

So we get... okay so we do get it back in JSON and it's broken up by line there. Now that's not great for my demonstration because actually that is a really helpful response. Perhaps let me let me demonstrate if we just say reply with the following parameters. Basically what I'm trying to demonstrate is in a way to dictate a set format that comes back and I've not done that very well so far I'm honest but let's let's try this so this is perhaps so you could start with okay yeah so there's no JSON in the content here it is simply using a line break so you have title, memento, one line and then backslash n means line break and in all of the previous Bubble and OpenAI tutorial videos that I've done so far this is basically as good as you could get and I was instructing people to use the split by so split by line space or split by title colon space will enable you to separate out the title and save it into a field.

Using JSON Mode for Better Response Extraction

Now I'll demonstrate how to use JSON mode to extract specific data without manually splitting elements. Let me explain the process. By instructing it to reply with a JSON object and setting the response format, I can obtain the raw data in JSON format. However, Bubble treats it as plain text due to the presence of escaped characters. To overcome this, I found a solution in the plugin directory. I installed a plugin called JSON Manipulator, which allows me to target specific parameters in the workflow. I set up the parameters by listing them out, and the plugin recognizes and includes them in the response. Then, I create a movie item in my database using the extracted data. This method eliminates the need for manual splitting. If you have any questions or thoughts, please leave a comment below. If you need assistance with Bubble, visit the website mentioned for tutorials and coaching support.