Quickly build a Q&A (FAQ) bot with Azure Bot Framework

While I was at a code camp in Minneapolis this weekend, several of my peers told me I could quickly spin up an FAQ bot, which would be far more interesting (and interactive) than a boring FAQ page.

They said it could be done in minutes, and I was up for a challenge, so off we went. By the end of the process, I was pleasantly surprised, and had converted my entire FAQ into a chat bot in less than 15 minutes. Check it out here.

The details are as follows:

  1. Head to https://qnamaker.ai/ to your QnA service (FAQ)
  2. Register your empty bot with Microsoft to generate a new App ID and password
  3. Create an Azure Bot
  4. Test it out locally
  5. Locate your KnowledgeBaseID
  6. Host your bot on a web server
  7. Test your QnA service in the cloud
  8. Integrate your bot into a chat service

Find all of the code here.

My colleague Daniel Egan has a fantastic GitHub repo with step-by-step instructions for learning bot framework (either C# or Node). If you are new to Bot Framework, I would start there.

Step 1

Head to https://qnamaker.ai/ to your QnA service (FAQ)

You can point it towards a webpage with an FAQ which already exists, such as http://microsoftreactor.com/phl-faq/. Alternatively, you can give it a document with your questions and answers, or you can simply add a question and answer directly into the portal.

qna-bot-1

Next the tool will look through your links and documents and create a knowledge base for your service. This will be the structure and “brain” for your new knowledge base service. You’ll be able to correct and add to this information in the following step.

When it pulls in the text, it will also grab the markdown, which you may have to cleanup in the editor. For example, on our FAQ page it grabbed the HTML links and formatted bullets:

qna-bot-2

Step 2

Register your empty bot with Microsoft to generate a new App ID and password

This App ID & password will be used by with the builder.ChatConnector function to  connect your node.js app to your QnA service.

Example:

// These come from https://apps.dev.microsoft.com/#/appListvar connector = new builder.ChatConnector({
     appId:       "3f279310-1337-1337-1337-2a31729b5109",
     appPassword: "5VWmyfakepasswordtWyQHzer"
})

qna-bot-3

Step 3

Create an Azure Bot

This is how the user will interact with your question and answer service. It accepts questions from users, calls your new QnA service, and returns the answers from your FAQ.

You can find a sample on GitHub here.

Replace the variables for appId and appPassword in the .env file with your own.

Step 4

Locate your KnowledgeBaseID

This is used to ping your QnA service. In the function pingQnAService you can see where I make the request:

http://qnaservice.cloudapp.net/KBService.svc/GetAnswer?kbId=' + knowledgeBaseID + '&question='

You can find this ID here: https://qnamaker.ai/Home/MyServices. Click  on “View Code” and a small window will appear. In the POST section you find a URL with a number. Grab that number. (I’ve hidden mine with blue pen).

qna-bot-4

You will also need to replace your knowledgeBaseID, located in app.js:

const knowledgeBaseID = "091337-1337-49ec-b68a-1337eadbda";

Step 5

Test it out locally

Download the Bot Framework Emulator.

The default address is http://localhost:3978/api/messages but you will still need to enter your App ID and password. These are the same ones you retrieved in step 2.

qna-bot-5

You’ll need to install any node packages and run your project locally before this will work. In the console, navigate to where your project is running locally (in my case, D:\Scratch\phl-reactor-bot) and run:

-npm install --save

-node app.js

 

This installs all of the necessary node packages, and then tells node.js to execute your app.js file. If it is working correctly, you should see: restify listening to http://[::]:3978

In your emulator, type in “Hi” to get things going, the follow up with a question from your FAQ.

For example, if I enter “Hardware” you’ll see the response from my FAQ page:

Step 6

Host your bot on a web server

I use Azure, and create an App Service (website) and deploy my bot to Azure by:

  1. Pushing my code to GitHub
  2. Creating an Azure App Service
  3. Pointing the App Service at my GitHub account

I have a tutorial on how to do this.
Now, any time I make an update to my codebase, I push it to GitHub, and Azure instantly looks at that repository, and makes those changes to my bot. Crazy.

Right now your bot is grabbing the AppID and password from your .env file, which will not be pushed to GitHub, as it is part of our .gitignore file. This is great when testing locally. However, you are also going to want to hide your AppID and password while running your app in the cloud.

Hide your app ID and password


To do this, in the Azure App Service web portal, click on Application Settings on the left hand side, and create an App_ID and APP_PASS. Now, when your node script runs, it will grab these settings.

var connector = new builder.ChatConnector({
     appId:       process.env.APP_ID,
     appPassword: process.env.APP_PASS
})

Process.env is your .env file when testing your app locally, and it is your app settings when running it in the cloud.

qna-bot-7

Step 7

Test your QnA service in the cloud

From your bot page, you can click the test button to make sure it is correctly configured. If you see “accepted“, you know your API is working.  The chat to the right will test functionality of your chat as well.

qna-bot-8

Step 8

Integrate your bot into a chat service

 

You now have a fully functioning bot! But we still need a way to talk with it. For right now I am going to add a web chat, which you can get to from your bot page. The image in step 7 has the web chat listed there.

Once you’ve copied the embed code to another webpage your chat will appear! It works but….it’s still a bit small. Fortunately, you can style it to your heart’s content with CSS.

qna-bot-9

Right now the bot is on the actual FAQ page, but that’s no fun and defeats the entire purpose, right? Why don’t we have some fun with this, and instead embed the bot on its own page. This is easy.

Hao Luo, a Tech Evangelist based out of Chicago has a simple script to do this with the Restify module we are using in node. I’ve added a public folder in the node project, which contains an index.html file. What this script does is two things:

  1. Serve my chat bot on Azure
  2. ALSO serve an html page with my embedded chat bot code.

All I did was add the embed code to an empty HTML page:
qna-bot-10

Now, when a user navigates to the index page where my chat bot is hosted, they are greeted with the bot!

qna-bot-11That’s it!

I still need to clean this up a bit, including adjusting the styling for the bot and create additional dialogues for it, but you should be good to go. If you found this to be useful, or plan on using it yourself, please let us know! You can reach me at @DaveVoyles.

Thanks to Sarah Sexton (@Saelia), Hao Luo (@howlowck), & Kevin Leung (@KSLHacks) for helping me put this together!

-----------------------


subscribe-to-youtube

One thought on “Quickly build a Q&A (FAQ) bot with Azure Bot Framework

Leave a Reply to Sarah Sexton (@Saelia) Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.