Connect Midjourney to Bubble via API Integration - Bubble.io Tutorial

No Code Academy
2 Feb 202413:13

TLDRThis tutorial guides viewers on integrating the AI art generation tool Midjourney with the no-code platform Bubble. It covers creating an account, obtaining API keys from GitHub, and setting up API connectors in Bubble. The process involves crafting API calls for image generation, utilizing task IDs for status checks, and creating a user interface for input prompts. The workflow includes a custom event to handle image retrieval and storage, ensuring a seamless user experience with the final image saved in the user's profile.

Takeaways

  • 💡 This video tutorial demonstrates how to connect MidJourney, an AI art generation tool, to Bubble, a popular no-code platform.
  • 🛠️ The process starts by setting up an account and obtaining API keys from goapi.ai, using a GitHub login.
  • 🔌 The tutorial involves installing the API connector plugin in Bubble and configuring it with MidJourney's API.
  • 🔑 API keys are used as shared headers in the API connector, with 'x-api-key' as the key.
  • 📑 The 'imagine' action is set up as a POST request to the MidJourney API URL, with various parameters including aspect ratio and process mode.
  • 🧩 Parameters like 'prompt' and 'user ID' are demonstrated, with 'flying squirrel' used as a sample prompt.
  • 🕒 Fetch commands and task IDs are utilized to handle asynchronous calls, simulating a webhook without requiring a paid Bubble plan.
  • ⚙️ The tutorial shows how to build a simple UI in Bubble, including input fields and buttons for user prompts.
  • 🔄 Custom events are created to handle fetch retries, ensuring the image generation process completes successfully.
  • 🖼️ The final result includes displaying the generated image in the Bubble UI, stored in the user's data as the final image.

Q & A

  • What is the purpose of this video tutorial?

    -The purpose of the video tutorial is to show how to connect Midjourney, an AI art generation tool, to Bubble, a no-code tool, using API integration.

  • What do you need to do first before integrating Midjourney with Bubble?

    -First, you need to create an account on GitHub, which Midjourney uses for login, and obtain your API key from the Go API platform.

  • How do you obtain the API key for Midjourney?

    -After logging into the Go API platform with your GitHub account, you can navigate to 'My API keys' and either retrieve or reset your API key.

  • What is the next step after obtaining the API key?

    -After obtaining the API key, you need to add it to the API Connector plugin in Bubble, labeling the API call as 'imagine' and setting the method to 'POST'.

  • What URL should be used for the API call?

    -The API call should be sent to the URL: api.midjourneyapi.xyz/mj/v2/imagine.

  • What parameters are necessary for the API call?

    -Necessary parameters include aspect ratio, process mode (set to 'fast'), prompt, and user ID. The 'prompt' and 'user ID' should be unselected as private.

  • What is the purpose of the 'task ID' in the integration process?

    -The 'task ID' is used to track the progress of the image generation and is essential for fetching the final image.

  • How do you handle the status checking of the image generation in Bubble?

    -You create custom events to repeatedly fetch the status using the 'task ID' until the image generation is completed. If the status is 'not finished', the event reschedules itself to check again after a delay.

  • What happens when the image generation status is 'finished'?

    -When the status is 'finished', the final image URL is saved to the current user's data in Bubble, and the image is displayed in the user interface.

  • What additional features or options are mentioned in the video for Midjourney API calls?

    -The video mentions features like roles, upscales, the new zoom-out feature, and face swaps, which can be explored in more detail in the full course on API setups for Midjourney.

Outlines

00:00

🔗 Setting Up Mid Journey AI with Bubble: API Integration

In this segment, the video introduces the process of connecting the AI art generation tool Mid Journey to the no-code platform Bubble. The speaker guides viewers through accessing the 'go api.ai' website to create an account and retrieve an API key, which is done by logging in with a GitHub account. The API key is then used to set up an API connector in Bubble, specifying headers and the necessary endpoint URL. The video also covers configuring the 'Imagine' action with parameters such as aspect ratio, process mode, prompt, and user ID, and emphasizes the importance of the task ID for subsequent API calls. It concludes with a mention of the limitations regarding the use of web hooks in Bubble, which requires a paid plan.

05:02

🖼️ Creating a UI and Workflow for AI Image Generation

This paragraph details the creation of a user interface (UI) for the AI image generation tool within Bubble. The UI includes an area to display the generated image, an input field for the user to type in their prompt, and a button to initiate the image generation. The speaker then explains how to wire up the workflows in Bubble, using the input value and the current user's unique ID to interact with the API. A custom event is set up to handle the fetch process, with a 15-second delay for the initial fetch attempt, and a subsequent 5-second delay for retries if the image generation is not yet complete. The video demonstrates how to save the final image and task ID to the current user's data within Bubble's database.

