End-to-end chatbot creation in node.js with Bot Framework v4 & QnA Maker

You want to start building chatbots but get lost in documentation, and don’t really know what to look for nor where to start? Well, look no further: this tutorial will teach you how to build a bot end-to-end, using Microsoft’s Bot Framework v4 (node.js) and QnA Maker.

Intro

In this tutorial, we’re going to build a bot which can answer questions. It can be useful if what you’re looking to do is providing information for users in a direct and simple way, instead of having them search for it.

Step 1: Creating a QnA Maker service

To build this bot, we’re going to use QnA Maker, which is part of the Azure Cognitive Services. This service allows to create – as the name suggests – question and answer bots by providing answers to a set of questions.

  • Click on Create a resource (top-left corner)
  • Search for QnA Maker
  • Click on Create (bottom of the page)
  • Select your preferred subscription
  • Select F0 as the management pricing tier and F as the search pricing tier – unless you want to pay for an unlimited version, but for the purposes of this tutorial the free version is enough
  • Create or select an existing resource group
  • Choose your preferred location – the one closest to you – for your search and website location (the service itself is only available in West US for now, so you can’t change that)
  • Disable App Insights as we won’t need it in this tutorial
  1. An App Service Plan
  2. An App Service
  3. A Search Service
  • Click on Scale Up under Settings (left menu)
  • Click on Dev/Test and select the F1 pricing Tier before clicking on Apply

Step 2: Linking a knowledge base

To store all the information your bot has access to, you will need a QnA Maker knowledge base, that links answers to potential questions.

  • Click on Create a knowledge base
  • Go directly to step 2 (we’ve completed what they call step 1 in the first step of this tutorial) and select your tenant, subscription and the QnA service you just created
  • If you want to have pre-defined questions and answers that will allow your bot to do basic chit-chat, you can choose between 3 personalities. Personally, I’m going for “The Friend”, but feel free to choose whichever you prefer
  • Click on the + sign to add examples of questions users might ask for the same answer — add at least 3 utterances so that your bot has more material to train on
  • Add an answer
  • Ask questions and look at the answers (try and make spelling and syntax errors to see how it affects comprehension)
POST /knowledgebases/<kbID>/generateAnswer
Host: <hostName>/qnamaker
Authorization: EndpointKey <endpointKey>
Content-Type: application/json
{"question":"<Your question>"}

Step 3: Creating the bot

Now that our QnA Service is ready, we can create the actual bot, which will handle the conversation and use the QnA Service to match answers to user input.

  • Click on Create a resource
  • Search for Web App Bot
  • Click on the Create button
  • Select your subscription, resource group (you can choose the same as for your QnA Maker Service) and your preferred location
  • Select the F0 pricing tier
  • Click on the bot template area to change the template
  • In the panel that has opened, select the v4 version of the SDK, node.js as the language and the Echo Bot template, then confirm by clicking the Select button
  • For the Azure Storage, leave the Create New option selected
  • Turn off Application Insights, we won’t use it in this tutorial
  • When you’re done, click on Create
  1. A new App Service which will host our bot and make it accessible through an endpoint
  2. A Storage Account which can be used to store information

Step 4: Setting up the bot development environment

To customize the bot template and have our bot do exactly what we want it to, we’ll have to modify the source code. And in order to do that, we need to set up a development environment. Once you have done this once, you don’t have to do it again when developing other bots.

npm install -g msbot
  • Click on Build in the left menu, under Bot Management
  • Click on the Download source code button
  • Once your source code is downloaded, unzip it and open your bot’s folder in your preferred code editor
  • Create a new file at the root of the folder named “.env”
  • Go back to your web app bot resource on Azure
  • Go to Application Settings in the left menu under App Service Settings
  • Scroll down to find the botFilePath and botFileSecret values
botFilePath=./your_bot_name.bot
botFileSecret=""
npm install --save restify botbuilder-ai
msbot secret -b YOUR_BOT_NAME.bot --secret "YOUR_SECRET" --clear
node .\index.js
  • Click on the Open Bot button
  • Find your bot’s folder and open the .bot file

Step 5: Building the bot logic

To change the behavior of our bot and connect it to our QnA service, we need to change its source code. It’s now time to look at what it is made of and make our modifications!

  • Add this code at the end of the services block, right before the closing square bracket
,{
'type': 'qna',
'name': 'DemoKB',
'kbId': 'YOUR_KBID',
'subscriptionKey': 'YOUR_SUBSCRIPTION_KEY',
'endpointKey': 'YOUR_ENDPOINT_KEY',
'hostname': 'YOUR_HOSTNAME',
'id': '117'
}
  • Click on Keys in the left menu under Resource Management
const BOT_CONFIGURATION = (process.env.NODE_ENV || DEV_ENVIRONMENT);
  • Replace EchoBot by QnAMakerBot at the following line:
const { EchoBot } = require('./bot');
const bot = new EchoBot(conversationState);
const endpointConfig = botConfig.findServiceByNameOrId(BOT_CONFIGURATION);
await turnContext.sendActivity('Welcome to the QnA Maker sample! Ask me a question and I will try to answer it.');
await turnContext.sendActivity('No QnA Maker answers were found. This example uses a QnA Maker Knowledge Base that focuses on smart light bulbs. To see QnA Maker in action, ask the bot questions like "Why won\'t it turn on?" or "I need help."');

Step 6: Deploying the bot to Azure

Now that our bot is ready and that we’ve tested it locally, we can deploy it back to Azure.

msbot secret --new
az login
az account set --subscription "<subscriptionID>"
az bot publish --name <bot-resource-name> --resource-group <resource-group-name> --code-dir '.' --verbose

Next step: Publishing to various channels

You can now publish your bot to several channels and make it available to end users. Since there are different ways to publish depending on the channel, this part will be covered in separate tutorials.

Entrepreneur, ex-Software Engineer @ Microsoft. I write about things related to Technology & Learning

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store