How to Build an AI Chatbot in Bubble.io Without Code
A complete guide to building a fully functional AI chatbot inside Bubble.io — covering conversation history, streaming responses, system prompts, and deployment — without writing a single line of backend code.
How a Bubble.io Chatbot Actually Works
Before building, understand the data structure that makes multi-turn conversation possible.
An AI chatbot is not a single API call — it is a conversation thread where every message (user and AI) is stored and sent back to the model on each new message. This is what creates the feeling of memory and context.
In Bubble.io, you need three data types:
Conversation
One record per chat thread. Fields: User (User), Created Date, Title (text), System Prompt (text).
Message
One record per message. Fields: Conversation (Conversation), Role (option set: user/assistant), Content (text), Created Date.
Option Set: Role
Create an Option Set with two options: user and assistant. This maps directly to the OpenAI message format.
Configure the API Connector for Chat
The key difference for a chatbot is that you pass the full conversation history — not just the latest message.
In the API Connector, set your chat completions call with this body structure. The <messages_array> parameter will be replaced dynamically with your conversation history:
{
"model": "gpt-4o-mini",
"messages": ,
"max_tokens": 800
} 📌 You will construct the messages_array dynamically in your workflow using a backend workflow that formats all messages in the conversation as a JSON array before calling the API.
The Chatbot Interface in Bubble
A clean chat UI requires three main elements.
Message list (Repeating Group)
Create a Repeating Group with data source: Search for Messages with Conversation = Current conversation, sorted by Created Date ascending. For each row, show the message content with left/right alignment based on Role = ‘user’.
Input area
Add a Multi-line Input at the bottom of the page. Add a Send button that triggers the main chat workflow. Add a keyboard shortcut: when Enter is pressed (and Shift is not held), trigger the same workflow.
Typing indicator
Add a small animated element (three bouncing dots) that is only visible when a custom state ‘is_loading’ is true. Set this state to true when the API call starts and false when it completes.
Sending a Message and Getting a Reply
This is the main workflow that runs every time a user sends a message.
Save the user message
Create a new Message: Conversation = current_conversation, Role = user, Content = Input’s value. Clear the input element immediately so the user can see the message sent.
Set loading state
Set custom state is_loading = true. This shows the typing indicator while waiting for the AI response.
Build conversation history
Trigger a backend workflow that loops through all Messages in the current Conversation (oldest first) and formats them as the OpenAI messages array. Pass this array to the API call.
Call the OpenAI API
Trigger the API Connector call with the formatted messages array. The model receives full conversation context and generates a contextually appropriate reply.
Save the assistant reply
Create a new Message: Conversation = current_conversation, Role = assistant, Content = API result’s choices[0].message.content.
Clear loading state
Set custom state is_loading = false. The repeating group auto-refreshes and displays the new AI message.
Giving Your Chatbot a Persona and Purpose
The system prompt is the most powerful tool for controlling chatbot behaviour.
A system prompt is a message with role system that always appears first in the messages array. It defines who the chatbot is, what it knows, how it speaks, and what it will and will not do.
What to Include
- The chatbot’s name and role (“You are Alex, a support agent for Acme SaaS”)
- Tone and style (“Respond in a friendly, concise tone”)
- Knowledge scope (“Only answer questions about our product features”)
- Escalation instructions (“If asked about billing, direct the user to support@acme.com”)
Bubble Implementation
- Store the system prompt in the Conversation data type — one per chatbot instance
- Prepend it to the messages array before every API call
- Make it editable in an admin panel so non-technical staff can update it
- Version it so you can roll back if a change causes unexpected behaviour
Want a Custom AI Chatbot Built in Bubble.io?
SA Solutions has built production AI chatbots for customer support, onboarding, and in-app assistance. We handle conversation architecture, system prompt engineering, and UI polish.
