ChatGPT and OpenAI Real Time Streaming Plugin Demo
In this Bubble.io tutorial we demonstrate how to create a Pie Chart in Bubble using ApexCharts by Thimo.
Unlock real-time ChatGPT streaming: Learn how to add OpenAI's cutting-edge tech to your Bubble app in minutes!
Master Bubble's ChatGPT integration: Discover the simple steps to create a dynamic ChatGPT clone with streaming responses.
Elevate your Bubble skills: Transform your app with OpenAI streaming and take your AI text generation to the next level.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
3 ways we support solopreneurs
Our team is here to help, with a combined 30+ years working for internet startips.
Learn Bubble
Explore our library of 300+ Bubble and no code tutorial videos. Watched by over 800k no coders on YouTube.
Bubble Coaching
Troubleshoot your Bubble app and build new no code features with our in house Bubble expert.
Mastery
Ready to take your SaaS idea to the next level? Join our exclusive Mastery program for personalised content & mentoring.