Using Bubble API Connector with OpenAI's Assistant API: Part Two

Right, let's take everything we covered in part one of this video of how to use the Bubble API Connector with OpenAI's new Assistant API. And so we'll be building upon that to cover kind of the core context so you go back and watch the previous video. And if you're watching this, you're learning Bubble and there's no better way to learn Bubble than to join the Planet No Code membership community at planetnocode.com because we've got over there hundreds of Bubble tutorial videos just like this one from beginner all the way through to advanced.

Starting with the OpenAI API

So let's dive in with the OpenAI API here and you can see we've got our different prompts, our different API calls listed down here and this is what we're building upon. We did this in the previous tutorial. So I'm going to go on to my blank page here and I'm going to create something that looks similar to the ChatGPT web interface.

Creating the ChatGPT Web Interface

So I'm going to have two groups. I'm going to have a group here. That's going to be a column. Let's make that to 220 and then I'm going to have a group here and this will be where my chat is going so that we get a little bit of a contrast between them. I'll add in... let's make this dark color and we'll make this a grey. I'll make this white. Okay and so we will start with a button to create a new thread. So I'll call this new chat and I will put a little bit of nice styling into this.

Creating a New Thread with OpenAI API

So what's new chat going to do? Well new chat is going to create a... from the OpenAI API perspective, it's going to create a new thread. So I'll say create a new thing. Data create new thing. Now this is the demo app that I've done hundreds of demos on so there's a lot of data types already in here. So if you're not seeing any of these that's because you've not been demoing and doing hundreds of Bubble's tutorial videos. So I'm going to create a new one in here and call it... so this is thread. I'll call it thread just because then I'm using the terms that OpenAI are using.

Building the Thread and API Call

And so the thread is going to have an ID field of type text. And so I then need to do my API call. So I'm going to go down, I'm going to look for my OpenAI create thread. Why am I seeing that there? Well I'm seeing that because if I go into plugins I have my create thread action here and it's called create thread because that's what I've labeled it here. And so if I go back into workload, there's no parameters that need to go into create thread but out of the response I can take the ID. And so that will create an entry in my database for this thread.

Displaying Threads and Adding Conversation View

I want to display these threads so I'm going to add in a repeating group and this is going to list through threads and I'll say do a search for thread. Make this 100% and then I'm going to add in a text label because this will be the thread ID. That's just a way for me to distinguish between the different threads I create. Okay, right, what should we do next? I think we should start adding our conversation view. So I'm going to add in a repeating group into here. 100% width.

Retrieving Data Live from OpenAI

So this, I'm going to try this and if it doesn't work in this video then I can't with a different method but I'm going to try and basically get this data live from OpenAI rather than having to store any messages in my database. So in order to do that I'm going to go back and I'm going to have a look at my list messages and I'm going to reinitialize this call because I effectively want to list through this item here and so Bubble is labeling that as list messages data.

Setting up User Interaction

So go back into the zone and see if I can find that list messages data and then get data from external API, list messages and then the thread ID. I'm probably going to use a field on the user for that so that when the user clicks on a different thread then I'm going to swap that out in the user. So let's set that up. So I'll say when this is clicked I'm going to account, make changes to user and I'll add in a field and I'll say current thread and I'm doing this because I've worked with Bubble coaching clients over the last few weeks and tried a number of different ways of basically setting the app up to remember which thread the user is currently viewing and this method has seemed to work the best. So I'm going to say current thread is this thread. So when they click on it, it's going to set that as the current thread.

Setting up the API Call

So I can then go back into my repeating group and I can say the thread ID is current user's current thread's ID. So that's now going to list through all of the messages in that thread. So I'm going to add in a text label here and I'm going to say current cell's message. And so let's see if this works. I'm not 100% sure if this will work but let's give it a shot.

Testing the Interface

So I'm going to preview this and I'm going to create a new chat. So there's my new chat appearing there. I'm going to click on that and you can see it's attempting to list through the messages but there's no messages in there at the moment. So that's fine.

Adding Messages to the Thread

So what I'm going to do now is I'm going to add in a multiline input and a button and this will be for adding messages to the thread. So I'll call this send and I'll say when this is clicked I'm going to do an API call. So I'll say plugins, OpenAI Assistant, create message and the thread ID is going to be the current user's current thread's ID and the role is going to be system and the content is going to be multiline input's value.

Finalizing the Interface

So I'll say send and I'll make this multiline input a bit bigger. Okay, and I'll also add in a refresh button here. So I'll say refresh and this is going to refresh the repeating group. So I'll say repeating group, display list, repeating group's list of messages. Okay, so let's see if this works.

I'm going to dig around and see if I can find the best solution to this and it turns out there'll be a part 3 to this video because I mean I'm really happy with getting the threaded content working and how open AI is dealing with that. But I would love to be able to get the repeating group updating as it goes on and maybe I might you know I just take a breather and I work out again if you think you can fix this leave a comment below we can share a bit of the knowledge but yeah here we go this is the open AI Bubble and Bubble API connector using threads and using the assistant and I'll do a part 3 to this video.