How to fix the OpenAI Error HTTP 400 in Bubble.io

Understanding the HTTP 400 Error in Bubble.io

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. 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. This is because there's likely some punctuation in there, probably that a user has entered 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.

Fixing the Error: A Step-by-Step Guide

In this Bubble tutorial video, I'm going to show you how you can fix this. You will not need to tell your users don't include speech marks. I'll show you how you can make sure that whatever your users enter 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.

Accessing More Bubble Tutorials

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.

Demonstrating the Solution

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. I've just got this dynamic field here 'message' and you'll notice that I don't have any speech marks around it. That's because I'm going to be using the JSON safe modifier in Bubble and that is a fantastic tool that Bubble provides that enables you to format your text in a way that isn't going to cause JSON syntax error.

Understanding the JSON Safe Modifier

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.

Implementing the Solution

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

Instead of doing it like that, I can use arbitrary text. So 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. 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 want in there. 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.

Testing the Solution

So I'll link in my field here topic value, put full stop and then I can make all of this JSON safe. If I go back to my example here, I'll say let's go for Twitter and I'll say enter topic "which is better". 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?" Okay, 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.