Introduction to OpenAI and JSON Mode
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. That's become a whole lot easier with the latest updates to the OpenAI API including JSON mode and in this Bubble tutorial video I'm going to be diving into that.
Exclusive Mentorship Program
Before I do, you should check out our website planetnocode.com/mastery because we are setting up an exclusive mentorship program to take you from an idea to a fully fledged SaaS application with experts. Plenty of help and more details can be found at planetnocode.com/mastery but let's dive into this tutorial here.
Understanding JSON Mode in OpenAI API
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.
Setting Up the OpenAI API Call
Effectively all I've done is taken a normal OpenAI API call and made sure that I'm using one of the latest models. 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 supported models. Then I've added this type JSON object as a response format parameter into the API call.
Demonstrating JSON Mode
I've got a demo here and it's basically saying you are a movie recommendation bot to reply with just the JSON object. Now it's important that you instruct this the system or at least somewhere in your messages you say it has to reply in JSON. Then I say using the following parameters: title, director, recommendation reason and then I say "I love Inception please recommend a similar film and why".
Analyzing the API Response
Let's get rid of this response here and initialize the call and have a look at exactly what format we get back. So we do get it back in JSON and it's broken up by line there. Now that's not going for my demonstration because actually that is a really helpful response.
Refining the API Request
Perhaps let me demonstrate if we just say reply with the following parameters. Basically what I'm trying to demonstrate is 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 try this.
Comparing JSON Mode to Previous Methods
So this is perhaps where you could start with. Yeah, so there's no JSON in the content here, it is simply using a line break. So you have title Memento on one line and then backslash n means line break. 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.
Using Split By for Data Extraction
Split by line space or split by title colon space will enable you to separate out the title and save it into a field. Now I'm going to demonstrate how you can use JSON mode to ensure that you extract only the exact point you mean without having to do all the split by elements.
Implementing JSON Mode in Bubble
Let me just put back in what I had. So I'm extracting it to reply with a JSON object and I'm going to put back in the response format. Now if I initialize the call and look at the raw data I get back a lovely bit of JSON. However, Bubble will not allow me in the API connector - if anyone's got a workaround for this leave a comment below, I'd love to hear it - but the fact is that Bubble still treats this as plain text because it's got all of these escaped characters in it.
Challenges with JSON in Bubble
So I can't just go up here and say message content and it's not picking up that it is a JSON object and so I can't target the exact fields here. I scratched my head a bit on this and looked through the plugin directory and I found a solution.
Using the JSON Manipulator Plugin
Let me show you what I've got. So I've got on my design page, I've simply got a button that runs that API call. I'm not even bothering to change that. I might the fulfillment I love is Inception. I'm simply running my API call here saying I love Inception please recommend a similar film and then I've installed a plugin called JSON manipulator and that enables me in the workflow to say take the result and target a specific parameter.
Setting Up Parameters for JSON Extraction
Now where am I setting up these parameters because I need to target them precisely? Well, I'm setting them up because I'm listing them out here and OpenAI is clever enough to identify them and put them into the response. So I basically got one targeting the title, targeting the director, and targeting recommended reason.
Saving Extracted Data to Database
Then I can create my movie item in my database and I can say results step 2 which is the title, step 3 which is the director, and step 4 which is the why. Then if I run my app it's really quick and if I go into my database and my movies you can see here that it's added it in and it's all perfectly matched up.
Advantages of JSON Mode Over Split By
This I would say is a better method than having to do split by. I mean we've got plenty of split by videos with OpenAI available and I'm sure there are still use cases for that but you want something that is reliable to your users and I don't think you can get more reliable than dictating the JSON structure that is replied, extracting out the different parts as I've shown using the JSON manipulator plug-in and then saving it to your database.
Conclusion and Further Resources
So there you go. If you got any questions on this or you've got any thoughts, maybe this is all brand new - I mean OpenAI only set out these updates a few days ago - if there's a better way to do this leave a comment below. If you'd like to see any videos on other Bubble topics or OpenAI, whatever, leave a comment below. We read every single one.
If you're learning Bubble there's no better place to go than planetnocode.com where you can find hundreds of Bubble tutorial videos, even more than we've got on YouTube. If you are stuck you can reach out to me directly and we can set up a one-to-one Bubble coaching call and work through your Bubble app together, collaborating, smoothing out your development process and accelerating the launch of your app.