I’ve been experimenting quite a bit during the last couple of months with Bubble.io to prototype new concepts and products.

One thing I was experimenting with this week is how one can leverage Azure Cognitive Services Language Understanding (LUIS) to rapidly prototype an application that recognize and understand the user’s input.

In this post, I’ll cover how to integrate a trained LUIS model in a Bubble application.

I won’t go in the details of building the LUIS model but here’s an idea of how the supporting model is structured for this demo. If you want to learn more about LUIS, see the product’s overview page here.

First, you can define overall user intents to detect like the following:

Second, you can define entity types to extract in the user utterance:

Here’s what the design view looks like in Bubble to display the output of the LUIS API call:

With the LUIS model trained and published, you can now grab the API URI required to setup the API Connector in Bubble:

Assuming you have installed the API Connector plugin in your Bubble application, you can now configure it like so to enable call to your LUIS model from your Bubble application:

With that setup is completed, you can now do the following:

Create a new state on the page of type Get Car Understanding

Define a workflow on the Detect button that invokes the Get Car Understanding API method that will pass the textbox content to the LUIS model in order to return the detected intents and entities

The result of the LUIS API call will then be used to set a custom state on the page

The various UI components on the page are then bound to the state content One repeating group is bound to the intent array Another repeating group is bound to the entities array



Now that everything is in place, you can now run your app to test it out. Here’s an example:

As you can see in the screenshot above, the text entered “This car has a 6 speed manual transmission” the model correctly detected an intent of TransmissionDescription and also the specific entities of Transmission Speed Count and Transmission Type.

All in all, in about 30 minutes, without writing a single line of code, we were able to create:

A custom LUIS model To detect what the user intends to communicate, To recognize specific concepts included in the user utterance

An fully functioning application that accepts user inputs and displays the recognized items from LUIS

I hope you have found this post useful! If you have any questions, let me know in the comments section below.