Chat bots will soon be taking the web by storm. I've attended several webinars, workshops and discussions around not only how to build chat bots but how they are about to revolutionize user interactions with the systems we are building for our clients.

In this article we'll work through building a simple Question and Answer chat bot using a subject we are all familiar with. Hopefully you will begin to see potential in the simplicity and power chat bots bring to a new world of user interactions.

Getting Started

To get started we will be using the following tools:

  • Microsoft QnA Maker
  • Microsoft Bot Framework
  • .NET Core 2.0
  • Azure Web App service
  • Postman
  • Git
  • .NET CLI
  • Visual Studio Community 2017

Microsoft QnA Maker

The QnA Maker is used to build, train and publish a simple question and answer API based on various data sources you provide. Data sources include FAQ URL's, or URL's to existing knowledge bases, structured documents or content you can capture manually.

Navigate to QnA Maker, sign in with your MS account and Create a new service.

Give your QnA service a name: Star Wars Bot and add the following FAQ page URLS I found on IMDB:

Click on the Create button to contune.

You should end up on the Knowledge Base screen. With 86 QnA pairs!

Select Test from the left hand navigation menu and you can immediately start testing your bot.

Try asking:

What is star wars?

The bot will search the knowledge base and make an attempt to respond with the appropriate answer.

Try asking:

How many movies are there?

You will notice the bot respond with content that makes no sense. Select None of the above from the options menu and then head back to the Knowledge Base. Select + Add new QnA pair in the top right hand side of the screen.

For the Question enter: How many star wars movies are there?, for the answer I googled on bing to find an article with some details so put the following in the Answer column: There are apparently 12 movies! Read more about it here http://www.craveonline.com/entertainment/933727-11-star-wars-movies-ranked-yes-11

Select Save and retrain and head back to Test

Try asking:

How many movies are there?

Notice that I didn't ask exactly the question I had entered but thanks to LUIS, which is being used behind the scenes, the bot is able to figure out my intent.

Try asking:

Who is yoda?

The bot responds with an incorrect message but you can select "Yoda's species has never.." from the recommended list. Do this and then select Save and retrain

Try again and it works. If you take a look back in the knowledge base you will see the new entry which was automatically added based on your selection.

Select Publish to make your changes available and live. You are given an example of how to access the QnA bot via a REST endpoint:

POST /knowledgebases/c3cb28af-4f64-471f-b714-dbea8302b34b/generateAnswer  
Host: https://westus.api.cognitive.microsoft.com/qnamaker/v2.0  
Ocp-Apim-Subscription-Key: [key-removed]  
Content-Type: application/json  
{"question":"hi"}

Doing this through post man I receive the following response:

You can either write your own code to interact with the API or you can build a QnA bot using MS Bot Framework which will hook into the newly built API.

Microsoft Bot Framework

The bot framework is used to build and connect intelligent bots to interact with your users naturally wherever they are. The idea is that you build the bot once and then enable it to multiple channels such as, skype, slack, facebook messenger or even a web interface.

Navigate to the Bot Framework website, sign in with your MS account and select My Bots from the menu.

Select Create a bot, Create and then Create a new SDK bot hosted in Microsoft Azure.

The Azure portal will open, sign in and complete the Bot Service requirements and select Create.

When you browse to the created resource resource you are presented with a few options. Select Question and Answer and then Next

Now you will need to create a Microsoft and link it to your bot. Follow the steps, store the password somewhere safe (we will need it later), agree to the terms and conditions and select Create bot.

You will be prompted to select an existing service from QnA Maker:

Select your service and then OK and your bot will be provisioned in a few minutes.

You should see the bot service editor which looks something like this:

Select Test and validate your bot is working correctly.

Select Channels. The great thing about Microsoft Bot Framework is that you can build a bot service once and then enable it for multiple channels, including:

  • Skype
  • Web chat
  • Facebook Messenger
  • Slack
  • Microsoft Teams
  • and more

Given that we would like our users to interact with the bot outside of the azure portal this is very useful! Next we will use the Web Chat channel to host our bot using .NET Core and Azure Web App service.

.NET Core Web Application

Download the required code and follow the steps in the Read.me to get the application up and running.

You will need to edit the wwwroot/index.html file and paste your Web Chat Secret key in the appropriate place:

You can find this by clicking Edit on the Web Chat channel:

And then Show for any of the secret keys:

You will not be able to get it to work locally since Web Chat requires HTTPS, unless you setup a self-signed certificate.

Instead of doing that lets upload our simple app to Azure App Service with will provide and HTTPS endpoint.

Azure App Service

Open your project in Visual Studio Community 2017, right click the project and select Publish.

Select Microsoft Azure App Service and Create New and click on Publish. Connect to your Azure subscription and fill out the requirements and click on Create

When the publish has completed browse to your HTTPS URL, in my case:

https://starwarschatbot20171208031347.azurewebsites.net/index.html

Conclusion

Hopefully working through this only took a few minutes for you to truly see the power of the bot side. And hopefully its sparked some ideas on how you can start building QnA bots for your clients, the possibilities are endless!