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

  • .NET
  • Web
  • Azure

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. Lot's of customer 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 analyse the question asked, you can see that lots of them are very similars 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 knowlegde base to answer the customer's questions. Thus, the customer get a very fast and accurate answer. Creating a bot is not an easy task, but Microsoft has developped 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 FAQ 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

  1. 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

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

QnA Knowlegde Base

  1. Click the Publish button

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

Integrating the bot in your application

There are 2 ways to integrate the bot to your application: using the http API or using the Microsoft Azure Bot Service. The Azure Bot Service allows to integrate your bot in your web application using the web chat control, or in many third-party applications 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

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

  1. Give it a name
  2. Create an app id

Create a Microsoft App Id

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

Create Question And Answer bot

  1. Select the service to integrate with

Select bot channel

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

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

Web Chat

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.

Follow me:
Enjoy this blog?Buy Me A CoffeeDonate with PayPal

Comments

Andrej Saje -

Hi, when clicking Create Bot as a last activity in step 4 I get notification "The item cannot be accessed or modified". So, I cannot start step 5 to connect with channels. Any idea how to solve this issue? Many thanks!

sandesh kannur -

In the Chat window if I have to add image of person who is chatting is it possible, if so which is API that I have to call for.

Gérald Barré -

If you are using the http API, you can customize the design of your chat window the way you want, and for instance include an image. But, if you are using an iframe, you cannot add your own data into the chat window.

RUPESH MACHERLA -

Hi Meziantou, I created a bot using Azure Bot service with the help of QnA Maker. But my problem is I want to customize the chat window more effective. How to do that by using http API. Can you have any sample code Please provide me…

Gérald Barré -

Hi,

You cannot customize the provided window. Instead, you'll have to create your own window. The code in the section "Using the http API" is the way to go. The back-end is there, however, you'll have to write JS and CSS to create a nice front-end.

Jonas Chen -

Hi, there is any source code? I always have problem with controller . only the simple page with an input button and a submit code is enough. Thank you so much!

Adriano -

Amigos, estou com uma duvida…. Estou tentando implantar o LUIS e o QNA, ja fiz um piloto aqui e funciona perfeitamente. Minha duvida é quanto ao limite de acesso do QNA, nao tem como pagar e ficar sem limite? ele esta limitando minhas consulta em 10 por minuto

José Antonio -

Which is better? to use LUIS or QnA?

Gérald Barré -

Hi,

QnA et LUIS doesn't have the same goal. QnA understands the question of the user and give the answer based on the database. LUIS allows the user to interact with the user. For instance, you can create an actionable answer for the sentence "Book a flight to Seattle". Indeed can extract the intent (BookFlight) and the parameters (Seattle). Thus, you have to choose the one that match your needs.

Dharmendra Singh Negi -

Can we choose different language rather then C# and NodeJs. And it's necessary to add credit card details for bot service.

elisabetta -

How can I use different QnA services in a single bot?

Gérald Barré -

You can use multiple URLs or documents to train your bot. So, you don't need multiple QnA services, just one with multiple sources.

Paul Daly -

Hi Meziantou, Once up and running, we would like to check and edit the responses, if needed. How do you find out what the customers have typed in as their questions and the replies from the bot?

arn karthik -

how to link Q&A with my BOT

elisabetta -

I know, but if I want use a bot with multiple services. The bot has more services because it makes it easier to work on small amounts of data and helps the bot to respond more accurately.

I would like that depending on the question asked in the bot, the bot answered that question by taking the answer from the right service.

Black Corner protectors -

Does this still benefit people?

Gérald Barré -

I think it really help people to get an answer in a few seconds rather than searching manually in a huge list of questions and answers. However, if the number of items in your Q&A is small, you may not want to bother with Q&A Maker nor complex user interface, just use a simple page.

Leave a reply