So in my Bubble app here, I already have the plugin installed, and all I need to add to the plugin page is my OpenAI API key.

OpenAI Secret Key

So I go into my OpenAI account and I'll create a new secret key. Copy that, and I'll be deleting this as soon as I've completed this video and pasting it into here. Now, I don't need to fill in the Dev field because I just want the same key used in my live app as my Dev app. Then if I go to design, I've got a repeating group set up to show some text. I've got a multi line input and I've got a submit button. So first of all, I need to add in the ChatGPT data container. This is the element that the plugin provides in order for the plugin to load in all its necessary files.

So I add that into my page. Then this is really simple and really easy to do. I go add workflow for send, and I go to plug ins and I say, send message w/ server. And then I just need to connect this up to the element on the page. So I say the container ID, and then I add in the connection info, and I add in the message history. And the message history is important because that's what we love about ChatGPT is its ability to remember the context of our conversation based on previous messages. So let's add in this final one of history. And then the message content that I'm sending, that is my multi line input. And then all I need to do is tell my repeating group to show the messages display messages. And I'll add one other thing in here, which is to reset the input so that it clears the input out. Right, let's preview that.

Testing

So I could ask it, what is the capital of Scotland? And you'll see the text streams in. And then to really demonstrate this, let's go with, Write a poem about there. I'm saying there because I'm proving that it picks up the previous messages in the conversation.So it should be about Edinburgh or at least Scotland.

And once more, there we go. Beautiful, isn't it? We get our text streaming into our Bubble app from OpenAI. We don't have to make the user wait for 50 seconds before we show them any text. It is streaming right in. So this is the end of this video. We're just touching on the fantastic way that you can use this plug in to add in OpenAI streaming into your Bubble app. If you would like any further demonstrations on this plug in, please leave a comment because I think there's lots more that we can explore here.