OpenAI Assistant & Bubble.io API Connector Part 1

Introduction to OpenAI Assistant API

You asked for it in the comments. Here is my Bubble tutorial video demonstrating how to use the OpenAI Assistance API. This is brand new, this was only released last week and I'm probably going to do two parts of this. I'm going to do an explanation in this video about all of the additional OpenAI API calls that are required and then in part two I will actually put it into the front end of Bubble. But this is a really important explainer because I would say that there is definitely more to it to make use of these exciting new features. There are more API calls that are required but that is a hundred percent worth it in order to get OpenAI handling your thread. They will now store your messages which means that you don't have to send all your messages through every single time. OpenAI can take care of that all through their API.

Potential Cost Considerations

I will just point out that some people on Twitter or X I've seen them saying that this might get very expensive very soon so do make sure you understand and you check out the costs of paying OpenAI to store your messages going forward. But all of that will be demonstrated, will be explained. I'll be going through the API documentation on the page here and I'll be showing how to link that into the Bubble API connector in this video.

Learning Resources for Bubble

Before I launch into it, if you're watching this video you're probably learning Bubble and there is no better way to learn no code and Bubble and planetnocode.com. We've recorded hundreds of Bubble tutorial videos many of which are exclusives to our members on our website so if you're learning Bubble there's no better place to go than planetnocode.com.

Understanding the Assistant Feature

Let's dive into this tutorial and first of all I'm just going to explain the different parts required in order to get the assistance feature working and also the storing of threaded content and threaded messages. So you're going to need to create an assistant and the way I've understood this and this is all half the press if you disagree with anything I'm saying any interpretation leave a comment below let me know. But the way I understand this is this is where you basically can set up what was previously termed the system prompt. So the example they give here is that you are a mass tutor when asked a question write Python code to answer the question. So I will be using this to demonstrate like a travel agent so I'll be saying you are a travel agent answer questions about travel and locations and my understanding of this is that your assistant you can create one assistant for your whole app if every single conversation is going to be engaging with the same AI persona so you can create one assistant and you'll get an assistant ID back and we'll be using that plugging into the API connector shortly.

The Power of Threads

You then have threads and this I'd say is the most powerful feature because at least according to their press release there is no longer like a token limit on the scale of your whole conversation nor do your costs necessarily rack up per API call because you are now only sending the content of your users message to OpenAI and it gets grouped together in threads so we will be creating a thread and we will be doing things with threads like putting messages into threads. We then have messages and so we'll be creating a message and we'll be putting it into a thread using a thread ID and then lastly we're going to be we'll also be listing through messages because that's our new way of getting back both the users message and the AI's reply to the user's message.

Running the Assistant

We'll then be using run and this is where you take the user's messages in the thread and you instruct your assistant to go through and reply to them. This is different to how we've had to work with OpenAI in the past because when you submit a user's message that's all that happens you just submit a user's message. It's only when you run the assistant do you get the AI reply.

Demonstrating in Bubble API Connector

Let me demonstrate this all to you in the Bubble API connector. So I'm in the Bubble API connector yeah here we go I've installed it and I've got an API and I've named it OpenAI. I then say private key in header and the keys name is authorization and then I put my API key in there preceding it with the word bearer. I will of course be deleting this API key when I upload this video. How do I know how I structure this? Well let's go back into the API connector and let's go to threads and create thread and we can see here it tells us exactly how to structure it. We need to have content type authorization and this tool let's flag this up as something new we have to include this other header parameter because we're using a beta feature and if it looks a little bit different like it looks like this make sure you select C URL because that's the for me at least the easiest way to translate it into the Bubble API connector.

Creating a Thread

So I've got those in place all of my shared headers and then I'm going to create a thread and so I've got a action here I've set as an action create thread the post destination I'm going to get that from here that's where the API call is going and then I don't actually need to include any additional data in here so I'm going to initialize my call and I get back a threads ID and I'm going to copy that onto my clipboard.

Creating a Message in a Thread

I now want to create a message in my thread so if I go under here and then go to messages and create message I have to copy the structure here and this is what it looks like in open in the Bubble API connector if I copy the endpoint and paste it in the the structure that open AR provides users curly brackets around the thread ID for Bubble to turn it into a parameter or a variable we actually have to swap that out for square brackets and that then lets me insert data into the URL so I'm going to paste in my new thread ID and then I'm going to add in a message and I will say tell me three things to do in London as a tourist and I'm going to initialize the call and this is where things are different to how we've worked of OpenAI in the past which is that I get back a response instantly there's no waiting and my response is simply the recognition that I've created a message in the thread I don't get back then the OpenAI is reply to the message we're going to come on to that I can further demonstrate this by saying well what if we list all the messages currently in the thread is it just going to be the message I've added in tell me three things to do or will it include the AI's response well let's have a look so I'm going to use a get command to list messages and I get that the those details from here so I insert the message ID into the URL into the endpoint and I will then get back all the messages in the conversation so that's initialize the old data and you can see the only message is the message that the user has put in to the conversation I don't actually have an any AI response yet click save next I need to create an assistant and that's because an assistant is key for the run command which is I'm going to come on to the moment and so your assistant is setting the tone and so I'm going to change this instead to say travel agent and say you are an experienced travel agent and I'm going to initialize the call and again I get back an instant response and all of this it all this is is a confirmation that the assistant has been created and the assistant has an ID so I'm selecting the ID and putting it on my clipboard because now I get to the point where I actually run it and I'm going to it's only at the point of running it that I get my AI responses or response in my conversation so I'm going to paste in my assistant I've got my structure here from the API documentation on run and create run and so the only essential data that I place in is the assistant ID and also again notice the threads ID in the URL so go back into here copy my copy my threads that I'm working with this one here okay and now I can initialize my call again I get back an instant response but this is effectively saying that status queued as soon as I initialize this call OpenAI is writing the assistance response to my initial query and so now if I go back to list messages I get my actual AI response which is here so it's recommending that I explore the Tower of London.

Adding Another Message

Let's do one more prompt message to and through in the API connector here to really demonstrate the different steps that required and then right way I'm going to record the second part to this video because we'll be plugging this into a repeating group and a multi-line input on the front end and get a user engaging with it so I'm going to create a message in the thread I'm going to say tell me more about the Tower what would it mean to go capital set of London and I'm going to initialize and then just to really hammer home the point if I go through and I view my conversation I have my part one my reply and then my part two so now I need to run my assistant again and the run command and now go back to my list messages okay oh yeah this is interesting my message is empty that's because OpenAI is still writing the reply to it and so I'm gonna click save and then I'm just gonna go list messages again and I'll go we can see already now we have our message about the Tower of London and we can see that this is the fourth message in the the JSON array.

Conclusion and Next Steps

So there you go that is how we can use the assistant and the threads API from OpenAI to take you know take control to make it in some ways we're handing over responsibility for dealing with the conversation or the messages to OpenAI let me know your comments feedback is this better than the previous ways of doing it where you had to handle with the messages or the JSON in Bubble or do you think that this is an incredibly important feature also let me know what you think about the pricing do go and check out how much it's going to cost to store all this data in OpenAI and make sure you're subscribed and you like this video here because part two will be coming up very shortly.