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.
The best way to learn Bubble.io?
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.

Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
As long as you’re subscribed! With our monthly subscription, you get unlimited access to all 500+ videos, our growing course library, and the AI No-Code Coach.
Your subscription includes:
- Bubble Beginner Essentials – Get up and running fast.
- Build a ChatGPT Clone – Integrate AI into your no-code apps.
- Build Your SaaS Website with AI – Learn to create a scalable startup site.
Plus, new tutorials every week!
The AI No-Code Coach is your first stop for instant answers. If you need deeper help, you can book 1:1 Bubble coaching for expert guidance.
Yes! If you don’t see real progress within 14 days, let us know, and we’ll issue a full refund—no questions asked.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
If you’re serious about building a successful SaaS startup, check out Mastery—our intensive mentorship program. Mastery goes beyond Bubble.io development and includes:
- 1:1 mentorship to fast-track your progress
- Marketing strategies tailored for no-code founders
- Product management insights to scale your startup
- Personalized support from experienced founders