10x Nation

How to Build a Chatbot Using Microsoft’s Bot Framework

How to Build a Chatbot Using Microsoft’s Bot Framework

Everyone loves a great conversation.

And the conversational U.I. is coming on quickly.

Chatbots have been all the rage for the past couple of years — and the technology is quickly catching up to the hype.

As our trust in artificial intelligence grows, so too does our faith in letting it do more and more important work for us.

And what’s more important than interacting with your customers?

Well, A.I. is ideally suited for providing your customers with the personalized interactions they want — without you needing to hire a small army to man a call center.

Rise of the Conversational U.I.

The conversational user interface is about self-service — a major trend going back to ATMs. Self-service allows customers to solve problems on their own terms — while simultaneously reducing your costs.

The conversational U.I. is also a richer interaction — compared to websites. Providing your customers with a more natural and comfortable experience, while giving your business a deeper understanding of that customer’s emotions and urgency during the interaction.

Era of the Digital Spokesperson

If you project this trend out, it leads us to a point where A.I. could become the entire front end for your business. And in-fact, the consulting firm, Accenture, is already predicting exactly that.

Trend #1 for Accenture’s “Technology Vision 2017” is A.I. is the new U.I., anticipating…

“A.I. is making every interface both simple and smart…A.I. is poised to act as the face of a company’s digital brand and a key differentiator.”

So let’s explore what it takes to build out a chatbot capable of spanning the wide range of digital channels. And for the purposes of this guide, we’ll be using Microsoft’s Bot Framework to build it.

A.I.-Powered Conversational Interface

Without any further ado, let’s jump right into it…

That may look like a lot of steps, but it’s actually pretty easy to do.

The end result

This guide will provide you with the perfect starting point — a simple bot, running in the cloud, that responds to your interactions.

What you do with it from there is where the real magic begins — adding communication channels, enhancing functionality, and deepening conversation dialog.

How it works.

The architecture is pretty simple, but there are a few moving parts.

Microsoft Bot Framework workflow

The bot itself is only a single file (written in Node.js), which we will store in a GitHub repository. And then we’ll use that GitHub repo as a deployment source for a Web App on Azure.

And from there, the Bot Framework Connector Service will allow you to wire up the bot to a wide range of different communication channels.

Ready to go? Let’s get to it…

What You’ll Need

Right off the bat, let’s get the initial requirements knocked out.

Install Node.js

To start, this application is written in Node.js, so you’ll need to install it. You’ll also need Node’s package manager — npm — which should be included with the Node.js installation.

Download the source repository.

Next, let’s pull down the source files. (You’ll need a git client installed on your computer for this step.)

Move to the directory you want to use for this guide and run the following commands in a terminal:

# Download source repository
git clone https://github.com/10xNation/microsoft-bot-framework-nodejs.git
cd microsoft-bot-framework-nodejs

The repository only includes a couple of files — so don’t blink.

Create an Azure account.

Go to the Azure home page (Azure is Microsoft’s cloud services platform).

IBM Azure home page

If you don’t already have an Azure account, go ahead and create one by clicking on the “Free Account” button and completing the registration process.

Install the Bot Framework emulator.

You’ll also need to install the Bot Framework emulator.

The emulator is a desktop application that allows you to test and debug bots on your local machine (or via tunnel). It runs on Windows, Mac, and Linux. Just follow the provided directions to install — it’s super easy to use.

Step 1: Create the Repository

Next, go to the GitHub home page and register for a new account if you don’t already have one.

GitHub dashboard create new repo link

Once you’re signed in, click on the plus sign and “New repository.”

GitHub create new repo page

Enter a name for your new repo and hit “Create repository.”

Next, we’ll spin up the app…

Step 2: Create the Application

We need an Azure’s Web App instance to power the bot in the cloud, so go to your Azure Dashboard and sign in with your Azure account.

Screenshot of Microsoft Azure dashboard

Click on the “+ New” button.

Screenshot of adding Web App

Then select the “Web + Mobile” and “Web App“ options.

Screenshot of configuring Web App

On the Web App Create page, enter an “App name” — select a “Subscription,” — then create or select a “Resource group.” And the system should automatically create/choose an “App Service plan/Location“ for you.

Once everything is filled out, hit “Create.”

Screenshot of new Web App on dashboard

And after a few minutes, the new subscription will show up on your dashboard. Go ahead and click it (the App Service).

Configure the deployment options.

That should take you to the Overview tab for your new app.

Screenshot of Web App dashboard

Click on the “Deployment options” tab.

Screenshot of Web App Deployment options

And then click on “GitHub.”

Screenshot of Web App Deployment options GitHub

Go ahead and follow the prompts to authorize Azure to access your GitHub account / organization.

Screenshot of Web App Deployment options GitHub OK

And hit “OK”

Screenshot of Web App Deployment options GitHub repo

Hit “Choose project” and select the repo you created in step #1. If desired, select a branch — we’ll stick with master for this demo.

Screenshot of Web App Deployment options GitHub

Once the GitHub repo is fully configured, click “OK.”

And that’s it for the web app, so let’s spin up the bot…

Step 3: Register the Bot

For your bot to be publicly accessible, you’ll need to register it with the Bot Framework platform, so go to the Developer Portal and sign in with your Microsoft account (same as Azure portal above).

Screenshot of Bot Framework development page

Click on “My Bots.”

Screenshot of Bot Framework My Bots page

And “Register.”

Screenshot of Web App dashboard url setting

Then jump back to your Azure App Service Overview tab from step #2 and copy the “URL.” Paste that URL into the “Messaging endpoint” field and add on /api/messages (see below).

