Build an "Question & Answer(QnA)" Chat Bot

In this Article we will see how to Build an QnA ChatBot with QnA Maker service.

Please go through following Articles before proceeding, these concepts will not be covered in the post.

• How to build a JavaScript Chat Bot
• How to Deploy a Bot to Azure

Prerequisites

• Bot created in the previous post

Create a QnA maker service and Knowledge base

1. Login to QnA Maker portal using your Azure credentials.
2. Download Sample Knowledge Base.
3. In the QnA Maker portal, Create on Create a knowledge base link.
   
4. Click on Create a QnA Service link.
   
   
   
5. Fill in and submit the environmental details to create an service.
   
6. Select newly Created service to connect o to your Knowledge base.
   
7. Give a Name to your Knowledge Base.
   
8. Attach sample knowledge base downloaded in step 2.
   
9. Click on Create your KB link to finally create your Knowledge base.
10. Click on Save and train link and then Publish your your Knowledge base.
    
11. Once your QnA Maker App is published, note down following values from settings. We will need them to add in our Bot configuration.
    

Update your bot to Query the Knowledge base

1. Open .env from your bot source code and add QnA environment details copied from the previous step.
   
2. Open a terminal or command prompt to the root directory for your project.
   
3. Add the botbuilder-ai npm package to your project by running following command.
   
npm i botbuilder-ai

   
4. In index.js, following the // Create Adapter section, add the following code to read your .env file configuration information needed to generate the QnA Maker services.
   
const configuration = {
    knowledgeBaseId: process.env.QnAKnowledgebaseId,
    endpointKey: process.env.QnAAuthKey,
    host: process.env.QnAEndpointHostName
};

   
5. Update the bot construction to pass in the QnA services configuration information.
   
const myBot = new MyBot(configuration, {});

   
6. In your bot.js file, add this require for QnAMaker
   
const { QnAMaker } = require('botbuilder-ai');

   
7. Modify the constructor to now receive passed configuration parameters required to create a QnAMaker connector and throw an error if these parameters are not provided.
   
class MyBot extends ActivityHandler {
  constructor(configuration, qnaOptions) {
    super();
    if (!configuration) throw new Error('[QnaMakerBot]: Missing parameter. configuration is required');
this.qnaMaker = new QnAMaker(configuration, qnaOptions);

   
8. Finally, update your onMessage function to query your knowledge bases for an answer. Pass each user input to your QnA Maker knowledge base, and return the first QnA Maker response back to the user.
   
this.onMessage(async (context, next) => {
    const qnaResults = await this.qnaMaker.getAnswers(context);

    if (qnaResults[0]) {
       await context.sendActivity(`QnAMaker returned response: ' ${ qnaResults[0].answer}`);
    }
    else {
        await context.sendActivity('No QnA Maker response was returned.'
+ 'This example uses a QnA Maker Knowledge Base that focuses on smart light bulbs. '
+ `Ask the bot questions like "Why won't it turn on?" or "I need help."`);
    }
    await next();
});

   

Test the Bot locally