Bubble.io and OpenAI GPT integration: Step-by-Step Guide 2024

In this guide, we are going to learn how to integrate OpenAI's GPT with Bubble.io. This procedure will involve fetching API from the OpenAI and setting it into Bubble's API Connector

Step 1: Register and Get API Key from OpenAI

Before you begin integrating Bubble.io with OpenAI, you'll first need to have an API key from OpenAI. Follow these steps:

• Navigate to the OpenAI website and login or create a new account if you don't have one already.
• Once you successfully log in to your OpenAI account, Go to the API section where you can generate your unique API Key.
• Copy this key somewhere safe, you'll need it for Bubble.io

If you are unable to find where to get your key from, you can consult the documentation or the community forums.

Step 2: Setup the Bubble.io Environment

After acquiring your API Key, the next step is to set up your Bubble.io environment. Follow through:

• Create a new application on the Bubble.io platform or use an existing application.
• On your application dashboard, navigate to the Plugins tab.
• In the Plugins tab, search for API Connector and then add it to your application.

Step 3: Set Up API Connector in Bubble.io

After properly setting up the plugin, the next step is to set up the actual integration.

• In the API Connector, click on Add another API.
• A new API will be set up, you then need to specify the configurations of your API.
• Name your API. This can be anything as it is only for identification purposes.
• The Authentication scheme should be set as Bearer Token.
• In the shared headers section, add a key Authorization and it's corresponding value should be Bearer YOUR_OPENAI_API_KEY.
• Choose GET for method, because OpenAI GPT-3 uses GET requests.
• API Base URL should be https://api.openai.com/v1/.

Don’t forget to replace YOUR_OPENAI_API_KEY with the API Key you obtained from your OpenAI portal.

Step 4: Define API Calls

After setting up the API, the next step is setting up the API calls:

• Still on the API Connector, click on Add another call.

• Enter a descriptive name for the call.

• The data type returned by this call is 'JSON'.

• The use as action prompt should be unchecked because we are getting data, not performing an action.

• URL should be engines/davinci-codex/completions. The URL path should be after your base URL so the full address will become https://api.openai.com/v1/engines/davinci-codex/completions.

• OpenAI uses a POST request to generate text completions so set verb dropdown to POST.

• This API call requires a JSON body. An example of a valid JSON Body is like this:

```
{
"prompt": "Translate these English sentences to French:",
"max_tokens": 60
}
```

• For the headers, use Content-Type for Key and application/json for Value.
• Lastly, you must check the 'Private' checkbox. This will ensure that your API Key will not be sent on client-side requests for security purposes.

After properly setting up the configurations, click on the Initialize Call button to set up the request.

Step 5: Using the API in Your Application

After successfully setting up your API, you can then proceed to use them in your application. You can use the data from your API as the data source in your application to display the results obtained from OpenAI GPT.

Step 6: Test Your Application

This is the final step where you run your application to test if everything is properly set up.

And there you have it! You've integrated Bubble.io with OpenAI GPT.

Remember, the effectiveness of the integration depends on how well these instructions are followed and implemented. Always refer to the official documentation for both Bubble.io and OpenAI for the best practices and additional assistance.