OpenAI's Structured Output Update
Yesterday we released a video showing how you can use Claude from Anthropic to get a structured JSON response of AI generated data back into your Bubble app. So you can imagine my excitement when I saw overnight that OpenAI appear to have done basically the same thing. They are reforming their JSON mode and saying this is structured outputs from the API. Now before I go any further, I don't like clickbait titles. I'm just going to say it doesn't work in Bubble still.
Demonstrating the Issue in Bubble
And let me, let me just go ahead and demo that right away for you. So here I have in my Bubble app, I'm going to give a bit of an explanation after this demo. So do stick around for that. But here I go. I'm just saying like here's a bit about me and then here's some JSON structuring to say extract details from it.
And I initialize the call. And this is the sad bit, it still returns it within text. So this is part the format that OpenAI responding in part a lack of features here from Bubble, which is the ability to say hey, this is JSON. Let's interpret it as JSON. Now if you have got OpenAI deeply ingrained into your Bubble app, as is the case with many of the Bubble coaching students I speak to, you can use a plugin to basically say key name of name and then take out the value.
Comparing with Claude's Performance
You can do that, but it's adding in a really frustrating additional step. The fact of the matter is, as of today, which is the 7 August, Claude still does better in this. And we'll put a link down in the description for our Claude video, because when you run a very similar prompt through Claude, you actually get Bubble detecting the different keys and parameters coming back based on the structure that you've decided. But I'm not going to, I don't want to have wasted my time preparing for this video. So I am going to explain exactly what's going on here, because it can be applied to the Claude video as well, which is if we go into the oh, I'm going to come back to that documentation.
Using AI to Format JSON
I don't think I'm the only one who really gets frustrated when they put a comma or a speech mark in the wrong place, when they're formatting their JSON and you get syntax error and it takes agents to debug it. I mean, you can just copy and paste it into like an online JSON format. It will tell you what line you've got mistake on. But what I found is the best approach, whether you're working with Claude or OpenAI, is to simply say, copy the structure and then to use your AI chat of choice. In this case.
Where's it gone? I'm using chat GPT, and so I've written the prompt saying here is a request, giving as much data as I can, saying here is an example. And then I say, wait, further instructions, but it goes ahead and writes it. But then I say, restructure it. And this is where I describe actually what I want it to extract.
Dealing with Apostrophe Escaping Issues
Now here's a warning, at least using the chat GPT version that I've got here, you can see that it's escaped the apostrophes there, but it hasn't escaped the apostrophes here. So actually when I copied and pasted this into my Bubble app, I've got an error in the API connector because the JSON wasn't properly formatted. So there you go. I'm saying here's an issue and it comes back and it still doesn't fix it. In fact, it just double escapes the punctuation in the user role message.
The Benefits of Using AI for JSON Formatting
So I go backwards and forwards with it. I pasted a few different examples. I did this because I still think that this is quicker than really wrestling of yourself, especially when you're. Yeah, I'm doing something simple here, I'm just extracting three different values and then an array at the end. But if you were, say, the example we've used in the past is a web scrape data from a job listing site.
You can, you could add in 610 20 different fields that you want extracted back. Some of them could be lists, some of them could be other data types. So it really does help to use an AI to write the JSON code for you. Just at least if you're using chat GPT, watch out for what it does with punctuation. So TLDR.
Conclusion: Claude Still Performs Better
Well, it's not TL, doctor, if you got to this point, it's still better to use Claude to get structured data back into Bubble. And you can click the link down in the description to find out more about how you can do that in Bubble, because we've got a full demo for you just there.