Creating a chat bot from a FAQ with Azure Q&A Maker

In many web applications I use, I can see a chat panel in the bottom right zone of the page. This is a great functionality to get help with a product. On the product I work on, we also have this kind of panel. Lots of customers use it, so it's time-consuming. Depending on the popularity of your product, you can spend from a few minutes to a few hours per day. If you analyze the question asked, you can see that lots of them are very similar and are already answered in the FAQ. So, instead of answering them yourself, let's a bot do the job 😃

The goal is to have a FAQ with lots of questions and their answer, so the bot has a large enough knowledge base to answer the customer's questions. Thus, the customer gets a very fast and accurate answer. Creating a bot is not an easy task, but Microsoft has developed a new service on Azure for this specific need: QnA Maker. Let's see how to use this service in your application.

Even with actual humans, some users still think they are talking with bots 😉

From a FAQ page to a chat bot

#Creating the bot

Before using the service, you must create a FAQ. The FAQ can be located on a web page, or in a file (docx, txt, pdf).

1. Navigate to https://qnamaker.ai/

2. Click the Create new service button

3. Accept the terms of use

   you may need to disable your ad blocker to be able to validate the terms of use

4. Give a name to your bot and the URL of your FAQ

   If you don't have a FAQ yet, you can use the QnA Maker FAQ: https://azure.microsoft.com/en-us/services/cognitive-services/qna-maker/faq/

   Create a new QnA service

5. Review the list of questions and answers. You can also test and train your bot in the Test tab.

   QnA Knowlegde Base

6. Click the Publish button

Your bot is up! You can now integrate it into your application.

#Integrating the bot in your application

There are 2 ways to integrate the bot into your application: using the http API or using the Microsoft Azure Bot Service. The Azure Bot Service allows integrating your bot in your web application using the webchat control, or in any third-party application such as Skype, Facebook, Slack, GroupMe, Microsoft Teams, etc.

##Using the http API

After publishing the bot, you see the sample request to get the answers to a question:

Sample http request to test the QnA service

Let's create a simple page with an input and a submit button.

@model QnAMakerAnswerResult

<form method="post">
    <label for="">Enter your question:</label>
    <input type="text" name="question" id="question" />

    <input type="submit" value="submit" />

    @if(Model != null)
    {
        <div>(Score: @Model.Score) @Model.Answer</div>
    }
</form>

In a controller, you can add the code to call the API:

[HttpGet]
public IActionResult Help()
{
    return View();
}

[HttpPost]
public async Task<IActionResult> Help(string question)
{
    using (var client = new HttpClient())
    {
        client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "<TODO: YOUR KEY>");

        var requestContent = JsonConvert.SerializeObject(new { question });
        using (var content = new StringContent(requestContent, Encoding.UTF8, "application/json"))
        using (var response = await client.PostAsync("https://westus.api.cognitive.microsoft.com/qnamaker/v2.0/knowledgebases/<TODO: Your key>/generateAnswer", content))
        {
            response.EnsureSuccessStatusCode();

            string json = await response.Content.ReadAsStringAsync();
            var result = JsonConvert.DeserializeObject<QnAMakerResult>(json);
            var bestAnswer = result.Answers.OrderBy(answer => answer.Score).LastOrDefault();
            return View(bestAnswer);
        }
    }
}

public class QnAMakerResult
{
    [JsonProperty(PropertyName = "answers")]
    public IReadOnlyList<QnAMakerAnswerResult> Answers { get; set; }
}

public class QnAMakerAnswerResult
{
    [JsonProperty(PropertyName = "answer")]
    public string Answer { get; set; }
    [JsonProperty(PropertyName = "score")]
    public double Score { get; set; }
    [JsonProperty(PropertyName = "questions")]
    public IReadOnlyList<string> Questions { get; set; }
}

Here's the result:

ASP.NET MVC sample

The http API has other methods to manipulate the knowledge base: QnA Maker documentation

##Using the Azure Bot Service

You can create an Azure Bot Service and link it to the QnA Knowledge base.

1. In Microsoft Azure, create a new Bot Service:

   Create an Azure Bot Service

2. Give it a name

3. Create an app id

   Create a Microsoft App Id

4. Select your language and select "Question and Answer"

   Create Question And Answer bot

5. Select the service to integrate with

   Select bot channel

   For instance, you can integrate the web chat in your application using an iframe:

   HTMLcopy

   <iframe src='https://webchat.botframework.com/embed/sample-QnA?s=YOUR_SECRET_HERE'></iframe>

   Web Chat to access the QnA bot

#Conclusion

The QnA Maker service is very easy and powerful. You can create a bot in a few minutes by just giving a link to your FAQ. If your FAQ contains enough entries, the bot can be autonomous. This may help you reducing support cost, while preserving a good quality of service.

Do you have a question or a suggestion about this post? Contact me!