Step 1: Install the Plugin
Go to your Bubble editor.
Open the Plugins tab.
Click "Add Plugins", then search for your custom plugin or paste it into your app manually.
Once installed, it should appear in the left sidebar under the Plugins tab.
Step 2: Set Up the API Key
In the plugin settings, locate the shared header:
Key: Authorization
Value: Token YOUR_API_TOKEN_HERE
Replace YOUR_API_TOKEN_HERE with your actual Replicate token.
Make sure it’s set to "Secret" so it stays hidden.
Step 3: Create the Image (Action Call)
Add the “Create Image” API Call to your workflow.
Set:
Text (prompt): this is the user's input, e.g., "a futuristic city with flying cars"
This sends a POST request to:
https://api.replicate.com/v1/predictionsMake sure body type is JSON, and the body includes:
json
{
"version": "model-version-id",
"input": {
"prompt": "<Text>"
}
}
Replace <Text> dynamically with the user’s input.
Step 4: Retrieve the Image (Data Call)
Add the “Get Image” API Call.
Set:
id: Use the ID returned from the “Create Image” call (e.g., result.id)
This GET request checks the status of the image generation and returns a result when ready.
Use a "Do when condition is true" workflow step to check when status = succeeded.
Step 5: Display the Generated Image
Once the image is ready, retrieve the image URL from the output field.
Display the image in an Image element by binding the Dynamic Image URL to the output value returned.