How To Connect The OpenAI Assistants API With Bubble (Complete Guide)

15th of July, 2025

The OpenAI Assistant API is a powerful upgrade from the traditional Completions API, offering enhanced capabilities for building intelligent chat applications. Unlike the Completions API, the Assistant API can maintain conversation context across multiple chat sessions and integrate advanced tools like the OpenAI Code Interpreter.

This comprehensive guide will walk you through integrating the OpenAI Assistant API with your Bubble application, covering everything from initial setup to creating a fully functional chat interface with persistent conversation memory.

Should I Use the Assistant API or the Completions API?

Before diving into the implementation, it’s important to understand the key differences between the Assistant API and the Completions API:

Assistant API Benefits:

• Maintains conversation context automatically across multiple chat sessions
• Supports file uploads, document processing, and other built-in tools like Code Interpreter
• Stores conversation memory internally (no need to manage chat history manually)
• Better suited for complex, multi-turn conversations

Completions API Benefits:

• Lower latency for quick responses
• Simpler setup for basic use cases
• Better for single-turn interactions

The Assistant API is ideal for applications like customer support systems, educational chatbots, or any scenario where you need to maintain context across extended conversations.

1 – Set Up Your Bubble Application

Create the Basic Page Structure

First, you’ll need to set up the basic page layout for your chat application:

1. Navigate to the Design tab in your Bubble editor
2. Select your page and set the container layout to Column with center alignment
3. Add a Text element for the page title and style it with:
   • Large font size
   • Bold formatting
   • Orange color (or your preferred brand color)
4. Add two Group elements:
   • Group A: For the assistant creation interface
   • Group B: For the chat interface

Configure the Assistant Creation Group

In the first group, let’s add the following elements:

1. Single-line input element for the name of the Assistant.
2. Multi-line Input element for assistant instructions
   • Set width to 250px
   • Add 20px bottom margin
   • Center alignment
3. Button element labeled “Generate Assistant”
   • Center alignment

Set this Group A to be visible on page load and enable Collapse when hidden.

Set Up the Chat Interface Group

For the second group, you’ll need a repeating group to display chat messages. Each cell should contain:

• Message content display
• Conditional formatting to distinguish between user and assistant messages
• Proper sorting by creation date

2 – Configure Data Types and Custom States

Create Required Data Types

Set up the following data types in your Bubble database:

Chat Data Type:

• messages: List of Messages

Message Data Type:

• creator: User (to identify message sender)
• message content: Text (the actual message text)

Configure Custom States

This application will need a few custom states to store our API ids.

Select the current page and click on the “i” icon to reveal the option to add a new custom state.

Add the following custom states:

1. a_id (Text): Stores the OpenAI Assistant ID
2. t_id (Text): Stores the conversation thread ID
3. chat (Chat): References the current chat session

3 – Set up OpenAI API

Generate Your API Key

1. Visit the OpenAI website and create an account if you do not have one already.
2. Navigate to the Dashboard and select API Keys
3. Click Create new secret key
4. Copy the generated key for use in Bubble

Configure the API Connector

1. Install the API Connector plugin in Bubble
2. Add a new API named “OpenAI”
3. Set authentication to Private key in header

Setting Up API Calls

The Assistant API requires multiple sequential calls to function properly. Here’s how to configure each one:

1. Create the Assistant Call

API Endpoint: POST https://api.openai.com/v1/assistants

Request Body:

{

  “model”: “gpt-4”,

  “name”: “[dynamic_name]”,

  “instructions”: “[dynamic_instructions]”

}

Configuration:

• Set as Action (not Data)
• Use POST method
• Make name and instructions dynamic fields
• Set up the header “OpenAI-Beta” with the value “assistants=v2”

2. Create Thread Call

For this thread API call, we don’t actually need to set up a request body. Here’s the details to use when setting this call up:

API Endpoint: POST https://api.openai.com/v1/threads

Configuration:

• Set as Action
• Use POST method
• Set up the header “OpenAI-Beta” with the value “assistants=v2”

3. Create Message Call

API Endpoint: POST https://api.openai.com/v1/threads/[thread_id]/messages

Request Body:

{

  “role”: “user”,

  “content”: “[message_content]”

}

Configuration:

• Add [thread_id] as a dynamic parameter in the URL
• Set content as dynamic field
• Use POST method
• Set up the header “OpenAI-Beta” with the value “assistants=v2”

4. Run Assistant Call

API Endpoint: POST https://api.openai.com/v1/threads/[thread_id]/runs

Request Body:

{

  “assistant_id”: “<assistant_id>”

}

 

Configuration:

• Add [thread_id] as dynamic URL parameter
• Set assistant_id as a dynamic field in the request body.
• Use POST method
• Set up the header “OpenAI-Beta” with the value “assistants=v2”

5. Get Messages Call

This call is similar to the create message call but instead of POST, we’ll use GET instead.

API Endpoint: GET https://api.openai.com/v1/threads/[thread_id]/messages

Configuration:

• Add [thread_id] as dynamic URL parameter
• Use GET method
• Set as Action for workflow use

Now that we’ve set up all the API calls, we can now proceed to building the workflows needed for our Assistant application.

4 – Build Workflows

Assistant Creation Workflow

Click on the “Generate assistant” button in the Assistant Creation Group and select “Add workflow” in the Appearance tab.

When the Generate Assistant button is clicked:

1. Create a new Chat in your database
2. Call the Create Assistant API with the instruction input value. Use the dynamic data option to set the instructions to have the value in our Multiline Input element. Set the name field to the value in the name input element.
3. Call the Create Thread API to initialize a new conversation
4. Hide Group A and Show Group B
5. Set the custom states in the page based on the results from the previous steps.

Message Sending Workflow

When a user sends a message:

1. Create a new Message with:
   • Creator: Current User
   • Content: Input value
2. Call the Create Message API with the message content
3. Call the Run Assistant API to process the message
4. Add the message to the current chat’s message list
5. Clear the input field

Message Retrieval Workflow

Set up a recurring workflow that runs every 2 seconds:

1. Call Get Messages API to retrieve all thread messages
2. Add conditional logic so that our workflow only creates new messages when:
   • The latest message role is “assistant”
   • The message content is different from the last message in the chat
3. Create a new Message with the following values:
   • Creator: Empty (for assistant messages)
   • Content: First item’s content from API response
4. Add the message to the current chat

Important: The Get Messages API returns messages in reverse chronological order (newest first), so always use the first item to get the latest assistant response.

5 – Test Your Integration

Initial Setup Test

1. Enter the name of the assistant and the specific assistant instructions in the provided input fields.
2. Click Generate Assistant
3. Verify that the chat interface appears
4. Check that custom states are properly set

Message Flow Test

1. Send a test message in the chat interface
2. Verify the message appears immediately in the chat
3. Wait for the assistant response (should appear within 2-4 seconds)
4. Test multiple message exchanges to ensure context is maintained

Conclusion

With this guide, you should now be able to successfully integrate the OpenAI Assistant API with your Bubble application! Learning these basics provides a robust foundation for building intelligent chat applications with persistent conversation memory.

Ready to build more Bubble integrations with AI? You can read our guide on how to connect a fine-tuned OpenAI model to your Bubble app!

Get the Bubble Crash Course for FREE