If you’re looking for the easiest way to integrate APIs into your Bubble app, then this is the guide for you.
In this article, you’ll learn exactly how to use ChatGPT to help source and structure APIs from external tools. You’ll see how ChatGPT can be used as a personal tutor to explain each of the steps throughout the process.
The steps to using ChatGPT to connect APIs in Bubble include:
- Sourcing your OpenAI API keys
- Sourcing the documentation for an API
- Creating the best prompt for ChatGPT to analyse the documentation
- Allowing ChatGPT to create your custom API calls
If you’re new to working with APIs in Bubble, I know firsthand how overwhelming the whole process can be.
In our example today we’re going to start from scratch by sourcing an API from MailChimp. We’ll then use ChatGPT to read the API documentation, then format a custom API call that will send and receive data between both MailChimp and our Bubble app.
Full Transcript of Tutorial
1. Sourcing your OpenAI API keys
When working with APIs in Bubble, you’ll first need to download the API connector plugin.
Once downloaded, you can create your first API inside the plugin menu. This API will be named ‘Mailchimp’.
Now, the new API will need to be authenticated before it can become functional. If you’re not familiar with authentication, it’s like a password within the API that allows your Bubble app to access data from your Mailchimp account.
In the authentication field, add the unique API key created within your Mailchimp account. To source this, visit the developers tab inside your Mailchimp account. You can then copy and paste this code directly into Bubble.
2. Finding the documentation for an API
After configuring your API key, we can now decode the documentation provided by Mailchimp. If you don’t have any prior coding experience, this documentation will often seem overwhelming.
Thankfully, by using ChatGPT, it’s possible to extract everything we need in a visual interface.
If you highlight all of the content within the Mailchimp documentation (including the code snippets), we can paste this into a new chat within OpenAI.
Before pasting this code, we’ll prompt ChatGPT to explain the content to us like we’re five years old.
Now, without any previous coding experience, we’ll be able to clearly interpret the technical instructions within the documentation.
If we read the response from ChatGPT, you’ll see that the documentation we copied outlines how to create a test call between your Bubble app and Mailchimp.
When this API call is successful, Mailchimp will return the message ‘everything is chimpy’.
Now, when you’re connecting an API with Bubble, it’s possible to streamline the entire process by importing a call using a cURL.
A cURL provides an API format that outlines exactly where your app can send and receive data from. When using a cURL, it saves you from having to manually define these settings yourself.
When you’re working with an API, however, not every third-party app provides the necessary cURL format within its documentation. Thankfully, using ChatGPT, we can have OpenAI ingest the existing documentation, then restructure this in a cURL format.
3. Creating the best prompt for ChatGPT to analyse the documentation
Within the Mailchimp documentation, you’ll see the code is formatted to support Node.js.
If we copy this code, we’ll then open a new ChatGPT chat and paste this in. We’ll also add a prompt that asks ChatGPT to take this existing code snippet and reformat it into a cURL.
Now, you’ll see it’s provided us with a clean snippet of updated code.
One thing you’ll just need to note is that within the dynamic fields of the cURL, ChatGPT has formatted these using square brackets [].
In Bubble, however, these will need to be formatted using the greater than and less than symbols <>.
To fix this, simply swap these characters out for the relevant replacement.
4. Allowing ChatGPT to create your custom API calls
Once we have our newly structured cURL, we’ll allow Bubble to initialise this call. This will then display a popup that outlines the entire schema for this API – including all of the fields we can send and receive data from.
Once the API call has been formatted, we’ll need to make a few minor configurations before this is functional. One of these changes will require us to add the ‘user prefix’ from our Mailchimp account.
To source this, simply open Mailchimp within your browser. If you click into the URL field, you’ll notice a series of characters that look like a code. In my account, this code is ‘US8’, but yours might be different.
And just like that, our API connection from Bubble to Mailchimp is fully-functional. As you can see, using ChatGPT, we were able to completely streamline the entire process and remove the complexity of having to code.
Of course, you can replicate this entire process for any API, regardless of the platform you’re trying to integrate.