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

05/16/2017

Gérald Barré

Many web applications feature a chat panel in the bottom-right corner of the page - a great way for users to get help with a product. The product I work on has one too, and it gets a lot of use, making it time-consuming to manage. Depending on your product's popularity, you can spend anywhere from a few minutes to a few hours per day answering questions. If you analyze those questions, you will notice that many are very similar and are already covered in the FAQ. So instead of answering them yourself, let a bot do the job 😃

The goal is to build a FAQ with many questions and their answers, giving the bot a large enough knowledge base to respond accurately. Customers then get fast and precise answers without waiting. Creating a bot is not a trivial 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 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).

Navigate to https://qnamaker.ai/
Click the Create new service button
Accept the terms of use
you may need to disable your ad blocker to be able to validate the terms of use
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
Review the list of questions and answers. You can also test and train your bot in the Test tab.
QnA Knowlegde Base
Click the Publish button

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

#Integrating the bot in your application

There are two ways to integrate the bot into your application: using the HTTP API or using the Microsoft Azure Bot Service. The Azure Bot Service lets you embed your bot in a web application via the webchat control, or connect it to third-party platforms such as Skype, Facebook, Slack, GroupMe, Microsoft Teams, and more.

##Using the http API

After publishing the bot, you can see a sample request for querying answers:

Sample http request to test the QnA service Sample http request to test the QnA service

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

HTML

@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 provides additional methods for managing 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.

In Microsoft Azure, create a new Bot Service:
Create an Azure Bot Service
Give it a name
Create an app id
Create a Microsoft App Id
Select your language and select "Question and Answer"
Create Question And Answer bot
Select the service to integrate with
Select bot channel
For instance, you can integrate the web chat in your application using an iframe:
HTML
```
<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 straightforward and powerful. You can create a bot in just a few minutes by providing a link to your FAQ. If your FAQ contains enough entries, the bot can handle questions autonomously, helping you reduce support costs while maintaining a high quality of service.

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

Follow me:

Enjoy this blog?

💖 Sponsor on GitHub