How to integrate a chatbot in Bubble

The simplest way to integrate a chatbot in Bubble is to create a text input + repeating group for messages on the page, then call an AI API (like OpenAI or any chatbot API) through the API Connector, and finally display the response as a new Message record in your database or directly on the page. The core idea is: user sends text → Bubble workflow triggers API call → API returns text → Bubble shows response.

What You Need

You only need two things: the API Connector plugin and a simple UI (input field + button + repeating group). A chatbot is basically just Bubble calling an external API and showing the response as messages.

Step-by-Step: How to Integrate a Chatbot

Set up the API

• Install the API Connector plugin.
• Create a new API call that sends the user’s text to your chatbot provider (ex: OpenAI). You can send plain text messages.
• Use POST as the method and set JSON body with the user message.

// Example body for OpenAI's chat completion endpoint
{
  "model": "gpt-4o-mini",
  "messages": [
    { "role": "user", "content": "<your dynamic user message>" }
  ]
}

Build the UI

• A Repeating Group that shows messages (user + bot).
• A Text Input for the user to type.
• A Button to send the message.

Create the workflow

• When the button is clicked, run a workflow step that calls your API Connector call.
• Save the user’s message and the bot’s reply either to the database (Thing: Message) or just display it temporarily.
• Refresh the repeating group so it shows both messages in order.

What Actually Matters in Bubble

• You can run the chatbot API call as an Action (client-side) or as a Backend Workflow for heavier logic.
• If you need conversations per user, store messages in the database and link them to a Conversation type.
• If your API needs a secret key, set it as Private inside the API Connector so Bubble hides it from the browser.

Minimal Working Example of the API Call

POST https://api.openai.com/v1/chat/completions

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