Building AI functions in Bubble with Claude 3.5 Sonnet Tools

Add intelligence to your Bubble app easily by using Anthropic's Claude API with Tool Calling.

Hey there!

Welcome to this week’s NoCode SaaS newsletter, where we dive into building a profitable SaaS business without code on Bubble.

This week I wanted to take a look at a specific API which I’ve been finding useful recently when building with Bubble.

Specifically - Anthropic’s Claude 3.5 Sonnet with Tool calling.

Now most of us have at least experimented with using OpenAI in Bubble to generate text, but until now it’s been relatively hard to get AI to return structured data that you can use in Bubble.

Using this technique you can add some amazing AI features to your app like…

• Automatically categorising things or extracting data

• Suggesting the best time/date to take an action based on historical data

• Making suggestions for the user based on their existing content

• Automatically appending extra data based on user input

I covered how to achieve it with OpenAI and Backend Workflows in Bubble in a previous issue - which is super effective.

But now with Anthropic, you can write functions that can return custom data which you can call directly from the API connector, much simpler and quicker to set up!

I’ve put together a quick 10 minute tutorial video showing you how to setup Anthropic in the API connector and build a tool which will take in a social media post, categorise and extract the sentiment for it.

Watch the tutorial on how to use Anthropic Claude 3.5 Sonnet Tool Calling in Bubble

That means you just have to call the action using the API connector, sending it the string of a social media post and getting back an object with all the data you requested all nicely formatted and working natively within Bubble.

If you want to take thing further, you can even use this with Option Sets in Bubble. You can force Anthropic to respond with one of the values from your Option Sets in it’s response - ideal for taking actions in workflows.

Step-by-Step Tutorial:

Step 1: Set Up Your API Connector First, head over to your Bubble app and open the API connector plugin. Add a new API and call it something like "Anthropic Claude 3.5."

Step 2: Define the Function In the API call setup, define the function you want Anthropic to perform.

For this example, we’ll categorize a social media post and extract its sentiment. This setup will allow Anthropic to understand the task it needs to perform and return structured data that Bubble can use.

I’ve included this entire API call as a text file here that you can take to try it out, or update for your own use case:

Download the example API Connector Setup for Anthropic Claude 3.5 Sonnet Tool calling

Tip - you could paste this entire file into ChatGPT or Claude to update it for your own use case.

There’s lots more info on Tool Use here in the Anthropic Docs.

Remember: to ensure Anthropic responds using a tool with no other text you must force it to use tools by declaring it like this

"tool_choice": {"type": "tool", "name": "your_tool_name"}

This means Anthropic will respond with structured data that can be understood and interpreted by Bubble, and that you can easily use in your workflows.

Using Enum to Fix Responses and Option Sets:

Enums are incredibly useful when you want to limit the possible responses to a predefined set of values.

This is especially handy for ensuring consistency in your app’s responses. For example, when categorizing sentiment, you can restrict the responses to just "positive" or "negative."

By integrating this with Bubble’s Option Sets, you can take it a step further.

Option Sets in Bubble allow you to define a list of options that can be used across your app.

When you force Anthropic to respond with one of these predefined options, you can seamlessly integrate these responses into your workflows.

For instance, if you have an Option Set for post categories, you can configure Anthropic to only respond with values from this set. This ensures that all categorizations align perfectly with your app’s logic and can trigger specific actions or workflows based on these categories.

Making Your Own Tools:

Creating your own tools with Anthropic allows you to tailor the AI’s functionality to your specific needs. Here’s how you can go about it:

1. Define the Tool’s Purpose: Decide what you want your tool to do. Whether it's categorizing posts, generating hashtags, or summarizing text, be clear about its function.

2. Describe the Tool: Provide a description of what the tool does. This helps in guiding the AI to perform the task correctly.

3. Specify the Expected Output: Define what you expect in the response. This could be text, numbers, lists, etc. Clearly stating this ensures the AI returns data in a usable format for Bubble.

4. Integrate and Test: Once you’ve set up your tool, integrate it into your Bubble app via the API connector and run tests to ensure it works as expected.
   

Remember, you can download my tool template to get started with making your own tool, customise it yourself or put it into ChatGPT/Claude to update it how you like.

Download the example API Connector Setup for Anthropic Claude 3.5 Sonnet Tool calling

---

I hope you find this technique as useful as I have. It’s a powerful way to integrate AI features into your Bubble app without the need for complex backend workflows.

Give it a try and let me know how it works for you!

Until next time, happy building!

Best, James

If you have any questions or thoughts drop me a reply to this post - I love hearing from you!