Tips for building a chatbot with Microsoft’s open source tools

In a quite technological world, some activities can be performed by automation. This is where a chatbot is a perfect choice.

A chatbot is nothing more than a smart bot that understands natural language and has the ability to create and maintain a dialog with the user. As we have seen in practice, this dialog can entail various types and levels of client services, ranging from answering basic questions to placing an order.
When we talk about chatbots, the first thing that comes to mind is a pop-up window to initiate a chat session. This has become the standard indeed, but there are many other possibilities to interact with chatbots. For example, you can use voice commands, gestures, and movements and IoT devices can trigger any event. As the versatility of the chatbots continues to evolve, we will see them deployed in increasingly diverse ways.

Microsoft offers open-source tools in its Microsoft Bot Framework package that facilitate and accelerate chatbot development. Below we will address some of these tools, such as Bot Builder SDKBotFramework-WebChat, and BotFramework-Emulator. Advantages of using open source solutions from Microsoft include a large community engaged in helping new users, an active user base, discussions around testing and improvements, rapid bug resolution, and reduced development costs.


Bot Builder SDK

With the Bot Builder SDK, you can build bots for a variety of purposes. Version 3 of this SDK is available for csharp e node while version 4 (in preview at the time of writing) is available for .NETJavaScriptPython, and Java. Let us take a look at the Bot Builder SDK’s main parts:

  • Connector: provides the UniversalBot and ChatConnector classes to configure your bot to send and receive messages through the Bot Framework Connector.
  • Messages: In addition to common text messages, bots can be configured to use cards, which can create richer messages:
    • Cards with buttons, images, animated GIFs, videos, audio, quick response, and showing single, carousel, or list to multiple cards.

The image below shows an example of how card messages are displayed in the BotFramework-WebChat.

  • Dialogs: Isolate and organize chat flow.
  • Actions: With NLP, we can program the bot to recognize requests at any moment during the conversation, such as an interruption or if the user wants to change or cancel a previous request.
  • Recognizers: Possibly the most important function, is that recognizers understand the user’s intentions and take appropriate action.
  • Saving State: Actively save all information related to the user and dialog during the conversation.
  • Natural language understanding: We can configure Microsoft’s Language Understanding Intelligent Service (LUIS) to trigger responses according to the identified intention. LUIS has multi-lingual and supports built-in.



Show me the code!

Below we have a very basic code example in node.js of how to upload a bot with the Bot Builder SDK. In this example, we upload a server, configure the connector, provide an endpoint, and create a bot that repeats everything that was typed. The bot can be registered on the Azure Bot Service by placing the code on any server and its end-point must correspond with the web address (safe URL).



A BotFramework-WebChat is a web interface that allows for the dialog between a user and the chatbot using DirectLine (API), which is based on React and, therefore, can be incorporated into any web page.

For sites not created in React, it just needs to add the botchat.css and botchat.js files created in your project build to your page.

Completely customizable, make a clone or fork of the repository in GitHub, change what you need, and run the build!

The image on the left shows the standard WebChat layout.


Bot Framework-Emulator

A BotFramework-Emulator is an Electron desktop application that allows bot developers to test and debug their bots on the localhost without the connector.

The left side of the image below shows an emulator running: in the upper bar, we put the URL of the bot and then, on the left, we have the conversation between the user and the bot, and on the right, we have detailed information about the messages to facilitate debugging.




Azure Bot Service

The Azure Bot Service is a complete environment for creating, deploying, managing, and integrating chatbots and you only pay for what you use. Let us discuss some of the intriguing features Azure Bot Service offers:


Azure Bot Service: Channels

The Channels integrate the chatbot with various clients, such as:

  • WebChat
  • Direct Line
  • Cortana
  • Microsoft Teams
  • Skype
  • Bing
  • Email
  • Facebook Messenger
  • GroupMe
  • Kik
  • Skype for Business
  • Slack
  • Telegram
  • Twilio (SMS)




Azure Bot Service: Analytics

The Analytics serves up information such as General Totals, User Retention, Total Users, Message Total, User Graph, Channel Chart, Filter by Period, and Filter by Channel.


Azure Bot Service: Issues

The tool displays the errors in the integration between the channel and chatbot. It is a quick and easy way to view problems and discover the root causes:


Azure Bot Service: Online Test

This is a service based on BotFramework-WebChat for testing the chatbot before going live on a channel.


Author: Geander Rodrigues and Paul Baldi


Working together for digital solutions. To start a conversation, please contact us at



Aligned. Agile. Accelerated.