GPT-4 Chatbot with Bubble - OpenAI chat and text generation

Creating a No-Code AI Chatbot with OpenAI and Bubble

Okay here we go creating a no-code AI chatbot powered by OpenAI using GPT-4 in Bubble. Let's build it we have a blank slate. Here is every step you're going to need. Just a quick note upfront one is that GPT-4 is currently only accessible to beta users so you can follow this tutorial and use GPT 3.5 turbo and it's going to work just as well or at least the API calls will work as well of course GPT-4 promises much better text generation. Anyway here is my blank canvas in Bubble. In fact I am starting this with a new Bubble app all together and first of all I'm going to put in a multi line drop down and start my page into a column align it center put a bit of padding up top and then I'm going to add in a button because remember we are making an AI chatbot so we need somewhere to put a message and then say send message from my button.

Setting Up the API Connector in Bubble

Right let's dive right in to the where no code meets low code using the API documentation in OpenAI so we have to interpret this into the Bubble API connector. So I go to add plugins API connector there we go and this isn't just restricted to OpenAI in fact check out subscribe to our YouTube channel we're releasing multiple videos each week and you'll see how to do all sorts of things from web scraping through to speech to text it all starts here with the Bubble API connector so we'll call this send no fact the the title is OpenAI that's the API's name we're going to authenticate with a private key in the header how do I know that because in the header h for header we have authorization bearer and then our API key there is another header field here that's required so I'm going to add it into shared header content type application JSON.

Configuring the API Call

And then I start building up my actual API call so this is where I write send message and I'm going to change it to an action because I want this to be a action I can take during a workflow and because I'm sending data I'm going to go change it to post and then going to copy everything that is in the data field of the API call and paste it into there so here we go you can see there are a number of different models and if I open up that though I see it there we go so these are different models that you can use currently as of the time recording towards the end of March 2023 we're going to be using GPT for because I've got beta access to it if you don't have beta access your next best bet is to use this one GPT 3.5 turbo that's basically the one that was powering ChatGPT and everyone just a fly probably got so excited about but for now we're going to be using GPT 4 so I'm going to change that to 4 and we need to know where we're sending our call to which is this endpoint here and we need our API key so I know that the key value starts with the word bearer and then I go into my OpenAI account and I create a new key I'm going to copy that and this key will be deleted by the time this video is published paste it in and I yeah let's just see what happens if I send hello let's try okay I've got a response and the response from OpenAI is hello how can I help you today so there we go quite a standard opening to a chat so I'm going to click save and then let's get that working on our page here.

Connecting the API to the UI

So this is going to be enter your message here and how do I connect the API connector API that I've just set up to the the UI that I've created on this page so I go start edit workflow and then because I made an action and I've initialized the call and it's been successful I get it here OpenAI sends message you'll see that that corresponds to the labels here OpenAI send message so I send the message and in this case and we're going to expand upon this I'm going to start off simple so I just get it working with sending one message at a time and getting one response back but I will in this video be covering how to get the conversation going one of the magic things about the about GPT is the ability to have that conversation that OpenAI GPT is aware of messages that have been sent previously and it knows it's best those in mind when it composes the replies it's aware of the conversations history but for now we'll keep it simple because I'll put the multi-line input into there and then I need a way of displaying it so I will create a repeating group change this to a column give it a little bit spacing up top I'm going to create a data type called message because I'm going to store every reply I get back from OpenAI as a message within my database so I shall call this text no that's I'll just call this content to make it more clear because it's of type text.

Setting Up the Workflow

So when my button is clicked I send anything in my text box to OpenAI and then Bubble was going to get a response and I want to save that response so I create a new thing and I create a message and then in the content I get the result of step one and just because I've been working a lot with the OpenAI API in the last few weeks I know that I go into choices and it's termed as choices because you can send with your your initial API request the option of OpenAI returning more than one option as a reply because we haven't stipulated that we are saying send us back one reply so it's the first item and then message content and then to display that I would say messages do a search for messages and then I'm going to arrange them in reverse date order so in fact they were sought by date descending so that the latest one appears at the top I'm going to get rid of the row limit add in a text box text box is messages content make this width 100% then to get this just a bit more nicely starved get rid of the min height there that's how put some padding in around the text let's go for 16.

Testing the Chatbot

Okay we should be able to test that so I should ask a question I'm going to ask what is the capital city of the UK that's where we're based send message okay I get an error right I do like to keep these videos raw so what have I done wrong here so let's go back into the API connector and ah I've not put my message in right so I need to make this I can't believe I missed this I need to make this basically dynamic input or dynamic values as Bubble terms here so I will call this message content right I untick private because I want to be able to access that in my workflow I'm gonna go back to my workflow and apologies if you've been following along that was an oversight for me I put my multi-line input into here so you'll see now that rather than displaying the whole of the day through or the body of the call it is now just giving me space to replace this content this part of the message let's try that what is the capital city of the UK the capital city of the United Kingdom is London perfect it's correct amazing.

Implementing Conversation History

