How To Make Facebook Messenger Chat Bot With Api.ai

Alright, Time has finally came where we have started moving from GUI to Conversational UI (CUI), We are moving into world where we would be conversing with technology as we would do with any other person, for Iron-Man fans, Yeah its right Jarvis is going to be a real thing soon enough and with this ability computing is going to be much easier and as app and smart phone ecosystem came and changed our life so will the conversational UI.

But understanding human speech has its own challenges, what we humans have learned and created over so many years about language and speech can not be tought to computers via some algorithm or formula it needs much more than that. It needs the computer to recognize patterns and create its own understanding and here is where machine learning comes to rescue you can Google more about it if you are interested.

But for us developers we don't need to teach our system the language because giants like Google and Facebook are here to help you out. Google provides service called Api.ai which helps you build conversational user experience.

What We Are Going To Build

We are going to build a Facebook messenger bot which would recommend you movie based on your genre preferences selection

This tutorial would be in two parts

Part 1 - Creating API.ai Agent and connecting it with Facebook Messenger

Part 2 - How to make a node.js backend for Facebook Messenger Chat Bot
(Connecting our bot to www.themoviedb.org api with Node.js backend for movie recommendation)

Getting Started With Api.ai 

Step 1. Sign up to api.ai and log into your account you would be presented with the dash board.

Step 2. Click on create a new agent, consider agents as your project engine which process language and spits out actions you define when language input matches the pattern you want.

Step 3. Name your agent now, I am naming my agent as "MovieBot", add a description and hit save button 




Understanding API.AI Agent

There are two important things that you need to understand about api,ai agents before we move any further, These are the two main components of the service.

1. Intents - Think of intents as actions you want your bot to send to you along with the parameters you want for ex. Our movie bot has only one action and that is to recommend movie, so the intention or the intent can be defined as movie.recommendation  

2. Entities - Entities are concepts that your bot should understand and using this concepts your bot would extract parameter values for your intents, our movie bot is going to recommend movies based on genre you wants so one concept that our bot needs to understand is genre so movie.genre would be one entity for our bot. similarly if we want our bot to recommend movie based on cast we would add movie.cast as one of the entity as well.


Creating Entities

Now as we know about entities lets start with adding one for our movie bot

1. Click on the entities tab on your dashboard
2. Then click on Create Entity button on top right
3. You would be on a page similar to shown in below screen shot.


Step 4. Fill the fields as shown in the above image, First lets name our entity movie-gener then in the space below add a row  and in it add some examples of movie geners as you can see in the screen shot. The left hand side is the parameter value that you want your bot to send to your backend and right hand side are the words or phrases that could map to those parameter value for example when your says "show me some funny movies" I want this to send me movie-gener parameter with the value of comedy, so in the left hand side I have named the parameter value and in right hand side I have mentioned some synonyms or phrases that should be used to map.

Step 5. After you have added your examples click on save, give it some time to save do not close the browser.With that we have the Entities part ready.

Creating Intent 

As we had discussed earlier we know that intents help us map user said phrases to developer defined actions or we can call it developer defined intents.

Step 1. Click on intent on dashboard and then hit create intents
Step 2. Name your intent, our intent is just one and that is movie recommendation, so I have named it movie.recommendation
Step 3. There are three sections to creating intents that are

A. User Says



Here you would add some example phrases that would trigger your movie intent, For movie recommendation a user might say something like "I  would like to watch a movie" which would trigger our Intent we are also going to handle the genre which a user could say something like "I would like to watch a horror movie" so all such phrases we would add in the user says section while you add those you can highlight a single word in a sentence and define which entity it matches if the agent it self doesn't understands the entities in the sentence you can read more on this from the offical documentation.

B. Action



Here you define what action would be triggered for your user says phrases, for us its our intent action it self so we have mentioned the action to be movie.recommendation along with this action we can see the list of parameters that have been extracted from our user says example phrases, from the list we can define if any parameter is absolutely required for our action by ticking the required box. As we need movie genre to be specified for us to provide the movie result we have marked it as required. But what if user says something like "I want to watch a movie" then we can not just leave the user blank as we dont have a gener to show him the movies. In such case bot will send the prompt question that you have set to extract the required parameter from user. So If user says "I want to watch a movie" our bot would reply with "From which gener do you want ?" and extract the required parameter.

C. Response


And finally when all is perfect and you have your required parameters here is where you define what the response text from the bot would be.

With this we have our conversational engine set up we can test it on Api.ai it self via the "Try it now" console.

Here is the screen shot of our bot in Try It Now console





As you can see It is working fine, We first hit the agent with the query "I would like to watch a movie" for which we receive the response "From which gener to do you want ?" as agent was not able to find the genre from the query . Then we enter "I think I am in mood of horror movies" and agent gives us the response "I think you would like the following movies"  with intent value of movie.recomendation and movie-gener parameter value set to Horror just as we had wanted.

With this we have our Converstional UI tested and ready to be integrated with Facebook Messanger Platform 


Integrating Api.ai Bot with Facebook Messenger

Now we need to connect the bot with Facebook messenger, For that we need to follow the following steps

Step 1. Log into Facebook Developer Console and create a new app as shown below.



Name your app with your agent name here, add your email id and select apps for messenger as the category then hit create App ID.


Step 2. Now you would be taken to a screen as shown below, you have to select a page for your messenger bot, if you dont have a page created you can create a new page and come back to this page, after selecting the page facebook will generate a Page Access Token for that page



Copy that Page access token and save it somewhere we would need it in the next step

Step 3. Now time to actually connect the page we created with the api,ai agent we made earlier for that go to api.ai dashboard of your agent and select integration as shown in the picture below.




Enable the Facebook Messenger toggle and click on setting.
In the settings panel enter the details as shown in the picture below

 .

Add a verify token which would help verify your bot identity to FB messenger keep it secret and do not share it. Paste the Page Access token that you had generated earlier here in page access token box, now copy the Callback URL which you would need in the next step.

Step 4. Now we need to configure Webhook go to the developer page on Facebook, In the products tabs go to messenger and click on set up webhooks, you would see a screen as shown below, Paste the Callback URL that you copied in last step and also enter the verify token you created previously, tick the messages and messages_postbacks check box and hit verify and save.



Step 5. Now its time to test the first phase of our bot, go to the page you created for your bot and try and send a messenger to the the page, If you have correctly followed the tutorial you would have your bot give you response as below.


So we have successfully created our Facebook bot which can handle basic conversations and extract out the parameters required to fulfill user requirement i.e movie recommendation.

In the next part we would connect this bot to movie API from TheMovieDb and thus provide user a movie recommendation as we had decided.

Here is the next part of this tutorial - How to make a node.js backend for Facebook Messenger Chat Bot






Akash bangad

Computer Engineer from Maharashtra,India. Trying to make my way in the world of mobile development. Steve Jobs admirer and techy at heart.

3 comments:

  1. I had some issues integrating it with facebook messenger, also i want to discuss more about the bot. Ping me on ashutosh0710@gmail.com

    ReplyDelete
    Replies
    1. Hey let me know what issue you are facing, Ill help you out solve the problem

      Delete


  2. The blog or and best that is extremely useful to keep I can share the ideas
    of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    tanki online | 2048 game |
    tanki online game

    ReplyDelete