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.




Engineering at OpenAI. Building products, tools, and data visualizations.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to calculate a Binary Tree’s height using array iteration in Ruby

Install odoo 13 on MAC

How to create SSL Certificate Authority for HTTPS local

My Honest Review About Scaler Academy

PySimpleGUI is not simple

Decommissioning on-premises Public Folders Post-Exchange Online Migration

What Is a Citizen Developer and Why Companies Need Them

Learning about Google Analytics Audit via CXL Institute

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Schnurr

David Schnurr

Engineering at OpenAI. Building products, tools, and data visualizations.

More from Medium

Elloe - Embrace a New Era of Hospitality with Order & Pay

Low-code + No-code = Mo Code? How to Build an App with No Coding Skills

How iPaaS bridges the gap between low-code and professional development

SaaS: How Open Source is Driving Mobile App Development