Alternative to OpenAI ChatGPT - Claude 2

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble tutorial we demonstrate a neat trick using Font Awesome to show icons within your Option Set values.

Introducing Claude 2: An Alternative to OpenAI


It's July 2023, and there's another exciting piece of news in the AI web app space, and that is the release of Claude 2. This is one of the main competitors, main alternatives to the
API, or otherwise known as ChatGPT. And I'm going to show you in this Bubble tutorial how to add this API into your Bubble app.

Adding Claude 2 API to Your Bubble App


So you can experiment with alternatives to OpenAI. So I've got a very simple app page here. I've got a text input and then a submit button and somewhere to show the results.

Connecting to Claude 2 API: Step-by-Step Guide


First of all, I'm going to go into plugins and go into the
call. And I'll say generate text with AI, pasting the call into there, setting it as a POST command. How do I know that? Because I see POST request up there.

Configuring Headers and Making API Call


I then need to add in these headers and I can add them as shared in case I set up different calls, different prompts to Anthropic and Claude 2. I just have to do the slightly laborious task of copying and pasting this all across. And the last piece of header is the API key. I can add that in as a private key in header, change the key name to the one that anthropic gives, and then paste it in my API key. Then I come to actually making the call. It's itself. So again, I go back in here and I see what are some of the essential parts. And I see that I need model, and I need prompt, and I need max number of tokens, and they're all of the required ones. So I can use the API tool here to begin to build it up for me. I'll just say, what is the capital of France? Well, I could go back to that one. And then sample data here. And then that just provides me really handily with this piece of code here, this JSON, which I can copy in. And then I'm going to change the prompt to a dynamic value.

Testing and Integrating Claude 2 API


So I'll just call this prompt. And then that allows me to access this in a
. So I will actually... Let's just try it. Let's see how well it works. Let's say what is the capital of France? Initialise call. This is our way of testing that it works. Okay, right. I have to start the prompt like that. Fine. Okay. So going back into here, I shall... In fact, why don't I just copy all of that, paste it in here, move the prompt to there. Let's try and what is the capital of France? And we can see that the completion is the capital of France. Paris is the capital of France. Okay, there we go. Brilliant.

Linking Claude 2 API to Your Design


Now that I know that the API request is working and there's no errors in any of the code that I put in there, let's link it up to the design. So I'm going to create a workflow here and go to
and find anthropic get... No, that's assembly.

Using Custom State to Display API Response


What have I missed? Go back and hit up. Got to change this to action, otherwise it isn't accessible as a workflow action. Very easy to miss. I've not missed that for a while, though. So now if I go into plugins, I'll see Anthropic. Here we go. And because this field is not checked as private, I can access it in the workflow here, and I'll link it up to my multi line input.

Displaying API Response on Your Page


And then I need a way of displaying it. Now, I could save this into my
, my page, the custom state, and then the result completion. And lastly, to print that on my page, I have to give my text label here the location of my custom state.

Conclusion: Exploring Claude 2 for AI-Driven Apps


Page is called Claude, and then response. Let's preview that. So what is the capital of the USA? Washington, DC is the capital of the United States of America. So there you have it. If I go back into the plug-in, just point out to you that we are using the latest version of Claude as of July 2023, which is Claude 2.0. And it's really worth experimenting with, especially if you've built an app that uses OpenAI like GPT 3.5 turbo and you want an alternative where you want to just see, Well, what else is out there? I'd really recommend that you sign up for an anthropic account and you experiment with Claude version two.