10:03

📸 Testing the AI Image Generation and Retrieval Process

The final paragraph of the script describes the testing phase of the AI image generation setup. The speaker creates a new user in Bubble's database and inputs a prompt, 'explode loading star', to generate an image. The video shows the process of the custom event being triggered and the fetch commands being executed with a delay to check the status of the image generation. The speaker explains the loop that occurs between the fetch attempts until the image generation is marked as finished, at which point the image is saved to the current user's data. The video concludes with a successful test, showing the image being populated in the database and displayed in the UI. The speaker also encourages viewers to like, subscribe, and check the description for more information on Mid Journey API calls and a course on various API setups.

Mindmap

Keywords

💡Midjourney

Midjourney is a term used in the video to refer to a specific AI art generation tool. It is significant in the context as the main subject of the tutorial is to demonstrate how to integrate this tool with Bubble, a no-code platform. The video script mentions the process of obtaining an API key for Midjourney, which is essential for the integration.

💡Bubble

Bubble is a no-code tool that allows users to build web applications without writing code. In the video, it is the platform to which Midjourney is being connected. The script details the steps to install the API connector plugin and set up the API call within Bubble to facilitate the integration.

💡API Integration

API Integration is the process of connecting two different software systems through their Application Programming Interfaces. The video script provides a step-by-step guide on how to achieve this between Midjourney and Bubble, including obtaining API keys and setting up API calls.

💡API Key

An API Key is a unique identifier used to authenticate requests to an API. The video script explains how to obtain an API key for Midjourney from GitHub, which is then used in Bubble to authenticate API calls to the Midjourney service.

💡GitHub

GitHub is a platform for version control and collaboration that is used by developers. In the context of the video, it is where the user needs to go to create an account and obtain an API key for Midjourney, which is essential for the API integration process.

💡API Connector

The API Connector is a plugin in Bubble that allows users to connect to external APIs. The script describes how to add and configure the API Connector for Midjourney, including setting headers and parameters for the API calls.

💡Imagine Action

In the context of the video, 'Imagine Action' refers to a specific API call made to the Midjourney service. The script details the parameters that can be sent with this action, such as the 'prompt' and 'user ID', to generate AI art.

💡Task ID

A Task ID is a unique identifier for a specific operation or process within an API call. The video script mentions the importance of noting the Task ID from the 'Imagine Action' call, which is then used in subsequent fetch commands to check the status of the operation.

💡Fetch Command

The Fetch Command in Bubble is used to retrieve data from an API. The script explains how to use the Fetch Command to check the status of the 'Imagine Action' and to obtain the generated image once the process is complete.

💡Custom Event

A Custom Event in Bubble is a user-defined event that can be triggered under certain conditions. The video script describes setting up a custom event to handle the fetch process, with parameters and conditions that determine when to save the final image to the user's data.

💡Webhook

A Webhook is a way of pushing notifications from one system to another. The script mentions that Bubble offers webhooks but requires a minimum paid plan to use them. As an alternative, the tutorial uses the Fetch Command to poll for the status of the API call.

Highlights

Introduction to connecting Midjourney, an AI art generation tool, to Bubble, a no-code tool.

Navigating to goapi.ai to use the AI API for integration with Midjourney.

Creating an account using GitHub for API key retrieval.

Accessing the API keys through the GitHub account interface.

Adding the API connector plugin in Bubble for Midjourney integration.

Configuring the API with a shared header and API key for authentication.

Labeling the API call 'imagine action' and setting the request method to POST.

Specifying the endpoint URL for the Midjourney API version two.

Adding parameters such as aspect ratio, process mode, prompt, and user ID to the API call.

Using a task ID to track the progress of the API call.

Utilizing a fetch command as an alternative to web hooks for API response handling.

Checking the status of the API call to determine if the image generation is complete.

Retrieving and displaying the generated image from the API response.

Creating a simple UI with an image display, input field, and a button for user interaction.

Wiring up workflows to allow users to input prompts and generate images.

Using custom events and scheduling for handling API response delays.

Storing the final image and task ID in the user's data for record-keeping.

Testing the integration by creating a new user and generating an image with a prompt.

Observing the image generation process and the successful saving of the image in the database.

Encouraging viewers to subscribe for more tutorials on Midjourney API calls and setups.