A huge thank you to every one of you who has left a comment, subscribed and liked one of our videos. This Bubble tutorial video is for you if you have left a comment on any of our OpenAI videos asking how can I set up recommended replies or predictive text replies in a ChatGPT clone or basically any chat app. It doesn't even have to be an AI chat app.

Returning to our ChatGPT Clone

So in this Bubble tutorial I'm going to demonstrate how we can give our user a selection of replies and allow them to quickly reply, save them having to type in a reply based on some recommended responses. So I've got my ChatGPT clone app here built in Bubble, and you need to go and check out some of my previous videos to see how I've got to this point, because right now I'm going to jump in by creating a second prompt in the API connector. So I'm going into workflow. No, I'm not.

Creating a OpenAI API call in the Bubble API Connector

I'm going into plugins, and I'm going to add in another call. And I'm going to call this "Get recommended replies", and it's post. And so I'm going to copy the end point from my call that's already working. I'm changing it to an action because I want to access it in my workflow. And then I'm just adding the header, just copying and pasting it across. Yeah, that can actually remain private. And then I'm just going to dip into the OpenAI documentation to get the structure that I need. I'll do something like that. Copy. Paste. I'm actually missing a load. Let me copy that bit. Copy there from there into here and then instead of copying it from the documentation I'm actually going to copy the demo value that I have and clear up the spaces. Okay, because I initially started recording this video thinking I'll just combine it in with my actual chat prompt.

So when my ChatGPT clone that I built in Bubble sends a message, it basically compiles a list of messages, what I send and what ChatGPT OpenAI replies, and then I get a big list of messages and I insert them into here. That's how you get the wonderful historical context where, you know, previous message-aware conversations that you can get with OpenAI. But, and then I thought, oh, I'll just kind of ask for a reply, and then I'll ask for some suggested replies all in the same message, and I just thought that's going to get quite messy. So, instead, I'm just going to set up a separate call. And so, the role here is actually going to be user, and I'm going to say, "based on..."

Using Arbitrary text to make JSON-safe

No, actually, I'm going to put all of this into arbitrary text and JSON safe to make it JSON safe. So JSON safe adds in quote speech marks around it, so actually I need to set it up like this. So this will be my message. I'll say, reply request, reply request. And I need to initialize it, so I need to write at least some sort of message in here saying, "suggest three replies to my message about France". And I'm just putting in a bit of test data here so that I can successfully initialize the call through the API connector and check that I've got no mistakes in my JSON. Good. Okay, it's worked, the call's returned back, there's no errors with my JSON. So I'm going to click Save.

Right, now I'm going to go into my workflow. So when my send button is clicked, here's what currently happens. And again check out my previous videos about OpenAI ChatGPT clones to learn more about this. But this is the message that the user creates. Then I send the request to OpenAI with all the historical messages. I reset the inputs and I create a new message based on the response from OpenAI. So actually in here I'm going to add in my most recent request to get recommended replies. and I'm going to use arbitrary text here so I can make it all JSON safe.

Crafting my OpenAI Prompt

And I'll say in here, "You are a text prediction..." I call it engine, not sure why I'm picking engine. Text prediction engine in my chat app. Write three possible replies to this message. Format as, I'll just say "Reply 1, Reply 2, Reply 3." And then I'll say "Previous message," then open Speechmarks. And in here, I'm going to insert the reply from step two, because that's my initial openAI call. That's where I actually get the chat messages back. So, choices first item message content. Cool. Then I just, I need a way, okay, I'm gonna, I need a way to check that that's working. So, I'm actually just gonna do it step by step. and I'm not saving this response just yet. In fact, I will save the response. I will go into here and I shall say "suggest a replies" and it's going to be a list of text. And so I'm going to set the list to be... Basically I need to structure... I need to have my prompt good enough that I get back a guaranteed structure. And so in here I'm saying "format as reply reply reply". How should I do this? I basically just need to test it and see how well it works. I'll say "only reply with the suggestions and format as" because sometimes OpenAI can put a little bit of a preamble, like a prefix, in there and that can really skew us when we're trying to extract data from it. Now I'm not sure here whether it's going to reply with "reply1" colon "reply2". I'm basically trying to say, I'll just say, I won't say format as, suggestions, I'll say only reply to suggestions with each suggestion on a new line. Okay, I don't think that's given me a good chance to get this right. Right, so then in here, I'm going to take the response from result four, choices, first item message content, and then I'm going to say split by.

Saving OpenAI responses

