Chat app with AI predictive & suggested text with OpenAI

Setting Up Recommended Replies in a Chat App

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. 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, saving them from having to type in a reply based on some recommended responses.

Creating a Second Prompt in the API Connector

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. Right now I'm going to jump in by creating a second prompt in the API connector. I'm going into plugins and I'm going to add in another call. I'm going to call this "get recommended replies" and it's post. I'm going to copy the endpoint from my call that's already working. I'm changing it to an action because I want to access it in my workflow. Then I'm just adding the header, copying and pasting it across. That can actually remain private.

Setting Up the JSON Structure

I'm just going to dip into the OpenAI documentation to get the structure that I need. I'm actually missing a load, let me copy that bit. I'm going to clear up the spaces. Initially, I started recording this video thinking I'll just combine it with my actual chat prompt. In my ChatGPT clone that I've built in Bubble, when it sends a message, it basically compiles a list of messages - what I send and what ChatGPT OpenAI replies. Then I get a big list of messages and I insert them into here. That's how you get the wonderful historical context-aware, previous message-aware conversations that you can get with OpenAI.

Creating a Separate Call for Suggested Replies

I thought I'll just kind of ask for a reply and then I'll ask for some suggested replies all in the same message. But I just thought that's going to get quite messy, so instead I'm just gonna set up a separate call. The role here is actually going to be "user" and I'm going to put all of this into arbitrary text and JSON safe to make it JSON safe. JSON safe adds in quote speech marks around it.

Initializing the Call

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". 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, it's worked. The call's returned back, there's no errors with my JSON, so I'm gonna click save.

Setting Up the Workflow

Now I'm gonna go into my workflow. When my send button is clicked, here's what currently happens. Again, check out my previous videos about OpenAI ChatGPT clones to learn more about this. 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.

Adding the Request for Recommended Replies

In here, I'm going to add in my most recent request to get recommended replies. I'm going to use arbitrary text here so I can make it all JSON safe. I'll say "You are a text prediction engine in my chat app. Write three possible replies to this message. Format as reply1, reply2, reply3." Then I'll say "previous message" and insert the reply from step two because that's my initial OpenAI call. That's where I actually get the chat messages back.

Saving and Structuring the Response

I'm going to save the response. I'll go into here and I shall say "suggested replies" and it's going to be a list of text. I'm going to set the list to be basically... I need to structure my prompt good enough that I get back a guaranteed structure. In here, I'm saying "Format as reply, reply, reply" and "Only reply with the suggestions with each suggestion on a new line".

Testing the Workflow

Then I'm going to take the response from result, choices, first item, message content, 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. I'm going to test that to make sure that works before I start to add the UI in.

Debugging and Refining the Prompt

I'll say "recommend three things to do in Paris". Something's gone wrong there, let's debug it. I'm going to step by step... Something is not working in the workflow because it hasn't reset my inputs. Ah, there's going to be an error here. This needs to be JSON safe. There we go, "recommend three things to do in Paris". That's better. Now I'm going to check to see whether this message in my database has got these suggested text.

Adding the UI for Suggested Replies

Let's just check to see how I've laid all this out. We've got our repeating group and we've got our input here. So I need to add in a repeating group above it. This is going to be one row, any number of columns. Let's make it width 100% and it's going to be of type content text. The data source is going to be my repeating group here, last message. That will be the message that is the latest reply from OpenAI, and then it will be suggested replies.

Styling the Suggested Replies

I'm going to add in the replies. The current text will be column width, say width 100%. That will do, it's very roughly designed. Height 20, I've got some padding or margin there. Let's make that 8, let's make this 20. I'm going to test that and I'm just going to check to see why that's not working.

Finalizing the Implementation

This is because I'm using a plugin that reverses my repeating group so it's more chat-like. Again, check out previous videos on how to reverse it. So actually my data source is going to be first item. And there are my different replies all available and ready to go. Now, how do I insert that into my conversation? I'm going to add an action to when it's clicked and I want to link this in with my send action here.

Creating a Custom Event for Sending Messages

I'm probably going to change this into a custom event. 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.

Testing the Final Implementation

Let's try that. I'm gonna start a new conversation and I'm gonna say "What are the three best cities to visit in Europe?" It gives us three possible responses and it has accurately picked up we're going to Barcelona, Prague, or Amsterdam. Of course, my prompt for the suggestion replies, I put "brief" in there. Clearly, "brief" is not making it brief enough, but let's check that this works. If I click on Barcelona, it sends the message and hopefully it's gonna get a reply back.

Conclusion and Next Steps

The formatting is going a little bit off with how it's getting my suggested replies, 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 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 Planet No Code where we've got hundreds of Bubble tutorial videos exclusive to our members and to our community.