Building conversational UX for your app in 10 minutes using api.ai and python backend

Learning to use a service for building a bot is a great place to begin before you start digging into deep learning models to build such systems from scratch. The process of using a technology like api.ai(dialogflow) will help you understand the essential mechanisms and procedures which are necessary to built a bot.

In this blog we’ll be discussing learn about how to go about designing and developing your bot using Google Dialogflow (Formerly known as api.ai) and your custom python backend to process and cater to the request.

Table to contents:

1. Some obvious challenges in building a bot
2. The first steps in designing and developing the bot.
3. Creating entity and intent using sample conversations.
4. Building your custom python backend for processing and serving the queries.

5. Thank you!

Here some of the obvious challenges of building the bot,

• Parsing the text.
• Understanding the intent.
• Extracting the relevant information from the user query.
• Taking action using the information extracted from the query.

The Design and implementation

It all starts when the user expresses his/her intent with text/speech/Natural-Language. So let’s start there, So begin with a sample interaction.

• First create an agent, This is your bot ,

• Let’s build a bot which helps users navigate your platform, lets consider an example intent or a sample interaction or a query given the context that the user is now seeking help with navigating the platform:

Where do I update the goals?

OR

How to update goals?

Find the intent

• Find the intent of user or the type of user action from the query: It is to get help in navigating the platform.

More actions with the same intent?

• But numerous different request with the same intent can be expected.
• Consider if users asks the follow help in navigating the platform, “Hey, How do I sign out?”

The intent for both the interactions are same, that is to get some help w.r.t navigating the platform, but the response now differs based on whether the user is requesting help in updating the goal or signing out.

Let us consider one more example, Consider the case of booking a movie ticket, Let’s see couple of sample interactions,

Can I book tickets to watch Avengers?

OR

Can I book tickets to see Star wars ?

As you can see the intent in both the case are the same, but without being able to parse the name of the movie you can’t take the action of booking the movie tickets. This is where entities come to your rescue. The movie names, Avengers and Star wars are the entities here.

Creating an entity

Similarly, In the former user interactions Update goals and Sign out are the entities. For a moment keep aside the Intent and see what are goals and sign out refers to in the platform, what could you label them as? Features? Activities ? Let’s label them as features for now and create the features entity and add goals as an entry into this entity. We’ll come back later to add the signout field into the feature entity.

The procedure for adding an entity is shown below, Go to Entities -> Create a new entity -> add the entity name -> add its synonyms -> Save.

Adding goals entity with its synonyms

Building the intent

• Now we need to build the intent for user seeking navigation help. Before you do that build a default welcome intent. This is how the bot would greet the use.

• Now let’s build an intent for the sample conversation. Again, the intent is to help the user navigate the platform. You now need more samples of user interactions, examples of how the user’s might address when they express the intent.

• Create a new intent from the Intents section. Here we’ve created an intent with name Platform exploration help.
• The User says section need to be fed with examples how the user would express the given intent.
• In the image you can see that 4 sample conversations are being fed, all related to just updating the goals.
• The system automatically identifies and highlights the entities from the sample conversation.

Let’s a create a response for this intent and test it out.

The top right section of the intent screen provides the dialog box to test out the bot’s response to the intent.

Just a refresher, the bot at this point help you with navigation related query/intent on Goals feature. Let’s try it out!!!

Each of the query sends back a JSON response which contains the identified intent and the entity of the query. Here is the response JSON for the last interactions listed above.

But what If the user’s need help with navigating to Sign out ?

Let’s add sign out to the feature entity and let’s see later whether it gets identified when we add sample conversation in the intent window.

Adding signout entity

Let’s add example intents for sign out. Let’s go the to the platform exploration intent window again,

You can see that the sign out entity is recognized when we add the sample conversation,

Let’s try the bot out, this time let’s ask it’s help with how to signout?

Asking for help with signing out. The JSON response correctly identifies the signout entity.

