AI Web Scraping Structured Data: Claude Tools & JSON mode - Part 3

Structured Data with Claude AI

So here it is, structured data returned from Anthropic Claude AI model so that I can go through and easily save these fields into my Bubble app. Quick recap, I've built a web scraping no-code tool that combines AI so that I can provide a job listing page just like this one using UseScraper. I convert this into markdown, it's web scraped, and then I pass it on to Claude and Claude gives me back this structured response. So I've got the precise bits I want, a restructured date, reformatted the permanent contract term and the first value of the salary. There we go, 13,000.

Using Claude's Function Calling Tools

So how have I done this? Well before I launch into that, click the link down in the description if you want to learn more about building no-code apps with Bubble and you want to join a no-code community and you want to access hundreds of Bubble's tool videos just like this one from something much simpler beginner all the way through to quite advanced API work like this. But I really want to credit Baloshi69 who points me in the right direction on the Bubble forum, in fact responded to me in just a matter of minutes and his key find was that you can use Claude's tools, the function calling, in order to structure a JSON response.

Breaking Down the Prompt

Now I'm going to break it all down for you here. So let's go back and click Save and this is how my prompt has been updated. The main part of which is this tool section here and this tool choices and I'm going to take this copy it and paste it into JSON beautify because it's going to make it a bit easier to explain. I just need to make this actual JSON rather than a dynamic field. So let's remove that. Oh it's double bracket so I'll just say test and then I can beautify it. Okay so now it's going to allow me to... it shows it in a much more beautified tree of data so everything apart from this is normal.

Understanding the Tool Structure

Okay all of my previous videos using Claude or indeed even the OpenAI API is going to be very similar to this. You have your messages. That's what we've worked with so far. Now let's break this down. We say here is a tool and we give the tool a name and we give the tool a description and what you're trying to do here is in kind of natural language human readable terms describe to the AI what you want the tool to do. Now here's the real breakthrough was and I to be honest I I I spent probably 20 minutes and even using Raycast's command bar AI to query test really understand what was going on because if I'm honest I found the Claude... is it going to be under here? Where's it going to be? Start messages. I found that the Claude's tool section really quite hard to get my head around. But okay here we go. It expresses it there. That's basically what I'm basing this on.

Configuring Properties and Fields

So let's go back into the Bubble app. No let's go back to the beautified. So properties which is all of this. This is where you list the fields that you want to get back. So I'm saying here's a field called closing date and I want it as a string but I also want it to reformat the date into this particular date format and then saying contract term and I'm saying salary. I've now marked all of these as required. Now I've not done a lot of testing with this but I found that when I first added salary in I didn't have it marked as required and I didn't get the salary back. So I think if you really want to force it into this JSON mode because that's essentially what we were trying to do with the AI, yeah mark them all as required.

Declaring Tool Usage

Then you have to declare that you want it to use a tool. Now there are a number of different modes that the function calling tools in Claude can be. For this we want to say don't just have a chat with me you have to use this tool. So we're saying tool choice type and then we're saying the name of the tool up here and then we go back into ordinary messages.

Getting Structured JSON Data

So quick recap. If I run it now we get back the actual data that we have requested in this nicely structured JSON. So I think this is a great conclusion because you can use plugins to extract particular key values within JSON. You could effectively create your own text to JSON and then back into your Bubble app a structured data using a back-end workflow and responding with particular structuring of data.

Conclusion and Recommendations

You could do that but I think this is the way to do it. So if you're excited about using Claude and you want to get ahead around how to use tools then hopefully this video has been useful for you and I'd say that the trickiest bit for me was just working out exactly how the structure what was essential and not but you can go through the Claude documentation to get all of the details out of that. But hopefully this is a really simple example of extracting three different values, making a tool, declaring them as required and then saying that the the API call has to use the tool. So there you go. If you found this useful please like and subscribe and just yeah one last thanks to the Bubble Forum community, particularly to... Baloshi69? Sorry I've really ruined trying to pronounce your username but thank you so much for pointing me in the right direction with this one, hugely appreciated.