We've had a lot of great responses from our ChatGPT chat bot video, and quite a few questions around using the API Connection in Bubble and JSON-safe, and JSON syntax. So I want to create a video showing how to use the text modifier formatted as JSON-safe.
Understand JSON-safe
And this forms a good follow up video to our ChatGPT chatbot video. So to demonstrate it, I'm just going to add a text label here. To understand everything that I've built here, check out our ChatGPT chatbot video. But diving in with this, if I look at the multiline input value, and then I say formatted as JSON-safe, and then we preview that, you'll see that as I start to type, it puts everything within speech marks.
Then if I start putting some punctuation elements into the multi line text input here, it formats those in a JSON-safe way. In many instances, the term, from traditional coding, is that it escapes punctuation. That if we look at the this is where the problem is introduced is that the format that OpenAI expects for their API text generator is JSON like this. And you have a number of different fields or parameters here, and they're all a combination of a label in speech marks and then the data to go along with that label.
And then you also have arrays, et cetera here, so you can list more than one element. But the point is that you can't just go around putting speech marks anywhere you like in JSON or commas outside of speech marks anywhere you like, because you will get a syntax error, you'll get an error back from the API. And so using formatted as JSON-safe is one way to get around that.
Example of escaped JSON
Let's illustrate that here by saying, well, sometimes I do want to send speech marks to OpenAI because it might be a way of highlighting... You could have a summarize this text, and you'll want to send a colon, and you'll also want to send some speech marks, hello world. Okay? And so you can see that Bubble has done a number of really helpful things here. It has added the back \n to symbolize the two line spaces I've got. And it adds a back slash before the speech marks, which are to be treated as speech marks and are not to be misinterpreted as speech marks within JSON.
So this allows me to modify my initial workflow. Again, if you're unsure about any of this, go and check out the full video. But I want to change this here to JSON Formatting as JSON-safe. But I also, and this is where I've seen and caused me a number of headaches in the past, it gives you the speech marks. So at the moment, I'm going to get double speech marks here. So I changed that and I remove that. Now, test it.
Demoing Bubble JSON-safe
So what could I have as a good follow up to this conversation going on here? I could say, tell me five facts about. And then there's not a good reason to do this, but to demonstrate that the speech marks are made, JSON-safe, I'm just going to put the Shard in speech marks. And let's have a go. So we're waiting for a response from OpenAI. And there we go.
We've got our response back. And I've not got an error. Nothing has popped up as a browser prompt saying that OpenAI's API has returned an error. So perhaps this is something that I should have included in my initial video to make an even better demonstration. But I just wanted to demonstrate to you how, first of all, formatted as JSON-safe can solve a lot of your problems with JSON syntax, and then also how to use that properly with Bubble.
So if I go into the database, I can just show you what I what's going on there with... I think it's messages here. So the JSON that I sent is here, and you can see that it escapes the speech marks around the Shard, but it puts in the speech marks needed to indicate what is the content. And so then if I go back into the API connector, we can see that as a message to go in my messages, it's all correct. There are no syntax errors. If you are getting additional syntax errors, do go into your database, check that your punctuation is being escaped, check that you've got formatted as JSON safe correctly, and that there aren't any issues with it. And then I would also check what you've got in this box here that you've not got a comma out of place.
Simplify it all the way down to the bare essentials, get it working, and then begin to add in extra parameters, extra messages. If you've got a question about using the OpenAI API Bubble, leave it in the comments. We read every single one of them.