Prerequisites

• A Bubble account and a Bubble app ready for integration.
• A Google Cloud Platform (GCP) account with Vision AI API enabled.
• A Google Cloud API key to authenticate requests.

Prepare Google Cloud Vision API

• Navigate to the Google Cloud Console (console.cloud.google.com).
• Enable the Vision AI API in your Google Cloud project. If it's not enabled, search for “Vision AI” in the API library and enable it.
• Generate an API key:
  • Go to the APIs & Services > Credentials section.
  • Click on "Create Credentials" and select "API Key".
  • Copy the generated API key for later use.

Configure Bubble to Work with Vision AI

• Open your Bubble app.
• Install the API Connector plugin:
  • Go to the Bubble Editor, find the Plugins tab, and click on "Add Plugins".
  • Search for "API Connector" and install it.

Set Up the Vision AI API in Bubble

• Open the API Connector plugin you just installed.
• Click "Add another API" and name it "Google Vision AI".
• Click "Add a Call".
• Fill in the necessary fields to set up a REST API call:
  • Name: Vision API request (or any meaningful name)
  • Use as: Action
  • Data Type: JSON
  • Method: POST
  • URL: https://vision.googleapis.com/v1/images:annotate?key=YOUR_API_KEY
    • Replace YOUR_API_KEY with the actual API key you generated earlier.
  • Headers:
    • Content-Type: application/json
  • Body: In the Body section, paste this JSON structure:

      {
        "requests": [
          {
            "image": {
              "content": ""
            },
            "features": [
              {
                "type": "LABEL\_DETECTION",
                "maxResults": 10
              }
            ]
          }
        ]
      }
            

    • Replace <image_content_base64> with the dynamic value from Bubble.
• Click "Initialize Call" to test the setup. If successful, it means Bubble now recognizes the API call.

Using Vision AI API in Bubble Workflow

• Go to the Design tab and create a form/interface where users can upload images.
• Use the File Uploader element to let users upload images.
• Set up a Workflow to trigger the API call:
  • Go to the Workflow tab and create a new event, such as when a button is clicked after an image is uploaded.
  • Add an action to "Plugins" and then choose the Vision API request you set up in the API Connector.
  • Set the parameters:
    • For <image_content_base64>, you will need to encode the uploaded image to Base64 format. You can use a Bubble plugin for Base64 encoding.
  • After the API call, handle the results returned by the Vision AI:
    • You can save the returned data to the Bubble database or display it on the UI.
    • Use subsequent workflow steps to process or show the image recognition results.