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 OpenAI 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 API connector and add a new API. And so this is going to be my connection to Anthropic, the creators of Claude. And then I've gone into the Anthropic documentation, and I effectively need to translate this piece of code into the Bubble API connector. I can start by taking the endpoint and copy that and creating a new API 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 workflow. So just going back to the documentation here. That are suggesting this formatting so that the back slash end is a way of putting a line space into your JSON. 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 plugins 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 database, but I'm just going to use a custom state in this instance. So on the page itself, I'm going to create a custom state. And a custom state is a great way of temporarily storing data. It's not being written to the database. It's f the user refreshes the page, the data is lost, but it's quick and it's suitable for this instance here. So I'll say response of type text. And then in my workflow, I can can set state, 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.