ChatGPT and OpenAI Real Time Streaming Plugin Demo

Demonstrating OpenAI Real-Time Streaming in Bubble

In this Bubble tutorial video, I'm going to demonstrate to you how you can add in OpenAI real-time streaming into your Bubble app. You can really get that ChatGPT clone going and we'll be using this plug-in here called ChatGPT with real-time streaming by Launchable AI. Let's dive right into it.

Setting Up the Plugin

In my Bubble app here, I already have the plug-in installed and all I need to add to the plug-in page is my OpenAI API key. I'll 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.

Designing the App Interface

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 plug-in provides in order for the plug-in to load in all its necessary files. So I add that into my page.

Setting Up the Workflow

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 or history. And then the message content that I'm sending, that is my multi-line input.

Displaying Messages and Resetting 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.

Testing the ChatGPT Integration

Right, let's preview that. 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.

Conclusion and Further Exploration

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 program, please leave a comment because I think there's lots more that we can explore here.