# How to integrate a chatbot in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans (API key required)
- Last updated: March 2026

## TL;DR

Integrate an AI chatbot into your Bubble app by connecting to the OpenAI or Claude API via the API Connector, building a chat UI with message history in a Repeating Group, maintaining conversation context by sending previous messages, and handling streaming responses for a real-time experience.

## Overview: Integrating a Chatbot in Bubble

This tutorial shows you how to embed an AI chatbot powered by OpenAI GPT or Anthropic Claude into your Bubble app. You will configure the API Connector, build a chat interface with message history, maintain conversation context, and handle responses.

## Before you start

- A Bubble account with an existing app
- An OpenAI or Anthropic API key
- API Connector plugin installed
- Basic understanding of Bubble workflows and data types

## Step-by-step guide

### 1. Configure the AI API in the API Connector

Go to Plugins tab, open API Connector, add a new API called ChatAI. Create a call named SendMessage: POST to https://api.openai.com/v1/chat/completions. Add header Authorization: Bearer [api_key] (Private) and Content-Type: application/json. The body includes model, messages array, and temperature. Initialize with sample data.

```
{
  "model": "gpt-4",
  "messages": <messages_json>,
  "temperature": 0.7,
  "max_tokens": 1000
}
```

**Expected result:** The API Connector is configured to send chat completions to OpenAI.

### 2. Create the chat data structure

Create a ChatSession data type with fields: user (User), title (text), created_at (date). Create a ChatMessage data type with fields: session (ChatSession), role (text: user or assistant), content (text), sent_at (date). This stores the full conversation history.

**Expected result:** ChatSession and ChatMessage data types exist for storing conversation history.

### 3. Build the chat interface

Create a chat page. Add a Repeating Group with type ChatMessage, data source: Search for ChatMessages (session = current session, sorted by sent_at ascending). In each cell, display the message content with conditional styling: user messages aligned right with a blue background, assistant messages aligned left with a gray background. Below, add a Multiline Input for the user's message and a Send button.

> Pro tip: Auto-scroll to the bottom of the Repeating Group after new messages by using the Scroll to entry action on the last item.

**Expected result:** A chat interface displays messages with visual distinction between user and assistant messages.

### 4. Build the send message workflow

When Send is clicked: Action 1: Create ChatMessage (role=user, content=input value, session=current). Action 2: Build the messages_json parameter by formatting all ChatMessages in this session as a JSON array of {role, content} objects. Action 3: Call ChatAI - SendMessage with the messages array. Action 4: Create ChatMessage (role=assistant, content=API response's choices first item's message content). Action 5: Clear the input.

**Expected result:** User messages are sent to the AI and responses are displayed in the chat.

### 5. Add system prompts and conversation management

Prepend a system message to the messages array that defines the chatbot's personality and behavior: {role: system, content: You are a helpful assistant for [your app]}. Add a New Chat button that creates a new ChatSession. Show a sidebar listing previous sessions. For production chatbots with custom knowledge bases and fine-tuned responses, consider working with RapidDev.

**Expected result:** The chatbot follows your system prompt instructions and users can manage multiple conversations.

## Complete code example

File: `API Connector payload`

```json
{
  "API_Name": "ChatAI",
  "Call_Name": "SendMessage",
  "Method": "POST",
  "URL": "https://api.openai.com/v1/chat/completions",
  "Headers": {
    "Authorization": "Bearer YOUR_API_KEY (Private)",
    "Content-Type": "application/json"
  },
  "Body": {
    "model": "gpt-4",
    "messages": "<messages_json>",
    "temperature": 0.7,
    "max_tokens": 1000
  },
  "messages_json_format": [
    {"role": "system", "content": "You are a helpful assistant."},
    {"role": "user", "content": "First user message"},
    {"role": "assistant", "content": "First assistant response"},
    {"role": "user", "content": "Second user message"}
  ],
  "Data_Types": {
    "ChatSession": {"user": "User", "title": "text", "created_at": "date"},
    "ChatMessage": {"session": "ChatSession", "role": "text", "content": "text", "sent_at": "date"}
  },
  "Workflow": {
    "Step_1": "Create ChatMessage (role=user)",
    "Step_2": "Format all session messages as JSON array",
    "Step_3": "Call ChatAI - SendMessage",
    "Step_4": "Create ChatMessage (role=assistant, content=response)",
    "Step_5": "Clear input and scroll to bottom"
  }
}
```

## Common mistakes

- **Not sending conversation history with each API call** — The AI has no memory between calls. Without previous messages, each response is independent and lacks context Fix: Build the messages array from all ChatMessages in the current session and send it with every API call.
- **Sending the entire conversation history without truncation** — Long conversations exceed the model's context window limit, causing API errors Fix: Limit the messages array to the most recent 20-30 messages, or use token counting to stay within the model's limit.
- **Exposing the API key in client-side elements** — Anyone can view the key in browser dev tools and use it for their own API calls at your expense Fix: Always mark the API key as Private in the API Connector so it stays server-side.

## Best practices

- Mark API keys as Private in the API Connector
- Send conversation history with each call for context continuity
- Truncate old messages to stay within model context limits
- Add a system prompt to define the chatbot's personality and boundaries
- Store all messages in the database for conversation history
- Show a loading indicator while waiting for the AI response
- Add error handling for API timeouts and rate limits

## Frequently asked questions

### How much does the OpenAI API cost?

GPT-4 costs $30 per million input tokens and $60 per million output tokens. GPT-3.5-turbo is significantly cheaper at $0.50/$1.50. A typical chat message costs $0.01-0.05 with GPT-4.

### Can I use Claude instead of GPT?

Yes. Configure the API Connector to call Anthropic's API at https://api.anthropic.com/v1/messages with the x-api-key header and the Anthropic message format.

### How do I limit what the chatbot can discuss?

Add strict instructions in the system prompt: Only answer questions about [your topic]. If asked about anything else, politely redirect to the relevant topic.

### Can RapidDev help build an AI-powered app?

Yes. RapidDev specializes in Bubble development and can build sophisticated AI applications with custom chatbots, knowledge base integration, and fine-tuned model responses.

### How do I handle slow API responses?

Show a typing indicator animation while the API call is in progress. Set a timeout on the API Connector call and show an error message if it takes too long.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-with-a-chatbot-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-with-a-chatbot-in-bubble