Introducing Claude 2: An Alternative to OpenAI ChatGPT
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 gonna show you in this Bubble tutorial how to add this API into your Bubble app. So you can experiment with alternatives to OpenAI.
Setting Up a Simple App Page
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 Anthropic's API
First of all, I'm gonna go into plugins and go into the API connector and add a new API. And so this is gonna 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.
Setting Up the API Call
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. I then need to add in these headers. And I can add them to shared in case I set up different calls, different prompts to Anthropic and Claude too.
Adding Headers and API Key
I just have to do the slightly laborious task of copying and pasting this all across. Okay, and the last piece of header is the API key. And so I can add that in as a private key in header, change the key name, someone that Anthropic gives, and then paste in my API key.
Making the API Call
Then I come to actually making the call 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.
Testing the API Connection
I'll just say, "What is the capital of France?" I don't know why 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 gonna change the prompt to a dynamic value. So I'll just call this prompt. And then that allows me to access this in a workflow.
Formatting the Prompt
Now, suggesting this sort of formatting, so that the backslash N is a way of putting a line space into your JSON. So I will actually, oh, let's just try it. Let's see how well it works. Let's say, yeah, what is the capital of France? Initialize, cool. This is a way of testing that it works. Okay, right, I have to start the prompt like that. Fine, okay.
Setting Up the Workflow
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. Right, let's try, oh, 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.
Creating a Custom State
So now that I know that the API request is working and there's no errors in any of the code that I've put in there, let's think 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. Well, what have I missed, go back into, ah, 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.
Displaying the Results
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 up to my multi-line input. 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.
Setting Up the Custom State
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. If 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 set state, my page, the custom state, and then the results completion.
Previewing the App
And lastly, to print that on my page, I have to give my text label here the location of my custom state. Pages called Claude and then response. And let's preview that. So what is the capital of the USA? Washington DC is the capital of the United States of America.
Conclusion and Recommendations
So there you have it. If I go back into the plugin, just point out to you that we are using the latest version of Claude as of July 2023, which is Claude two. And yeah, 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 2.