Step-by-Step Guide to Building an AI Assistant with Bubble.io (No Plugins)

In the fast-moving world of entrepreneurship and app development, innovation is crucial. For those exploring Bubble.io, there are endless possibilities, especially for creating an AI assistant without plugins. Whether you're an entrepreneur wanting to improve your app or an experienced Bubble.io developer looking to try new things, this guide will help you build a smart assistant using only APIs. Get ready to turn your ideas into reality and take your app to the next level!

Here are some important terminology:

What is an AI Assistant?

An OpenAI Assistant is a tool that uses AI to have conversations. It's built with advanced language models like OpenAI’s GPT, which can understand and create natural language responses. You can add it to websites, apps, or platforms to do things like answer customer questions, create content, help with learning, increase productivity, and provide entertainment. In Bubble.io, an OpenAI Assistant can improve apps by adding features like automatic replies, personalized suggestions, and task automation, giving users a smooth and smart experience.

Here is the setup:

Step 1: Log in to Open AI and create an assistant

Create an open AI account on https://platform.openai.com/playground/complete

On Playground, Create a new assistant with system instructions. For example, Here I am creating a travel assistant which you can see in the image below:

On assistant creation, the assistant ID will be automatically generated by bubble.io which we will use later.

Step 2: Generate Secret API Token/Key in Open AI

Go to: https://platform.openai.com/settings/organization/api-keys
Create a new API key there by clicking the button shown in the next picture

Step 3: Setup API Secret key in Bubble

Now go to api connector in your bubble.io app and set the Open AI secret key in the Header for all open AI calls.

What does the Private key in the Header mean in the bubble.io api connector?

This method involves adding the key to the header of all requests, usually under the parameter name Authorization, though you can use a custom name as specified in the external API documentation if necessary.

Below image and explanation of the image were taken from the bubble.io manual.

1. The first is the name of the parameter the server needs.

2. The second is the actual API key for the development version of your app.

3. The third is the API key for the live version of your app.

What does a private key in the header look like?

Authorization: Bearer <token>

The example above would be one row of the header – it also contains other data. The <token> is replaced by the actual token without the <> signs just like in our example below

What are shared headers for api calls?

In Bubble.io, the "shared header" in the API Connector lets you set common HTTP headers that will be automatically added to all API requests made through a specific API connection. This is helpful for headers like authentication tokens, API keys, or content-type specifications needed for every API request.

How an API Call with Shared Headers Works:

1. Shared Headers: Headers set in the shared header section are included in every HTTP request for all API calls using that connection.

2. Endpoint-Specific Headers: You can add custom headers for individual API calls or endpoints, which will be combined with the shared headers.

3. Complete API Request: When you make an API request, Bubble combines the shared headers with any endpoint-specific headers you add. The request is then sent with all necessary headers.

This setup ensures your API calls are consistent and reduces the need to repeatedly define headers, making API integration easier.

Step 4: Understand How the AI Assistant will work via API

Here is the flowchart of the whole process:

We have already created an assistant in step 1 that provided us assistant ID.

• Save the assistant ID in the database for us to use in API Calls

• Creating a Communication Thread: With the assistant ready and its ID safely stored, it's time to create a thread for organizing interactions. Think of this thread as a conversation space where all messages between the user and the assistant are contained, making it easier to track and manage communications.

• Creating a Message: Within the newly created thread, you can now create a message as a user for the assistant. Basically whatever users write to AI will be created as a message. Understand this, creating a message and sending a message to AI are both different things. Right now, we have just created a message, and haven’t sent it to AI yet.

• Creating a Run: To process the message, a "run" is created. This involves executing any tasks or computations necessary to respond to the user. The run is essentially the action engine, driving the assistant's functionality. In easy language, when the run is created means we have sent a message to AI and now AI is processing it.

• Monitoring the Run Status: Once the run is initiated, it's crucial to monitor its progress. This involves retrieving the run and checking the current status of the run and whether the run has been completed. If it’s still in progress, our bubble.io app will continue to check the status until completion.

• Retrieving All Messages: Upon successful completion of the run, the final step is to retrieve all messages within the thread. Once we receive the messages, we will show those messages to the user and then the user can create more messages to interact with an assistant if the user wants.

Step 5: API Setup in Bubble

Assistant is created in open AI and we have to get the assistant ID from there.

Now Let’s set the following APIs in API Connector

• Create Thread

API Documentation: https://platform.openai.com/docs/api-reference/threads/createThread
The Bubble.io API Connector setup is shown in the image below

From a successful API response, you will get a thread ID, Save it somewhere because we will need it in other API calls.

• Create a Message

API Documentation: https://platform.openai.com/docs/api-reference/messages/createMessage

The thread ID we saved earlier will be used here.

The Bubble.io API Connector setup is shown in the image below

• Create Run

API Documentation: https://platform.openai.com/docs/api-reference/runs/createRun

The thread ID and assistant ID we saved earlier will be used here.

The Bubble.io API Connector setup is shown in the image below

Now from the successful API Call, Save the Run ID.

• Retrieve Run

API Documentation: https://platform.openai.com/docs/api-reference/runs/getRun

The thread ID and run ID we saved earlier will be used here.

The Bubble.io API Connector setup is shown in the image below

• List Message

API Documentation: https://platform.openai.com/docs/api-reference/messages/listMessages

The thread ID we saved earlier will be used here.

The Bubble.io API Connector setup is shown in the image below

With this, all the essential APIs are set in bubble.io

Step 6: Make Open AI API Calls More Secure in a bubble.io

Even if your run ID, assistant ID, and thread ID are public. They are useless without an Open AI secret key which we are not exposing here in all API calls. The secret key is set as a private key in the header so your api calls are secure.
To make your api calls more secure, check this: Bubble.io API Call Security Best Practices

Step 7: UI Setup in Bubble

• Prepared a basic setup with the Start button shown below

• Some loading for UX when APIs are in execution

Create a chat Interface with multiline input to write a message, make sure we can with UI we can identify responses from the user and assistant.

UI creation conceptualization was assisted by Dixit Patel

Step 8: Workflow Setup in Bubble

• Create an option set to track run status with three options: Not Running, In Progress, Completed

  • not running is a default status

    

• Create custom states on the page level that store: thread ID, run ID, run status, and list of messages (List Messages API data type)

  

• Add a simple looper plugin from here

On the Start button (Shown in UI) run the following workflows

Then,

• Once the loop is finished, here is what happens

  

• Then load all the messages into a custom state or database (your choice)

  

Till now, you have seen the workflow execution from the start button. Now if this is executed from multiline input of chat, then the workflow will be similar with some minor changes (shown in the image below)

Step 9: Differntiate User and Assistant Messages

Now Just show the messages in chat UI created either via custom state or via database.

In my example, I have shown messages in Repeating Group Chat which I set like this:

To identify the messages from the User and assistant, you can use roles to differentiate

These step-by-step instructions cover everything from setting up your OpenAI account and generating API keys to configuring API calls and designing a user-friendly interface. By following these steps, you can create a sophisticated AI assistant that elevates your app's functionality and user experience, paving the way for innovation and efficiency in your projects.