Now what I want to ask a follow-up question well if I was to remove the content of the box here and send another question I would get an intelligent answer back from OpenAI but it's not going to be aware of the previous points of the conversation so this is moving on to the second part of this video so if I look into the the documentation documentation for the for chat you can see here that the conversation needs to be sent to OpenAI basically the history of the conversation needs to be sent each time so your messages part here will begin to look like this part here so how do we do that in Bubble well there's a way I'm going to show you so instead of the dynamic content being there I'm going to make it all of this becomes dynamic so but and I call this messages instead and then I need a way of building up the correct JSON syntax so I don't get any errors and the way I'm going to do that is by adding in a few extra steps so if I clear that out I shall create a message because I need the history I need a record of what I send and what I get back so before I send the message I'm going to make a I'm going to make the I'm going to make a message here so in fact this is so this is the multi-line inputs value and then going to create a JSON version of it and so this has to follow the formatting of here so it is everything expressed in a row like this so I'm going to copy that row paste it in and then the actual text part is going to be the same it's that what is input into a multi-line input and but and this is where my earlier video on ChatGPT something that I missed I've recorded a follow-up video to it but the thing I missed was to make it JSON safe and that means that if there are any special characters or punctuation that could result in the JSON syntax error Bubble escapes those characters it means putting a backslash in front of the punctuation so that it's not confused as being part of the code now and something that is easy to overlook is that Bubble also puts speech marks around automatically for you so I'm going to remove the speech marks otherwise my content net is double speech marked I then send my messages and this needs to now be a list of all of my messages so I can go with with do a search for messages and then the order of these is going to be the creative date with the oldest one first so the sending is no and if I look at the correct syntax here it needs to end in a curly bracket and they're joined together with a comma so I say add in the JSON expression for each one join with comma and the space.

Handling OpenAI Responses

I then need to create a new message with the reply from OpenAI and so I say content equals results a step to choices first item message content I then need to create a JSON equivalent to it and while I'm thinking of that I just need to go through and change this to user it's really worth experimenting with these different parameters here because the is there an example on this page or is it better the example here the fact that there are three different types you can have system user and assistant for the point of this video I'm just going to be using user and assistant because it gets it working but I drew an experiment with using system and pushing that as the first request because it sets the tone it sets an identity for OpenAI to reply so in this case is you are a helpful assistant you could say you are an SEO copywriter you know there people have got so creative over the last few weeks with just what you can do with it so that's the user and then this one is the assistant so I paste in my line of JSON and I know that it is the assistant and then the content is exactly what I'm saving up the top so this is like my human readable value and then this is my JSON version so I go choices first item message content and I think on this one too and this might come back to bite me I need to make this JSON safe as well because OpenAI could return with special characters Bubble will intelligently you know unescape them I don't know if that's the correct term but Bubble will format stuff back from OpenAI but I need to make that formatting safe again when I send it in a follow-up message so our workflow here creates a message that's my user input it then sends that to OpenAI along with any historical messages and it creates a new message as replies and that should mean that this is quite a lean approach because each time I send it OpenAI is getting the history now let's test it out I've got a nasty feeling I've missed stuff but I do like doing these longer videos and I like to show when things don't work because that's all part of the process so in actual fact so as not to cause any confusion I'm going to delete that first message.

Final Testing and Refinements

Right so let's go for what is the capital city of the UK send message okay so there's the my users input and we're just waiting for OpenAI to send back the assistants reply and there we go right so now let's check to see if it really is content history aware of the conversation I'm going to say can you recommend an itinerary for a day trip there okay so I'm not referring to London again will it be aware of the history of the conversation so we see the loading bar going across it's taking its time hopefully we're not going to get an error maybe OpenAI is returning quite a large chunk of text we'll see I'm also aware of the fact that Bubble can time out with responses to GPT-4 because GPT-4 can take such a long time to reply I'm really hoping that this will work otherwise I revert it back to GPT 3.5 turbo or I'll try a shorter message I'm getting the feeling that oh here we go that was so close but we see you know I have lived in London I can testify that Buckingham Palace Westminster Abbey all of these locations are indeed in London so that's why it took so long because they've actually given us like a there we go like an hour by hour including times including locations all different things to do in London now there's one thing that I will add to clean this up is that when the user submits a message I'm going to reset the inputs and then I'm going to focus on the input so that means that the the cursor is going to go back to an empty field so let's delete all our messages and we'll try that again in fact even better just from a you user experience perspective I say on page load set focus to the margin line input and then if I refresh the page my cursor is there automatically blinking away so let's go different let's say what is the capital of France send message the capital of France is Paris and then I'll say name me three things I can eat there so by putting in three I'm hoping that it's going to limit it to quite a short response and so we don't have to wait so long there we go croissants escargot and creme brulee the only thing that I would change on that is that I would remove this part up to up to here that's going to work so yeah my new message that saves the inputs value I then clear the input everything that goes OpenAI nothing is coming from the input so it doesn't matter that I've cleared it there it's all coming from my database of search messages I create a new message of the response and I reset the the input to the focus to my input and so there you have it I'm hoping that this is going to cover some of the questions that I've had on earlier videos to do with OpenAI because I've shown you here the whole process needed and I've shown you some rather impressive things you can do with GPT-4 remember if you've not got access to GPT-4 you can be putting in where is it here GPT 3.5 turbo that's going your call is going to work just as well doing that until you can get access please do subscribe to this channel we're so pleased with how well everything's going on YouTube we're putting up multiple videos each week if you have any requests for videos or any comments you know it's put them put them in the comment section on YouTube we read every single one of them and when you suggest the video more often than not we add it to our list so there you have it that is what I hope to be a very comprehensive take on building a chat bot using Bubble using OpenAI and using GPT-4.