Creating a Chatbot experience using Bubble & ChatGPT API

Introduction to ChatGPT API and Bubble Integration

ChatGPT have just released their API and here is a tour of my Bubble app which I've set up to make use of the conversational nature and abilities of ChatGPT. What I mean by that is the ability if we look at the documentation here that once you ask a question and you get an answer back you can ask a follow-up question and ChatGPT is aware of the previous points and previous text of the conversation that's come before your current prompt.

Understanding ChatGPT API Request Format

So we can see this is how ChatGPT want you to send your request and it's basically saying that every time you send the message you have to provide the full history of the conversation up until that point and this is we're jumping right into the deep end of the Bubble API connector here. Do check out our earlier videos to show more basic setups of what you'll need but this is taking about half an hour to get working and I'm going to show you how I've done it.

Setting Up the Bubble API Connector

So if I look go into the Bubble API connector I've got an OpenAI connection setup and this is my the body of my JSON object and I've part of the challenge of this is that we need to provide this format like roll with system or user assistant every time we send a request and we have to keep a history of it and we have to do that in a way of ensuring that our JSON syntax is correct that's not going to cause any errors.

Creating the User Interface

So I've simply set up that I can enter in my API called everything in the messages section I just have a value set up there. Let's have a look at my page. So I've got a multiline input, a button and a repeating group. I've created a content type called message and let's have a look what happens when you click the button.

Implementing the Workflow

So I create a new message and the message has got two fields for storing text. One is the plain text that says the user enters it into the multiline input and then I have a second field here which is my way of generating the necessary syntax and parameters to create a line just like this as detailed in the documentation. So you can see here that I've also got an option set called GPT roll and I've got the different rolls the user system and assistant.

Formatting the Message for API Request

I'm simply printing user in that space there and then goes in my multiline input that's what my user has entered and then so that I can display it in you have a bit of control over how I display in my repeating group. I'm also saving the what do they call it the roll there we go is it system is it user or is it the assistant I'm saving that as a option set field with my message.

Sending the API Request to OpenAI

I then send the API request to OpenAI and I do this by searching through messages and you might want to group these in conversations but I've just kept it simple for this demo and then I say each items JSON and so that is where I've generated this line here and then I say join with a comma and a space if we look at the JSON syntax here we can see that it needs to join every statement with a comma and a space.

Handling JSON Formatting

One of the errors I see people making all the time with JSON is that you want to put a comment in the after the final bit and now you don't you have a comma between every statement. So that's got the format right and that prints it and by doing a search for I get the history of all the messages sent previously.

Creating and Formatting the Reply

I then create a new message this is my reply so I've set the GPT roll as assistant I then have to go through the same process of formatting it so I say roll is assistant and the content is the response of the OpenAI choices first item message content and trimmed and I've added trimmed in there because sometimes the response you get back can have a space or a line break at the start of it that just clears out anything that isn't text from the start and finish of the text that's returned. I then also do the same thing I store this as plain text.

Resetting Inputs and Testing the App

Lastly I reset my inputs ready to take another input into the app. So let's check it let's see if this is history aware conversational AI so I can ask it how tall is the shard in London and I get a factual statement back from the assistant and then let's say is it the tallest building in London so I'm saying is it because I'm checking to see whether my response sorry whether my API request to OpenAI is aware of the previous history of the conversation that I'm talking about the shard.

Verifying Conversation History Awareness

Let's see if this works yes the shard is currently the tallest building in London. So there we go we've got it working.

Displaying Messages in the Repeating Group

The last bit I'm going to show in case anyone feels that I've missed anything is I've got my repeating group of search for messages and all I'm doing is printing the current cell's message GPT role so that's showing the user or the assistant and then I'm printing the plain message beneath it.

Conclusion

So there you have it that is one way that I've been thinking of over the last 48 hours of how to format the JSON correctly so that you have that conversational that history aware approach and methodology for using the OpenAI ChatGPT API.