Complete Instructions (Setup Guide) Step 1: Configuration 🔑

Get your API Key from the OpenAI Dashboard.

In the Bubble Plugin Tab, paste your key into the OpenAI API Key field.

Step 2: Prepare your Database 🗄️

Go to Data > Data Types > User.

Create a new field called AI_Chat_Memory (Type: Text).

Step 3: Add the Widget 🎨

Drag the PlugBrain Chat Widget onto any page.

Customize the Title, Primary Color, and Bot Icon/Emoji.

Set the Saved History field to: Current User's AI_Chat_Memory.

Step 4: The Magic Workflow ⚡

Create a Workflow for the event: "A PlugBrain Chat Widget - Message Sent".

Action 1: Run Chat (With Memory).

New Message: Widget's latest_user_message.

History: Widget's chat_history.

Action 2: Run Element Action Receive AI Reply.

Reply Text: Result of Step 1's reply.

Updated History: Result of Step 1's updated_history.

Action 3: Make changes to Current User -> AI_Chat_Memory = Result of Step 1's updated_history.


V2 Full Instructions

1. 🔑 API Key Setup

Go to the Plugins tab in Bubble.

Find PlugBrain AI and paste your API keys in the respective fields (OpenAI, Anthropic, Google Gemini). Note: You only need keys for the providers you actually intend to use!

2. 🎨 Setting up the Chat Widget

Drag and drop the PlugBrain Chat Widget element onto your page.

Customize colors, bot icon/emoji, and placeholder text in the element's property editor.

Pro Tip: Use the Quick Replies field (comma-separated, e.g., "Help, Pricing, Contact") to generate drag-to-scroll action buttons above the input field!

3. 💬 Workflow: Standard Chat (Multi-Provider)

Trigger: When PlugBrain AI message_sent

Action 1: Choose Chat with Memory. Select your Provider (OpenAI, Anthropic, or Google), input the model (e.g., gpt-4o-mini, claude-sonnet-4-6, gemini-1.5-flash), and pass the Latest User Message and Chat History.

Action 2: Use Receive AI Reply (Element Action) to inject the result back into the UI widget.

4. 📚 Workflow: Specialist Assistant (OpenAI Knowledge Base)

Create your Assistant in the OpenAI Dashboard and copy the ID (asst_...).

Action 1: Choose Chat with Assistant. Paste your Assistant ID. Pass the Thread ID state (so it remembers the conversation) and the new message.

Action 2: Use Receive AI Reply to inject the response and the new Thread ID.

5. 🖼️ & 🎙️ Image & Audio Tools

Use the Generate Image or Transcribe Audio actions anywhere in your backend or frontend workflows (These are OpenAI exclusive features).


📖 Complete Instructions & Documentation
To unlock the full potential of V3, you need to connect the plugin to your Bubble Database. Here is the ultimate guide to setting up Chat History.

🗄️ 1. Database & Custom State Setup
Create a Data Type in Bubble called Chat with fields: Title (Text), Preview (Text), and History (Text).

On your page, create a Custom State called Current_Chat (Type: Chat). This will act as the brain, telling Bubble which conversation the user is currently looking at.

In the PlugBrain element properties, set saved_history to: Your Page's Current_Chat's History.

The Workflows (How to Save & Load)
Scenario A: User opens an Old Chat

Event: A PlugBrain AI Old Chat Opened

Action: Set State -> Current_Chat = Do a search for Chats (Unique ID = This PlugBrain AI's selected_chat_id) :first item.
(The plugin will instantly read the new History and draw the chat!)

Scenario B: User clicks New Chat

Event: A PlugBrain AI New Chat Requested

Action: Set State -> Current_Chat = (leave value empty).

Scenario C: User Sends a Message

Event: A PlugBrain AI Message Sent

Step 1 (If New Chat): Only when Current_Chat is empty -> Create a new Chat (Preview = latest_user_message). Then, Set State Current_Chat to the Result of Step 1.

Step 2 (The AI): Run the Chat (With Memory) Server Action. Pass Current_Chat's History and latest_user_message.

Step 3 (Save): Make changes to a thing -> Current_Chat. Update the History field with the JSON output from Step 2, and update the Preview.