So message content hopefully would just be the text containing my three replies, and then I'm going to say split by line break. So then suggested replies set list is going to be my three replies as three separate text blocks in my list of text. So I'm going to test that, make sure that works before I start to add the UI in. So I'll say "recommend three things to do in Paris". Okay, something's gone wrong there, let's debug it. So I'll go into data, have a look at my messages, refresh data. Okay, I'm going to do it step by step. Something has not worked in the workflow because it hasn't reset my inputs. Ah, there's going be an error here, this seems to be JSON safe. There we go. Recommend three things to do do in Paris. That's better.

Debugging

So now I'm going to check to see whether this message in my database has got the suggested text. So in data, here it is. And yeah, we've got suggested replies. So I'm going to update my prompt a little bit and I'm going to say in my arbitrary text, write three possible replies. I'm going to say write three possible brief replies to this message. Right, that's working. Obviously, the prompt can be improved, but now how do I add it into my design? So let's just check to see how I've laid all this out. Right, we've got our repeating group and we've got our input here, so I need to add in a repeating group above it, and this is going to be one row, any number columns. Let's make it width 100%. And it's going to be type content text. And it's going to be data source is going to be my my repeating group here last message so what's this repeating group message You can get this to messages last message because that will be the message that is the latest reply from OpenAI and then it will be suggested replies and that's my list of text because it's accepted it's gone blue from red and then I'm going to add in the replies so it'd be current text and this will be column width, say width 100%. That's all that will do.

This is very roughly designed. Height 20. I've got some padding or margin there. Let's make that eight. Let's make this 20. Okay, I'm gonna test that. And I'm just gonna check to see why that's not working there. the text is empty. Okay, this is because I'm using a plugin that reverses my repeating group so it's more chat-like. Again, check out the previous video on how to reverse it. So actually, my data source is going to be first item. Okay, and there are my different replies, all available and ready to go.

So how do I now insert that into my conversation? Well, I'm going to add an action to when it's clicked. I want to link this in with my send action here. So I'm probably going to change this into a custom event, and a custom event is a great way for me to reduce the chance of me repeating myself. We want to develop our Bubble Apps in a lean manner where we don't repeat ourselves, same as if we were doing traditional coding. So I'm going to create a custom event because that allows me to basically insert a text variable and then run all the following steps after that.

Create custom event

So I'll call this one, send message, and then the input will be text, and that will be of type text. And so now I take everything that's in send, I'm going to copy it to here, copy, Copy. I'm not getting pasted. Bubble being buggy. Oh copy. Let's try that again. Okay I'll try doing replace by another type and can I do custom event? Create a custom event. Yeah. Right, I've converted the workflow into a custom event now. So So let's say this would be send message. Delete that, right. And there is an input variable, which is going to be text because that's the message that I'm sending as the user. Conversation will be probably labeled at page body. I'm just using a group to hold the conversation. There we go. Right. Right, check all this is not broken. Yeah, that's fine. So what I'm changing here is instead of saying multi-line input value, I'm gonna say it's text. Then when, When send is clicked, I trigger my custom event and my text for the send button is multi-line input. But when my suggested text is clicked, I trigger custom event and this time it's current sales text. Right. Let's try that.

Debugging OpenAI workflow

I'm going to start a new conversation and I'm going to say, "What are the three best cities to visit in Europe. Okay, I'm getting some sort of error. I made a mistake. Probably send message right. That's all good. Right, I'm going to run it step by step. Checking each bit. Right, I have a conversation. I have the text. Ah, nothing's being sent to OpenAI. check out why that is. Or has it worked in this case? No, it's not worked. Oh, conversation's broken there. Right, page, body, conversation. Right, okay, I'm gonna keep this in because hopefully it shows you some of the debugging process, even though this is becoming quite a long video. Right, refresh that. I'm gonna delete that conversation, add a new conversation in, "recommend three cities to visit in Europe". Okay, we're just waiting on the OpenAI API here. Okay, so it gives us three possible responses and it has accurately picked up. We're going to Barcelona, Prague, or Amsterdam.

And of course my prompt for the suggested replies, I put brief in there, clearly brief is not making it brief enough, but let's check out, let's check that this works. So if I click on Barcelona, it sends the message, and hopefully it's going to get a reply back. Yep, now the formatting is going a little bit off with how it's getting my suggested. So you need to improve the suggested or get replies prompt that I've got, but hopefully by this point in the video you've got how I've implemented it. Now if you're learning Bubble and you want to find out more about working with Bubble and AI, the best place to do that is to head over to our website, Planetnoco.com, where where we've got hundreds of Bubble's tutorial videos exclusive to our members and to our community. So if you want to learn Bubbleble and you want to do it quickly, head over to planetnocode.com.