You can customize an AI feature or an AI-based product with Scade and integrate it into your own application via API (Unified API). In this tutorial, we’ll show you how to deploy any solution configured in Scade for end-users and integrate it into your Bubble.io application. We’ll be setting up both POST and GET requests to interact with your flow. Let’s get started!
Step 1: Getting Your API Server Key
First, we need to generate an API server key, which will allow us to authenticate with the ScadePRO API.
- On the ScadePRO main page, navigate to the API Keys section in the left-hand menu.
-
Click on “New Server Key.”
-
Name the key whatever you like—I’ll name mine “My Server Key.”
- Once the token is generated, be sure to store it safely. You won’t be able to access this token again, so it’s crucial to save it now for future API calls.
Step 2: Publishing and Preparing the Flow
Now, let’s move on to the flow that we want to connect to Bubble.io.
- Navigate to your flow and click “Publish” on right top corner.
- From there, select API. You’ll see code examples for making a POST request in Python, HTTP, and JavaScript.
Step 3: Connecting ScadePRO API to Bubble.io
First, navigate to your Bubble app.
Step 1: Install the API Connector Plugin
To get started, we need to install the API Connector plugin.
- Go to the Plugins tab located on the left side bar in your Bubble app editor.
- Click “Add Plugins” and search for “API Connector.”
- Install the API Connector plugin.
Once installed, this plugin will allow you to connect to any external API.
Step 2: Setting Up the API in API Connector
Next, let’s configure the API.
-
Go to the Plugins tab and open the API Connector.
-
Click “Add another API.” Name it something relevant, like “Scade API.”
- Here, you’ll see options to configure API calls.
Step 3: Authentication Key Setup
Many APIs require authentication, typically via an API key. Let’s configure that.
-
In the API Connector, look for the Authentication section. There are different options. Choose Private key in header.
-
Now we will enter the API key details. Key name - Authorization. In private key field we put „Basic {your server token}“
Next, we’ll set up a POST request, which is used to send data to Scade Pro API.
-
Add another call or expand the existing one and edit it. Let’s name it “API Call POST.”
-
Set the Method to POST. Since in our case we want to trigger a specific event or send data to the API but don’t need an immediate response that is displayed in the UI we use it as Action.
-
Enter the API URL that we have seen on Publication page after pressing Publish button.
Its also needed to add a header for our call.
- We need to define the data that will be sent in the Body section. As you can see, I’ve entered a value for the prompt field. This is necessary to initialize the call and check if it’s responding properly. Since my flow is an image generator, I’ve provided an example prompt to test the functionality.
- Click Initialize Call to test the POST request.
If successful, you’ll get a response like this, confirming that your data was sent.
We only need to focus on the id and status fields, so you can safely disregard the other fields to avoid confusion when setting up your workflow later. As a reminder, the id will be required in the GET request to retrieve the result, while the status field indicates whether the result is ready. A status of 2 means it’s not ready, while a status of 3 confirms that it is. You’ll use this information later to create a loop of GET API calls to continuously check for the result.
Step 5: Setting Up a GET Request
Let’s now configure a GET request, which allows you to retrieve the result.
-
Click “Add another call.” I will call mine “API call GET image Action.”
-
Set the Method to GET.
-
Enter the API URL we want to fetch data from in the URL field. Ours is - https://api.scade.pro/api/v1/task/[task_id]
-
Our API requires a parameter called task_id, so we’ll add it here. For this example, we’ll use a task_id number from our Run History to initialize the call and test the connection.
- Once everything is set, click Initialize Call to test it. If the call is successful, you’ll see a response like this. As you can see, the status is 3, indicating that the result is ready. Now, we’re looking for the input ID of the End Node field that we configured when setting up the flow. In my case, it’s labeled as “result_flux”.
Lets ignore the fields we don’t need in this case.
Now that the API calls are set up, you can use this requests anywhere in your Bubble app, like in repeating groups or data fields.
• For GET requests, you can display the data in repeating groups, text fields, or other elements.
• For POST requests, you can send data based on user actions like form submissions.
You can trigger these API calls through workflows, such as when a button is clicked or when a page is loaded.