As you can see the response is same as the one we got for the Update goal query, that’s disappointing!! But the good thing is that the JSON response correctly identified the sign out entity for the Platform exploration intent. If you somehow get access to this JSON, we could write a simple rule that sends different answers back based on the query entity.

Let’s have some fun!! Let’s make the bot respond with the identified entity. We need just the change the response for to access the identified entity and use it in its response. The entity can be identified using $ symbol in the text response window.

Intent -> Platform exploration help -> Scroll down -> Edit Text Response

Let’s see how the bot responds nw,

Dynamic parameter replacement based on the query.

Building the webhook, your custom python backend

Let’s build the custom python server which will receive the requests when user interacts with the bot, then we’ll parse the request and send back the appropriate response. Here is the code for the simple webhook server using python flask

Let’s first run and the test the simple server. The server accepts POST request at :5000/webhook , dumps the request body and sends back a static response. This version of the server can be cloned from this commit.

• Download the code from the link
• Install dependencies using pip install -r requirements.txt
• Run the server python app.py
• Test the server by sending a request to post 5000

curl -H "Content-Type: application/json" -X POST -d '{"username":"xyz","password":"xyz"}'  http://127.0.0.1:5000/webhook

Now let’s access our webserver running on our machine through internet so that the bot running from dialogflow console can reach it and send requests to it,

Let’s create a tunnel to our local webserver running at port 5000

$ npm install -g localtunnel
$ lt --port 5000
  your url is *****************

first test to see whether our webhook local server responds to requests through this tunnel ,

curl -H "Content-Type: application/json" -X POST -d '{"username":"xyz","password":"xyz"}'  https://***********/webhook

Let’s get back to dialogflow console and configure it to send the requests to our webhook server accessible via tunnel, once we test and finish the development we can deploy it to the cloud.

Here is how you would enable the webhook fulfillment,

Fulfillment -> Enable webhook -> Add the URL -> Enable for all domains -> Save at the end of the page

Now, go to our Platform exploration intent page and add the webhook for fulfilling actions,

Intent -> Platform Exploration help -> Fulfillment -> Use webhook

Let’s try our bot again and let’s do we get it’s request with the parsed intent and parameters to our webhook server,

Left image: Conversing with the bot ……Right image: The request from dialog flow being dumped by local webhook server

Hola!!!! Works like magic!

Note: Keep a watch on local tunnel. It crashes at times and you need to run it again and the update the new tunnel URL in the webhook section of fulfillment.

Now let’s modify the local server to parse the entity and the intent from the POST request body. Here is the modified code,

Now, let’s interact with the bot,

Bot is now able to get a dynamic response based on the entity type.

Wow!! We now see that the backend is able parse the entity type, entity value and intent and send it back as part of the response. Now we are just one step away from achieving out goal.

But sometimes the bot may not respond as expected for legit queries, check this sample query.

Its supposed to fall into features entity type and signout entity value. But it fails to recognize.

Dialogflow provides a feedback mechanism to help improve its learning.

You can revisit the log of request and manually assign it to the right intent which inturn helps the system improve its learning.

Go to training -> click on the latest entry (how to sign out) -> Find our failed query -> Manually assign it to the right intent

Let’s send appropriate message based on whether the user is requesting help with updating the goal or with the signout. Let’s just add a simple rule using conditional statements to send the appropriate response. But this logic can more evolved, in a full fledged application one may have to query a database or update one, or may be adding the parameters from the query to a queuing system like Kafka for further analytics or training in future. So here is our modification to the process request function,

Uffff! Finally we are here… Let’s try the bot and see how it works…

The bot is able to correctly respond to queries which are not even part of the sample conversations which we provided for training (In the user says section).

Let’s get a sample web demo of the chatbot, Dialogflow allows for easy integration of the bot with multiple platforms,

The integrations and the we demo

Let’s check out the web demo,

Hopefully the blog helped you understand the process of going about designing and developing your bot with Dialogflow (api.ai) and your custom made web server used for applying business logic. We’ll see you soon. Till then, Happy Coding!!