How to summarise a whole conversation with AI in Bubble.io

Introducing Our Upcoming Udemy Course

In the next few days, we're going to be releasing our first ever Udemy course, and that's going to be my most complete and detailed how to build a ChatGPT clone with Bubble set videos course that I've ever made. But in the meantime, I want to show you a quick tip for how you can summarize a whole conversation using OpenAI API and then present that back to your user in your chat window.

Adding a Summarize Button

So if you want to learn how to get to this stage, you can piece together based on some of our previous videos or watch out for the Udemy course coming soon by subscribing to our channel. That's how you'll find out about the news. But right now, I'm going to add in a button that is going to summarize this conversation. So basically, it is inserting a pre-written prompt into the midst of the conversation that you trigger with a button press.

Creating the Workflow

Let's go ahead and add another button and I'm going to say summarize. So when this button is clicked, I want to run a call to the OpenAI API and I want to send all of the previous messages along with it. So it's actually very similar to our send button. But we don't create a message because we basically just want... we don't want the user's message to go into the conversation, we just want the AI to respond with a summary.

Configuring the API Call

I'm going to copy this step because this is the step where we list through all our messages and we generate the JSON needed in order to communicate with the OpenAI API. So I'm going to copy this, paste it in here, and then copy this. This is the important bit. This is the saving of the response and paste it in here. So just reconnect back up and so this is the result of step one, choices, first item, message, content, and then we give it the role that we need and the thread ID. Again, check out our previous videos which kind of jump in in the depends here.

Adding the Summarize Prompt

This sends this template of a message and it sends it through every single message in the current thread and we just basically want to add a message to it. Yeah, we do and so that I could type straight into here but I'm actually going to do it in the API connector. So we'll go into plugins and our duplicate it. So we can say get summary of conversation and so then all our messages go in there.

Formatting the API Request

I'm going to add in a comma because remember each of our messages is basically formatted exactly the same as this. So I'm going to paste that in and then I'm going to say the role is user because effectively our button is just like insert a prompt and so our prompt can be in less than three sentences. Summarize our conversation so far. Now I want to reinitialize this and that's only going to work because I've got some dummy content in here.

Testing the Summarize Function

Let's try that and that's good. There's no errors. I've not introduced any JSON syntax issues in the conversation so far. I would point out of course that the summarize button won't work if there are no messages. You would get a syntax error because this will effectively be blank. So just be aware of that.

Implementing the Summarize Button

Now I actually want to now use our summarize. So I'm going to copy this into here. Move it, delete this, reconnect it back up and let's go ahead and preview. So while it reloads I've got a bit of a conversation here going on about a trip to Europe and I'm going to click summarize.

Reviewing the Summary

Right so it says in our conversation I shared information about proper destinations in Europe and then yeah it picks up that I basically said I like the sound of Paris. So there you go that's how you can add in a summarize button or you can summarize a conversation so far with OpenAI in your Bubble ChatGPT clone or however you are introducing the OpenAI API into your Bubble app.