Learn how to integrate OpenAI's AI embeddings API with Bubble

Learn how to integrate OpenAI's AI embeddings API with Bubble

Table of Contents

1. Introduction
2. Setting up Bubble API Connector
3. Connecting Bubble to Open AI's AI Embeddings API
4. Building a Chat Bot with Vector Database
5. Setting up Bubble App
6. Upgrading to a Paid/Free Trial Account
7. Starting Building in Bubble
8. Prior Knowledge: Building in Bubble and AI APIs
9. Setting up API Connections in Bubble
10. Setting up Open AI API Connection
11. Setting up API Call for Embeddings
12. Setting up Pinecone API Call for Vector Database

Introduction

In this article, I will guide You on how to connect Bubble to Open AI's AI Embeddings API. You will learn how to set up Bubble's API connector and effectively connect it to Open AI. Additionally, you will understand how to implement the AI Embeddings API connection to send text to Open AI and receive an embedding back to your Bubble app. This knowledge will be particularly useful if you are building a chat bot that responds Based on specific proprietary data uploaded to your app. Please note that this is a free preview of our full course, which provides comprehensive instructions on building the previously Mentioned application. If you are interested in learning more, please refer to the link in our description. If you have any questions, feel free to reach out in the comments.

Setting up Bubble API Connector

To begin, you will need to set up the Bubble API connector and connect it to Open AI. If you do not already have a Bubble account, please Create one on bubble.io and navigate to the dashboard. Click on "Create an app" in the top right corner to generate a new app. Name your app accordingly and proceed by clicking "Get Started." Once the app is created, skip the application assistant prompt and close the component library on the right side. Please note that for this tutorial, your Bubble app must be on a paid account or a free trial account to complete the necessary steps. This is primarily due to the specific implementation we will be building, which encompasses chunking text into smaller groups for embedding.

Connecting Bubble to Open AI's AI Embeddings API

To connect Bubble to Open AI's AI Embeddings API, follow these steps. Firstly, navigate to Bubble's dashboard and click on the "B" logo on the top left corner. Bubble should be offering a free upgrade for two weeks, click on "Try free upgrade for two weeks." Proceed by clicking "Start free trial," and if necessary, add your credit card information. After these steps, you will be on a free trial with all the features required to complete this tutorial. Remember, if you do not wish to be charged after the trial period, cancel the free trial. Once your app is set up in the free trial, you can begin building the necessary components.

Building a Chat Bot with Vector Database

Building a chat bot that uses a vector database is an effective way to create a bot that responds based on specific proprietary data. This section will guide you through the setup process.

Start by setting up API connections inside your Bubble app. To do this, go to the plugins tab and click "Add Plugins." Search for the API connector and install it. Once installed, click "Done." You should now see the API connector in your plugins tab.

Setting up Bubble App

Proceed with setting up your Bubble app. In the API connector, add Open AI as an API by clicking "Add another API." Name it "Open AI" and select "Private key in header" for authentication.

To obtain your Open AI API key, go to the Open AI Website and login. If you do not have an account, you can sign up. After logging in, navigate to the API dashboard and click "View API keys." Create a new secret key with a unique name and copy it. Paste the key into the development key value section in Bubble's API connector. Additionally, add the shared header for content Type "application/Json" to the connector.

Upgrading to a Paid/Free Trial Account

To upgrade to a paid or free trial account, go back to Bubble's dashboard and click on the "B" logo. Follow the instructions to upgrade your account for two weeks. If you do not already have a Bubble account, sign up and proceed.

Starting Building in Bubble

Now that your app is set up, you can start building the necessary components. If you are new to building in Bubble or using AI APIs within Bubble, I recommend checking out our text and image generation app tutorials first. These tutorials are simpler and provide a good foundation for integrating AI APIs. After completing those tutorials, return here to Delve into more complex concepts.

Prior Knowledge: Building in Bubble and AI APIs

Before proceeding with this tutorial, it is important to have a basic understanding of building in Bubble and using AI APIs. Familiarize yourself with the Bubble platform and how to integrate AI APIs in previous tutorials. This prior knowledge will be beneficial in comprehending and implementing the concepts presented in this tutorial.

Setting up API Connections in Bubble

To proceed with setting up API connections in Bubble, navigate to the plugins tab and click "Add Plugins." Install the API connector if you haven't already. Once installed, click "Done." The API connector should now be visible in the plugins tab.

Setting up Open AI API Connection

To connect Bubble to Open AI's API, follow these steps. In the API connector, add Open AI as an API by clicking "Add another API." Name the API "Open AI." For authentication, select "Private key in header." Now, open Open AI in a new tab and go to the API reference section. Under authentication, you will see the details for the Open AI API connection. Configure the key name and key value in Bubble according to the API reference. Ensure that you copy and paste the key value accurately, as any errors may disrupt the API call.

Setting up API Call for Embeddings

To set up an API call for embeddings, you will need to configure the necessary parameters. Refer to the API reference provided by Open AI for guidance. Copy and paste the required parameters, such as the model and input, into the JSON section of the API call in Bubble. These parameters will dynamically change as you send data from your app to Open AI. Initialize the call with a test value and uncheck the private option. Saving the configuration indicates that the API call was successful.

Setting up Pinecone API Call for Vector Database

To connect Pinecone's vector database to your Bubble app, follow these steps. Each API call will allow you to add the embeddings created with Open AI to the vector database in Pinecone.