Claude’s "secret" JSON-mode

Claude's Secret JSON Mode

Did you know Claude has a secret JSON mode? Now, if you've been building AI powered no code apps in Bubble like me in recent weeks and months, you may have found that OpenAI has got a JSON mode, which means that you get JSON instead of like a chat conversation back from the messages text generation API. But if you've done that, you will also discover that that doesn't play that well with Bubble because it still returns the JSON as if it's text. So either you have to do an additional follow up API call, or you have to use a plugin to extract different keys parameters from the API. Now in this Bubble tutorial video, I'm going to demonstrate how actually you can make it so much simpler by using Anthropic's Claude, which is very similar to OpenAI.

Using Claude API with Bubble

If you've used OpenAI before, you can very easily get grips of the Claude API. But the biggest advantage with the Claude secret JSON mode is that it will reply in a format that gets detected by Bubble as JSON. So let's dive right into it with a really simple example. So I'm in the Bubble API connector. We've got plenty of videos that demonstrate how you can integrate in with the Claude or the OpenAI API on our website, and you can get that by clicking a link down in the description.

Setting Up a Simple Example

But right now I've got a very simple example of a message. I'm saying hi, I'm Matt, I live in the UK and I'm going to initialize this to make sure that there are no errors. And so at the moment I just get a chat based response back. Hi, nice to meet you. I'm an AI assistant, so let's add a few things.

Adding a System Prompt

First of all, we're going to add in a system prompt. So unlike OpenAI, system is not part of your threaded messages. It goes in as a parameter up top like this. And so I will say your job is to detect data in a chat. Okay, now here's where the magic comes in.

Using Tool Use or Function Calling Feature

We're going to be using the tool use or function calling feature in Claude. And if I'm honest, it took me a few minutes to get to grips with this, mainly because I'm terrible at ensuring the proper JSON syntax. You know, a missing comma here, missing closed brackets, you get an error, but here is the page that describes exactly what you need to do. And first of all, we're going to add in. Let's have a look for it.

Structuring the Tools Prompt

Where's an example?

Let's find an example here JSON mode. Oh, that's really complicated. Let's find a simple example up top. Right. I'm going to use this one.

So I'm going to copy this tool section into the Bubble API connector. Actually I'll put a comma there and paste it. Okay, let's just look at the different parts here. Oh, and a quick tip. I've actually found that by supplying an AI with an example.

So I use raycast, I've got Claude opus running in there as kind of my go to chat, helping me out. You can give that AI an example and say structure a tools prompt for me. And, and it's done it really well actually in the past. But let's just have a look at this. We'll say, we'll rename it because part of it is just giving it the clues as if you're speaking to a human.

Defining Properties for Data Extraction

So we'll say extract data and we'll say you're the script, get data from the user message. Okay? And then properties is where we're going to list the different parameters, the different keys that we're going to get back from the AI. So we're going to change location because remember this is for a weather one. So we'll change this instead to name and then we'll say identify, identify the username and then I'm just going to copy this bit here, making sure I put a comma in for proper JSON syntax.

Oops, I'll undo that, give myself some proper indentation, paste it in and I'll say country. And then I'm going to go a little bit wild here and add in another one. That's going to demonstrate the AI actually thinking for itself. So let's paste it in and this time I'll say currency. And I'll say using the user's country, the user country.

Suggest a currency. Okay, now I have to say what is required. And I've actually found that you have to be really, you have to require, otherwise it's going to miss things, it's going to overlook it. You have to really dictate, that's the word I'm looking for. Dictate what you get back.

Running the API Call

So here is where we list through the names of our parameters or our properties rather that we're requesting. So we'd say name and then we'll say country and then we'll say currency. Okay, I'm going to run this just to see what we get back. If I click out for a moment, the body seems to be a bit buggy. Let's just try that again.

So I'm still going to pass in the message here. In fact, I'll say message. And if I wanted to access this in the workflow, of course I'd untick private just like that and I'd make it JSON safe. So I'm putting all the speech marks so that I don't double speech mark it at this point here. And so I'll say I'm Matt and I am in the UK.

Analyzing the API Response

Okay, that's good. We don't get an error back straight away. Okay. And look, this is the thing, this is the thing that makes the Claude, the Anthropic Claude API superior, at least when working with Bubble. When you want to get structured JSON back to OpenAI is because we get back this structured data, we get back input name, input country and currency.

So I don't have to add in loads of steps where I use an additional plugin to extract data from the JSON. I can just have a workflow that saves the result here straight into my Bubble database. Now there's one other thing I want to show you because I mean that's worked perfectly, but let's go back here and we want to determine that. In fact, if we go JSON mode, JSON output, we want to determine that it has to respond with a, we want it to always use as a tool. We don't want the tool to be optional.

Ensuring JSON Output

So where's a good example of that? Here we go. So I'm going to copy this line and notice that it is the same level as messages.

I'm just going to paste it in here. And so now I just need to make sure that my tool name matches what I've got up here, which is extract data. Okay. Because a tool can be optional, a tool can reply within a chat message. We only want the JSON back, we don't want any chat.

So that's reinitialized. Check that there's no mistakes. That's good. Yep. Once more we get Matt, we get UK, and we get GBP for great british pounds.

Conclusion

So there you go. That's how you can use the secret JSON mode in Claude, and I've had a number of Bubble coaching calls over the last few weeks where I've worked with people and they've been using OpenAI and they've got OpenAI really quite deeply baked into the app and I'm wanting to extract specific data from the reply from OpenAI. And I've said to them, are you aware that Claude's tools will do a similar thing. And so here's why I'm sharing this video. If you like it, hit like and subscribe for more content just like this.