Building a Bubble app with the OpenAI API

This article will describe how you can integrate integrate the OpenAI API into your Bubble app.

1. Create an app
   If you haven’t already, create your app in Bubble.
2. Set up the API Connector
   Go to Plugins -> Add Plugin -> search “API Connector” by Bubble, and click “Install” to install that plugin

Click “Add another API”

Now you’ll configure the API call — we’ll start with the primary Create Completion endpoint, as shown below:

Your OpenAI API key can be found here. Set authentication to HTTP Basic Auth and paste your API key in as the password. You can leave the username blank.

Configure the rest of the settings as shown above. For the Body JSON Object, you’ll likely want to change the prompt and any other settings to match your use case. Visit the API Reference for all available parameters.

Click Initialize Call. Bubble will show you the data types it detected, and you can click Save.

3. Integrate with your app
In your app, drag a new button onto your page. Double click the button and select “Start/Edit Workflow”

For the first action in the workflow, select Plugins -> OpenAI API Create Completion. Configure the Body (JSON Object) again if necessary–you can also insert dynamic data from other parts of your app here.

For the next action, select Element Actions-> Set State. Select your “Make Request” button as the element, create a new custom state of type “text”, and set the state value to Result of step 1’s choices:first item’s text, as shown below:

Now we want to display this state to the user. To do this, go back to your page design, drag on a Text element, and configure it as shown below:

Now if you preview your app and click the “Make Request” button, after a short wait you should see a completion come through:

This is the minimum work required to get the OpenAI API up and running in your Bubble app — there’s a ton more you can do here, including dynamically changing the prompt or calling other endpoints supported by the OpenAI API.