Build A Low Code Chatbot Using Bot Framework Composer 2.0

Chatbots are the talk of the town these days. They are the face of AI in many scenarios from banking to healthcare. Bots are the new apps.

Have you wished to build one? 

You can get started with chatbot development with no prior experience and expertise. Today.

Introduction

Microsoft's Bot Framework SDK has enabled developers to build conversational experiences using their favorite programming languages including C#, JS, Python, and Java. As powerful as it is, the SDK called for a code-first approach to building chatbots. Some considered the learning curve steep especially as it lacked a visual UI. Bot Framework Composer fills that void.

The Bot Framework Composer is an open-source IDE built on the Bot Framework SDK. As a developer, you get a visual designer tool to sketch your dialogs. Within that canvas, you may even test your bot and provision to Azure. You can build simple to sophisticated experiences including calling external APIs, integration with QnA knowledgebase, and Language Understanding models. This low code tool is a great way to get started on your first chatbot.

Getting Started

There are two flavors of the Composer. The desktop version can be downloaded for Windows, Mac or Linux. It can also be run locally as a web application by cloning the github source code and following the corresponding instructions.

Building the Hello World bot

I've downloaded the desktop application for Bot Framework Composer 2.0. Launch the Composer and let's get started!

Step 1. Pick a template

Click "+ Create New" to start a new composer project. We will have a couple of templates to choose from. These make it easier for us to get started on building bots as they provide support for several common scenarios including providing pre-built dialogs, natural language models, etc. Let's keep it simple and pick the Empty Bot under C#. From the description on the right, it seems to be a good option for first-timers and does not depend on any additional Azure resources. Click Next.

TIP - Consider using the latest version of Bot Framework Composer- v2.0.0. The May 2021 Release of Bot Framework Composer hosts several new features and updates.

Fig: Select C# > Empty Bot

Step 2. Name the bot

Provide a name for the bot and choose Azure Web App as Runtime type. Select a local location for your bot files and click Create.

Fig: Name the bot - HelloWorldBot

Step 3. Start the bot

It may take a while to get the project ready. Once it's set up, we will note a couple of panes and options in the IDE. Before we do anything, let's see what we get out of the box for the Empty Bot. Click the Start button in the upper right corner. Once the bot is up and running, there are two ways to test the bot locally. Either we can Open in Web Chat which will open the bot within the IDE or we can Test in Emulator.

Fig: Local bot runtime manager

The Bot Framework Emulator is a tool that can be downloaded from the github repo to test your interactions with the bot. For now, let's Open in Web Chat and check the results. Even for an empty bot, it has greeted us with a welcome message! We didn't code for this response so let's find out where this came from.

Fig: Welcome message from the bot

Step 4. Find the Greeting response

In the left pane, under the Project folder, you will note a couple of Triggers.

Wait- What's a trigger? Simply put, triggers capture actions of interest and literally triggers your bot's dialogs to respond. E.g. the user joining a conversation is a trigger, asking a question maybe another. Apparently, the Empty Bot already has two triggers configured for us. Let's dig into the Greeting Trigger.

Fig: The Greeting Trigger

The Greeting trigger is fired as soon as a user joins the bot conversation. As suspected - the Greeting trigger displays the welcome message we saw earlier! But the workflow shows more logic. Here's why. As users begin to interact with the bot, we may want to ensure that every user is welcomed. But as much as we want to welcome a user, we may not want to show the same user a welcome message twice. This is ensured by the if/else block. It verifies that the current user is one who has not received a greeting previously. If true, it issues the welcome message. If not, it proceeds down the False branch, skipping the welcome message altogether.

TIP- Conversational User Experience (CUX) is as critical to the success of your bot as much as your logic. Care to give the best possible experience for your users by diligently crafting your conversations. Learn what makes a great CUX!

Step 5. Customize the bot response to "Hello World"

Now that we know where to plug in our welcome message, let's customize our message. In the right pane, under Bot Responses, I replaced the default message to "Hello World!" and also pasted a smiley emoji directly as part of the response.

TIP- Use the zoom in/ zoom out options on the IDE (center panel) to better reviews areas of your workflow.

Fig: Customize bot response to say "Hello World"

Step 6. The final run in Webchatand Emulator

Restart the bot from the upper right corner. Here are the final results in the Web Chat window.

Fig: Results in Web Chat

TIP- Click Restart Conversation- new user ID to clear the chat pane from previous messages. You may Save the Conversation Transcripts or open in Emulator from the top pane options in Web Chat.

We will observe the same results in Emulator as well.

Fig: Results in Bot Emulator

Next steps

I hope you're as happy as your Hello World bot! In this post, we discussed a Low code route to a Hello World chatbot, in just a matter of minutes. More on Dialogs, Language Understanding, Language Generation, Azure publish, and other Composer features in the upcoming posts. Stay tuned!

Happy Boting!