How to add a chatbot to a Bubble app

A simple way to add a chatbot to a Bubble app is to create a repeating group to show the messages, a multiline input for the user to type, and a backend workflow that sends the user’s message to an AI API (like OpenAI) using the API Connector. Each time the user sends a message, you create a new “Message” thing in your database, call the API, save the chatbot’s response as another “Message”, and the repeating group updates automatically.

What you need to build

You only need three Bubble parts: a data type for messages, a UI to show and send messages, and a backend workflow that calls an AI API. Bubble doesn’t have a built‑in chatbot element, so you assemble it using normal elements plus the API Connector.

• Create a data type called Message with fields: text (text), is_from_user (yes/no), and created\_at (date).
• On the page, add a Repeating Group showing Messages, sorted by created date.
• Add a Multiline Input and a Send button.

How to call an AI model

Use the API Connector plugin. Create an API call to your AI provider. For example, OpenAI’s chat completions endpoint works well. You will send your user’s message and get a text response back.

{
  "model": "gpt-4o-mini",
  "messages": [
    { "role": "user", "content": "<insert dynamic message>" }
  ]
}

Build the workflow

• When user clicks Send, create a new Message with is_from_user = yes.
• Trigger a backend workflow (scheduled API workflow) and pass the message text.
• Inside that backend workflow: call the API Connector call and get the AI’s response.
• Create another Message with is_from_user = no and the returned text.

Display the conversation

The repeating group (set to Do a search for Messages) will refresh and show both the user’s and the AI’s messages. Style them by using conditional formatting or two groups inside the cell—one for user, one for bot—shown conditionally based on is_from_user.

This setup gives you a real, functional chatbot built fully inside Bubble, using Bubble’s native workflows and a real API call.