Chances are if you've been adding AI to your Bubble app using OpenAI, and you've been using the OpenAI API and the Bubble API connector, you will have experienced an error like this, HTTP-400.

Why OpenAI Error 400 occurs

There are a number of different reasons why this can occur, but the chances are, and the most common reason, is that the JSON that you've been providing is causing a syntax error. And that is because there's likely some punctuation in there, probably that a user has entered in into one of your fields. I'm going to demonstrate it here in this demo app, which is causing the OpenAI API to be unable to read the code properly, and that's where you get this error, HTTP 400. In this Bubble tutorial video, I'm going to show you how you can fix this, how you will not need to tell your users don't include speech marks, how you can make sure that whatever your users enter, it is formatted in a correct way, a safe way, so that the OpenAI API can respond and you can get your app running without getting nasty errors like this.

Discover more Bubble tutorials

But before I launch into that, did you know that we've got over 160 Bubble tutorial videos that you can find on our website, planetnocode.com. You can find videos there that you cannot find on YouTube, and you can access all of them by becoming a member today.

Bubble API Connector

So let me show you how we can fix this. First of all, I'm just going to show in the API Connector that I've got a very simple prompt set up. If any of this looks alien to you or we need a recap, check out some of our earlier videos on OpenAI and Bubble, and you can find out how to build all of this in there.

Using JSON-safe

But I've just got this dynamic field here message, and you'll notice that I don't have any speech marks around it, and that's because I'm going to be using the JSON safe modify in Bubble. And that is a fantastic tool that Bubble provides that enables you to Bubble will format your text in a way that isn't going to cause JSON syntax error. Now, the issue, the frustration with JSON safe is that it puts speech marks around the content. So if you've got multiple fields in your call, such as, I'll show you why mine is breaking at the moment, this is my call to OpenAI. I'm getting an error because I've got speech marks in the content here. I'm also getting an error because I need to surround it by speech marks, but that's still introducing speech marks that aren't, and the coded term here is escaped or made safe. I could here go JSON safe, but this isn't actually going to help because although it's going to wrap the content of my dropdown here, it's not going to help because although it's going to escape any punctuation that will cause errors in the content, it's going to also wrap in speech marks, which is going to make the whole message here not JSON safe itself.

Arbitrary text

So instead of doing it like that, I can use arbitrary text. I'm going to clear all of this out. And to wrap the whole thing in JSON safe, this is what I do. I get arbitrary text, and I start writing my prompt. Write three social media posts for, and then I put in my platform dropdown. And yeah, I can control that. I can make sure that there aren't any speech marks in it. But what I can't control is on the topic of I have an input field here for my user, text input.

And so they could write anything they wanted it. They could copy and paste content from another website, and it could contain all sorts of symbols and punctuation that would cause that error, HTTP 400. I'll link in my field here, topic, value, put full stop. And then I can make all of this JSON safe. So if I go back to my example here, I'll say let's go for Twitter. And I'll say, Enter a topic. Which is better? And there's no good reason for me to put this in speech marks, but I'm simply introducing speech marks to illustrate how it now works with speech marks. Which is better? Wordpress or Bubble.io? Question mark. Tons of punctuation in there. Let's see if it runs without error. There you go.

Conclusion

That is how you can include speech marks and punctuation in the content that your users fill into a form that you pass over to OpenAI. That is how you ensure that all of the content that goes to OpenAI can be JSON-safe, and it's as simple as using arbitrary text.