Help! Stuck on Create a Real-Time User & AI Chat Interface

[sehrish.mohsin]

Hi everyone, I’m currently building a chat interface in Bubble where a user can send messages and get responses from an AI (via an API call). I’m still new to Bubble and would love some help setting this up properly.

What I want to build:
• A chat UI with:
• A text input for typing messages
• A send button
• A scrollable area that shows messages from both the user and the AI in chat bubble format

The flow I’m aiming for:
1. User types a message and clicks “Send”
2. The message is immediately shown in the chat view as a user bubble
3. An API call is triggered to get the AI’s response
4. The AI’s reply is then displayed as a separate bubble underneath

What I need help with:
• How should I structure the database (or use custom states) to store/display the messages?
• How can I use a Repeating Group to show messages in the right order?
• What’s the best way to update the chat dynamically when the AI response comes in?
• How can I visually distinguish between user and AI messages (e.g., bubble color, alignment)?

I’d really appreciate any guidance, examples, or tutorials. Thanks in advance for your help!

[hi.luisacosta]

Youtube is going to be a big help here. There are great tutorials by Matt Neary to get you going with the basics. Once you can set up a chat interface, then move onto the API streaming, there are videos for that too.

It’d faster to start on Youtube + trying on the side as you watch than using the forum, imo.

[sehrish.mohsin]

Thank you
Yes I thought so - been watching videos hopefully I can figure it out! Though most of the videos are for the web interface and not native mobile app :-/