Rutvij here. I’m the PMM for AI at Bubble and I’m super excited to announce a feature that’s been highly requested: support for API streaming!
Bubble Ambassadors, Insiders, Enterprise users, and Gold agencies have had early access for about a week. @bestbubbledev, one of our Insiders, was nice enough to pull together this demo.
What is streaming?
Streaming API responses allows you to receive real-time data updates from your API endpoints. There are both AI and non-AI use cases.
Specifically for AI use cases, enabling streaming means your users will see responses from services like ChatGPT or Claude word by word, instead of all at once. It’s a game-changer for building real-time features like AI chatbots.
How to get started
Set up an API call to the service of your choice
Set the data type as stream
Make sure to add “stream”: true or the equivalent parameter to your API call (based on the service you are calling — check their docs)
Select the values you want returned in the stream after initializing the API call
Just like regular JSON API calls, streaming APIs can be used both as a data source and within workflows. Make sure you check our documentation at this step, since Bubble behaves slightly differently on the client side versus the server side.
Resources
Documentation: Check out our detailed guide on how to set up and stream API responses.
Support: If you have any questions or need assistance, our support team is here to help.
What’s next?
We’re just getting started with API streaming! Right now, we support streaming text data. We don’t currently support audio and video streaming. We also don’t support streaming with mobile native yet on BubbleGo.
Start building!
We can’t wait to see how you’ll leverage streaming in your builds. Get ready to create cutting-edge AI apps with a seamless user experience!
Does Bubble’s streaming support currently handle SSE (Server-Sent Events), or is it limited to chunked application/json streams (like OpenAI’s streaming API)?
Can we get a quick guide spun up (along with a demo app)? I’ve been able to get the API call initialized but have no idea how to actually visualize the streamed text - I’ve tried displaying both the text stream itself and the text so far with no success
Same! I’ve got a support ticket going, but I also can’t get any of the text stream data into the design.
My API is connected (with stream enabled) and I receive a successful response when initialized. In my design, I’m able to see “is waiting,” “is done,” and “is streaming” values change in real-time, but the text never comes through (neither “text so far” nor “full text”).
I believe this is due to Bubble keeping the object “live” and refreshing all of its internal keys (text so far, full text, is streaming, etc.) as chunks arrive
If I’m displaying a list of message in a repeating group, I can stream the response from the client side to the last message/end of the group using this new functionality. Once the stream finishes, I save the response to the database then replace the streamed content with the saved data so it displays natively within the repeating group.
It works but does anyone know a better / more robust way to do it?
Here’s my makeshift setup that I just tested with:
I have a group with the data type “text stream” on the page. After API call step, I display the result of that step (entire text stream) in that group. Once it’s there, you can easily add a text element within the group and set it to “Parent group’s text stream’s text so far”
I tested - perfect!
BUT… I am using for long responses - I had a timeout at 300.000miliseconds… any chance to increase this time ?? Or should I stop before the time out and somehow, make another call sending the first text and ask to continue the response ???
Bu the way, can we stop the streaming??
