Integrating AI to your No-code App on Bubble.io

Introduction

As No-code web & mobile app creators, it's our goal to provide users with innovative and unique features that make our no-code apps stand out. 

However, implementing certain capabilities like image or speech recognition may require a deep understanding of Artificial Intelligence (AI) that not all developers possess. 

Fortunately, by integrating AI tools into your No-code app in form of AI plugins, you can easily achieve these capabilities and take your app to new heights.

‍

‍

2 Methods to Integrate AI into Your App, Plugin Vs API

As a professional Bubble.io developer, it’s important to understand that there are two vital models available for integrating specific Artificial Intelligence (AI) tools into your No-code app on Bubble. 

These models include 

• the API or Application Programming Interface and 

• Plugin or Extensions (also known as add-ons).

The decision to choose between these two models depends on the level of freedom you require in manipulating how the tool works for your end-users, as well as the specific AI tool you intend to use for your app. 

Therefore, it is essential to carefully consider the options available and make an informed decision that will best meet the needs of your project.

‍

If you’re new to no-code development, you should probably learn the differences between APIs & Plugins for integrating an AI tool to your no code app.

‍

‍

What Are The Differences Between AI Plugins & APIs?

Basically, an API is a set of protocols, routines, and tools that help developers build software applications. 

The API defines the methods and data structures that different software components use to communicate with each other. 

It's like a translator that helps software programs interact and share data and functionality.

‍

On the other hand, a plugin is a piece of software that adds specific features or functions to an existing software program. 

You can think of it as a cool add-on that makes an app even better. Plugins are often used to extend an app's functionality by adding new features, modifying existing ones, or integrating with external services.

‍

The main difference between APIs and plugins is that APIs define a standard way for software components to interact with each other, while plugins enhance the functionality of an existing software program. 

APIs are usually used to build new applications, while plugins are used to enhance existing ones. Additionally, APIs are typically intended for use by developers, while plugins are often designed for end-users.

‍

‍

5 Steps For Setting Up ChatGPT Plugin & AI Chatbot Integration on Your No-Code Bubble App.

‍

In a similar No-code project built by the Nerdheadz team, chatSuggest, these are the steps we took to integrate the chatGPT plugin to the app.

‍

‍

Step 1: Set up an API Connector: 

You will need to use an API Connector plugin to connect with the OpenAI API that powers ChatGPT. 

As such, the first step is to set up an API Connector plugin in your Bubble.io app. 

You can find the API Connector plugin in the Plugins tab of your Bubble.io app.

‍

Step 2: Get an OpenAI API Key: 

To access the OpenAI API, you need an API key. You can get an API key by signing up for the OpenAI API service on their website. 

Once you have an API key, you can use it to connect your Bubble.io app with the OpenAI API.

‍

Step 3: Set up a workflow: 

Next, you need to set up a workflow in Bubble.io to handle user input and output. 

This workflow will use the API Connector plugin to send user input to the OpenAI API and receive a response from the API. 

You can use Bubble.io's visual editor to create the workflow and set up the API Connector plugin.

‍

Step 4: Create a user interface: 

To interact with the chatbot, you will need to create a user interface in Bubble.io. 

This interface should allow users to input text and display the chatbot's responses. 

You can use Bubble.io's drag-and-drop interface builder to create a simple chat interface.

‍

Step 5: Test and refine: 

Once you are done setting up the API Connector, the workflow, and the user interface, you can test your chatbot to see how it performs before publishing. 

You may need to refine the chatbot's responses, tweak the workflow, or adjust the user interface to improve the user experience.

‍

How chatSuggest App works: built by the Nerdheadz team.

‍

‍

6 Free AI Plugins You Can Integrate Into Your No-code App On Bubble.io

Many devs & dev. teams on Bubble.io build & provide multiple free plugins which allow you to add specific AI features to your no-Code web & mobile apps on Bubble. 

Some of these free plugins are: gins are: 

‍

1. OpenAI Plugin

This plugin has been available on Bubble since March 19th, 2023, and has already been installed 113 times.

It allows for seamless integration with OpenAI's endpoints, giving you easy access to create chat completion, edit, embed, and create transcriptions for your no-code app.

‍

Technical Requirements: 

Prior to installing the plugin, get an API Key from OpenAI by signing up at openai.com.

‍‍

2. OpenAI chatGPT & GPT-3 plugin

This plugin allows you to seamlessly integrate two of OpenAI's most popular models - GPT3 and ChatGPT - into your Bubble.io app.

Available on Bubble since July 23rd, 2021, and with 8305 installs, this plugin allows you to integrate a conversational AI that works for chatbots & virtual assistants systems into your no-code app and helps you create a more personalized-response experience. 

‍

Technical Requirements: 

To use the plugin, you’ll need an OpenAI API key, which can be obtained at openai.com/

‍

‍

3. FineTuner.ai- Composable AI plugin

Available on Bubble since March 27th, 2023 with 49 installs, Finetune's ai helps to simplify complex tasks such as building personal assistants for no-code devs.

And for the end-users, they can extract insights from documents and query structured data, thus revolutionizing their interactions with information.

‍

Technical Requirements: 

You’ll need a fine-tuner.ai account, as well as an API token & model UID to interact via the Composable AI plugin.

‍

4. Eden AI plugin

This suite of plugins uploaded by Eden AI between March 2nd -31st, 2023 allows you to seamlessly integrate a wide array of features to your no-code bubble app. 

Some of the features this suite of plugins allows for include:

• Eden AI Text to Speech: Converts normal language text into speech

• Eden AI Face Detection: Identifies human faces in digital images as well as image position, sex, age, smiling or not, and glasses and accessory wear recognition.

• Eden AI Image Generation: Generates compelling images based on provided text prompts.

• Eden AI Invoice Parser: Extracting information in invoices for eCommerce small businesses.

• Eden AI Keyword Extraction: To extract the most important words, phrases and sentences in a body of text.

And a few others such as Eden AI Translation, Language detection & Explicit Content.

‍

Technical Requirements: 

Create an account at Eden.ai and connect plugins to your no-code app using your API key in the format “Bearer API_KEY”

‍

‍

5. Enhance AI plugin

Uploaded to Bubble.io on March 29th, 2023 with 14 installs so far, this plugin by EnhanceAI allows you to add GPT language models to any of your user text forms, survey questions, and text inputs.

‍

Technical Requirements: 

Create an account at Enhance.ai, and connect the plugin to your app by enabling identifiers for specific app sections and using your unique API key.

‍

Chatsonic- ChatBot with Memory plugin

This plugin allows you to seamlessly integrate ChatGPT-like features, however, with up-to-date data obtained from searching Google to find content relevant to prompts.  

Uploaded on Bubble since April 6th, 2023, and with 14 installs, this plugin enables the creation of SEO-optimized and plagiarism-free content for blogs, ads, emails, and websites.

‍

Technical Requirements: 

You need to sign up for a writesonic account, access your API Key from the API Dashboard and input it into your plugin.

‍

Conclusion

When selecting a plugin for your no-code web app, it is recommended to conduct research on the plugin's history, security measures to prevent hacks, and how frequently the plugin is updated to remain compatible with new systems. 

An effective way to confirm these aspects is to review the plugin's ratings, customer reviews, and the number of active installations. 

Additionally, a development team with a track record of creating multiple AI plugins is indicative of a plugin that is likely to receive frequent updates as required in the future.

‍