Screenshot of Bot Framework My Bots new page

Also enter a “Display name,” “Bot handle,” and “Long description.” Then click on “Create Microsoft App ID and password” to get your app ID.

Screenshot of Bot Framework Generate app id page

Click on “Generate an app password to continue.”

Screenshot of Bot Framework Generate app id page

And “Ok.”

Screenshot of Bot Framework Generate app id page

Then “Finish and go back to Bot Framework.” And that will take you back to the Bot registration page with a pre-populated “app ID.”

Screenshot of Bot Framework My Bots configure page

All you have to do now is verify your email address in the “Owners” box, agree to the terms statement, and hit “Register.”

Screenshot of Bot Framework My Bots configure page

That should give you a simple success prompt. So hit “OK.”

Screenshot of Bot Framework Bot Dashboard page

And at this point you should see a dashboard for your shiny new bot.

So let’s put down some code for this new bot…

Step 4: Build the Bot

When it comes to software development, this is about as easy as it gets.

Configure Node.js.

Spin up the application settings using the command below:

npm init

Enter responses to the screen prompts as desired — defaults are fine.

Install the Node.js modules.

Next, let’s install the Node.js requirements:

npm install --save botbuilder
npm install --save restify

That should only take a few seconds, so let’s move onto where the magic really happens…

Create the bot application.

The repo you cloned in What You’ll Need already includes this file, but below is the code if you’d like to see a preview:

var restify = require('restify');
var builder = require('botbuilder');

// Setup Restify Server
var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () {
  console.log('%s listening to %s', server.name, server.url);

// Create chat connector for communicating with the Bot Framework Service
var connector = new builder.ChatConnector({
  appId: process.env.MICROSOFT_APP_ID,
  appPassword: process.env.MICROSOFT_APP_PASSWORD

// Listen for messages from users
server.post('/api/messages', connector.listen());

// Receive messages from the user and respond by echoing each message back (prefixed with 'You said:')
var bot = new builder.UniversalBot(connector, function (session) {
  session.send("You said: %s", session.message.text);

Ready to see the bot in action?

Step 5: Test It

Then let’s test your bot by using the emulator you installed in What You’ll Need.

Start the bot.

Move to the repo directory from What You’ll Need and run the following command in a terminal to start your bot:

node app.js

This will run the application on the port we listed in app.js file — 3978.

Microsoft Bot Framework terminal

All you’ll see is a simple listening notice.

Connect to the emulator.

Once your bot is running, fire up the bot emulator and enter the URL, and your App ID and password.

Microsoft Bot Framework emulator connection

Then hit “Connect.”

Have a chat.

Now that your bot is running locally and is connected to the emulator, try out your bot by typing a few messages in the emulator.

Microsoft Bot Framework emulator response

If all went as planned, you should see the bot respond to each of your messages with the original message prefixed with “You said:”.

Step 6: Push it to the Cloud

Now we’re ready to publish the bot to Azure.

Upload the repository

And the easiest way to do that is to delete the .git folder in the repo you cloned in What You’ll Need, then reinitialize it as a new repo.

So go ahead and delete .git and run the following commands in the repo’s directory:

git init
git add .
git commit -m "Initial commit"
git remote add origin git@github.com:PROFILE/REPO_NAME.git
git push -u origin master

Replace PROFILE and REPO_NAME with the respective profile/organization and repository name you created in step #1.

Note: if you chose a branch other than master while configuring the “Deployment options” in step 2, then replace master above with the appropriate branch.

Set the environment variables.

To keep things secure, you’ll need to add your App ID and password to the Web App settings, so they don’t have to be configured in the app.js file (and publicly available on github.com).

Jump back to your Azure Web App dashboard from step #2 and click on the “Application settings” tab, then scroll down to the “App settings” section.

Microsoft Bot Framework deployment test

We need to add two environment variables: For the first one, enter “MICROSOFT_APP_ID” for Key and your App ID from step #3 in the Value field. And for the second one, enter “MICROSOFT_APP_PASSWORD” for Key and your respective app password for Value.

Then hit the “Save” button.

Verify deployment.

Once Azure finishes reconfiguring itself, you should be able to see your bot on the My Bots Dashboard.

Microsoft Bot Framework deployment test

Click on it.

Microsoft Bot Framework deployment test

Then click on “Test” and enter something in the message box.

Microsoft Bot Framework deployment test response

You should see a response similar to what you got in the emulator above.

Good stuff!

Step 7: Connect the Bot to Other Channels

One of the biggest advantages of using the Bot Framework is the ease at which you can make your bot available on nearly all of the major chat platforms — so take advantage!

Microsoft Bot Framework add channels

Simply click on whichever channel you want to add and follow the prompts.

That’s it!


If you’re having any problems with the application, be sure to check out the logs.

Emulator logs.

The emulator makes it pretty easy to track what’s happening.

Microsoft Bot Framework emulator logs

Take a look in the “Log” section of your emulator for specifics.

Azure logs.

Within Azure, jump back to your dashboard and click on the “Diagnose and solve problems” tab.

Microsoft Bot Framework Azure logs

From this tab you have access to a number of different tools that can help track down any issues.

Take it to the Next Level

Congratulations! You’ve successfully created a bot that can communicate across a wide range of channels.

But this demo is just a starting point — the real fun begins when you start adding more and more channels and capabilities to your bot. Building it up to a Digital Spokesperson.

You can dig deeper into the Bot Framework in the Bot Framework Documentation or the Bot Builder SDK for Node.js.

As always, start simple and never stop improving.

To your exponential success!

Christopher Mohritz

Christopher Mohritz

Chris is the Founder and Managing Director of 10x Nation.