How to integrate a chatbot in Bubble

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.

1{
2  "model": "gpt-4",
3  "messages": <messages_json>,
4  "temperature": 0.7,
5  "max_tokens": 1000
6}

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.

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.

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.

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.