Building on the OpenAI Assistant API in Bubble.io
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. We'll be building upon that to cover the core context. Go back and watch the previous video if you need a refresher. Let's dive in with the OpenAI API here. You can see we've got our different prompts, our different API calls listed down here. This is what we're building upon from the previous tutorial.
Creating a ChatGPT-like Interface
I'm going to go onto my blank page here, and I'm going to create something that looks similar to the ChatGPT web interface. I'll have two groups: one as a column with a width of 220, and another where my chat is going. To get a little bit of contrast between them, I'll add some styling. Let's make the first group dark color and the second one gray with white text.
Adding a New Chat Button
We'll start with a button to create a new thread. I'll call this "new chat" and add some nice styling. What's new chat going to do? Well, from the OpenAI API perspective, it's going to create a new thread. So I'll use the "create new thing" action in the database.
Setting Up the Thread Data Type
I'm going to create a new data type and call it "thread" to use the terms that OpenAI are using. The thread will have an ID field of type text. Then I need to do my API call. I'm going to look for my OpenAI create thread action, which I've set up in the plugins section.
Creating the Thread in the Database
Going back into the workflow, there are no parameters needed for create thread, but out of the response, I can take the ID. This will create an entry in my database for this thread.
Displaying Threads
To display these threads, I'm going to add in a repeating group. This will list through threads, and I'll add a text label to show the thread ID as a way to distinguish between the different threads I create.
Setting Up the Conversation View
Next, we'll start adding our conversation view. I'm going to add in another repeating group for this. I'm going to try to get this data live from OpenAI rather than storing messages in my database. To do that, I'll use the "list messages" API call and initialize it with the thread ID.
Using User Fields for Current Thread
I'm probably going to use a field on the user for the thread ID so that when the user clicks on a different thread, I can swap that out in the user. This is handy for remembering which thread is being used, especially if the page refreshes or the user navigates away and comes back.
Setting Up the Chat Interface
I'll add a text label to display the message content, a multi-line input for the user to type their message, and a send button. When the send button is clicked, we'll create a message and assign it to the current thread using the OpenAI API.
Handling Message Creation and Display
To create a message, I'll use the "create message in thread" workflow action, using the current user's thread ID and the message content. I'll use JSON safe to ensure the message is properly formatted for the API. Then, I'll run the assistant on the thread.
Testing the Chat Functionality
After setting everything up, I tested the chat functionality. There were some initial issues with data not updating in real-time, which I'll need to address in a future update.
Conclusion and Next Steps
While we've successfully set up the basic structure for our OpenAI Assistant-powered chat in Bubble, there are still some challenges to overcome, particularly with real-time updates of the repeating group. I'll be exploring solutions to this in a future video. Despite these challenges, we've made significant progress in integrating OpenAI's Assistant API with Bubble, creating a foundation for a powerful AI-driven chat application.