Using JSON-safe with Bubble.io and the OpenAI API

Introduction to JSON-safe Formatting in Bubble.io

We've had a lot of great responses from our ChatGPT chatbot video and quite a few questions around using the API connection 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 and this forms a good follow-up video to our ChatGPT chatbot video.

Demonstrating JSON-safe Formatting

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. Diving in with this, if I look at the multi-line 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. If I start putting some punctuation elements into the multi-line text input here, it formats those in a JSON safe way.

Understanding JSON Formatting

In many instances, the term kind of from traditional coding is that it escapes punctuation. This is where the problem is introduced: the format that OpenAI expects for their API text generator is JSON like this. You have a number of different fields or parameters here, and they're all kind of a combination of a label in speech marks and then the data to go along with that label. You also have arrays here so you can list more than one element.

The Importance of Proper JSON Syntax

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.

Using JSON-safe Formatting in Practice

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". You can see that Bubble has done a number of really helpful things here. It has added the backslash n to symbolize the two line spaces I've got, and it adds a backslash before the speech marks which are to be treated as speech marks and are not to be misinterpreted as speech marks within JSON.

Modifying the Initial Workflow

This allows me to modify my initial workflow. Again, if you're unsure about any of this, go and check out the full video. I want to change this here to JSON formatted as JSON safe, but I also (and this is where I've seen and it's 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.

Testing the Modified Workflow

Now let's test it. 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.

Reviewing the API Response

We're waiting for a response from OpenAI and there we go, we've got our response back. I've not got an error, nothing has popped up as a browser prompt saying that OpenAI's API has returned an error.

Examining the Database

Perhaps this is something that I should have included in my initial video to make it an even better demonstration. I just wanted to demonstrate to you how JSON formatted as JSON safe can solve a lot of your problems with JSON syntax and then also how to use that properly with Bubble. If I go into the database, I can just show you what's going on there with I think it's messages here.

Verifying JSON Syntax in the API Connector

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

Troubleshooting JSON 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 saved correctly, and that there aren't any issues with it. I would also check what you've got in this box here, that you've not got a comment out of place. Simplify all the way down to the bare essentials, get it working, and then begin to add in extra parameters, extra messages.

Conclusion and Further Assistance

If you've got a question about using the OpenAI API Bubble, leave it in the comments. We read every single one of them.