Bot Framework Composer — Introduction | Part 1

7 min readMay 2, 2021

The Bot Framework Composer is a visual designer that lets you quickly and easily build sophisticated conversational bots without writing code.

It’s an opensource tool running locally.

Built with the latest features of the Bot Framework SDK, Composer provides everything you need to build a sophisticated conversational experience:

· A visual editing canvas for conversation flows

· Tools to author and manage language understanding (LUIS) and QnA components

· Powerful language generation and templating system

· A ready-to-use bot runtime executable

What you can do with Composer

Composer is a visual editing canvas for building bots. You can use it to do the following:

· Build bots without the need to write code

· Author and publish NLP data such as LUIS models and QnA Maker knowledge base

· Author and validate language generation templates

· Author bots in multiple languages

· Publish bots to Azure App Service and Azure Functions

· Integrate external services such as QnA Maker knowledge base

· Extend Power Virtual Agents with Composer (Preview)

Advantage of developing bots with Composer

Some of the advantages of developing bots in Composer include:

· Use of Adaptive Dialogs allows for Language Generation (LG), which can simplify interruption handling and give bots character.

· The visual design surface in Composer that eliminates the need for boilerplate code and makes bot development more accessible. You no longer need to navigate between experiences to maintain LU model as it is editable within the app.

· Time saved with fewer steps to set up your environment.

Prerequisites:

1. Install Bot Framework Composer

2. Install Bot Framework Emulator

Plan your bot

Before building your bot application, make a plan of the bot you want to build. Consider the following questions:

· What your bot is used for? Be clear about the kind of bot you plan to build. This will determine the conversation flow and functionalities you want to implement in the bot.

· What problems does your bot intend to solve? Be clear about the problems your bot intend to solve. Solving problems for customers is the top factor you should consider when building bots. You should also consider things such as how to solve the problems easily and of course with the best user experience you can provide.

· Who will use your bot? Different customers will expect different user experiences. This will also determine the complexity you should involve in your bot design. Consider what language to implement the bot.

· Where will your bot run? You should decide the platforms your bot will run on. For example, a bot designed to run on a mobile device will have more features like sending SMS to implement.

· Keep a root menu: It is a good practice to present a root menu with some common choices like at the beginning of the interaction. That menu should come back into play when the user completes a task. Think of this root menu is like an app’s home screen. You begin your interaction with the app from the home screen and end with the home screen. Then you can take your next action. Guided conversation bot equipped with root & sub menu options clarify the user’s original inquiry, and deliver the most helpful information.

Creating the Support Bot

I’m going to build a support bot using guided conversation flow to collect information from the user and creates a support ticket along with the details for backend support agent to troubleshoot further.

This bot can even help user to track support ticket and helps user to get an update or reopens a ticket incase if issue still exist.

We’ve used lot of cool features and hopefully looking forward to share with you guys!!!

Before moving to implementation, let’s touch upon core concepts related to Bot Framework Composer.

Here are 3 main building blocks for bot development:

Dialog (1) → (*) Trigger(s) (1) → (*) Action(s)

Dialogs:

Each dialog represents a portion of the bot’s functionality and contains instructions for how the bot will react to the input. Simple bots will have just a few dialogs. Sophisticated bots may have dozens or hundreds of individual dialogs.

There are two types of dialogs in Composer: main dialog and child/Sub dialog. The main dialog is initialized by default when you create a new bot. You can create one or more child dialogs to keep the dialog system organized.

At runtime, the main dialog is called into action and becomes the active dialog, triggering event handlers with the actions you defined during the creation of the bot. As the conversation flows, the main dialog can call a child dialog, and a child dialog can, in turn, call the main dialog or other children dialogs.

Trigger:

Triggers are rules that tell the bot how to process incoming messages.

Action:

Triggers contain a series of actions that the bot will undertake to fulfill a user’s request.

I’ll show how to wire up these blocks to make bot functional.

Create a bot

The first step in creating a bot with the Composer is to create a new bot project from scratch (without any template). This will create a new folder on your local computer.

After creating the project, Composer will load the new bot’s main dialog. It’s something like a Main method in C# console app. The name of main dialog will be always same as name of the Bot. It should look like the following:

You can also notice default trigger “Greeting” to prompt welcome message to the user. You can rename the trigger as per your choice.

My support chat is a guided flow chatbot so here I’ll be mainly focusing on aspects related to guided conversation chatbot.

Through a guided chatbot, the users are presented with a set of questions regarding their queries and the users have to respond accordingly. When a certain button is clicked or tapped the users are led to wherever they are supposed to go based on their response.

So, here we’re not go to discuss on NLP and LUIS in this series.

Now that we have a main dialog with default trigger just to great a user with nice welcome message, we can start adding sub dialogs as per conversation scenario.

As I mentioned earlier, a sophisticated bot may have dozens or hundreds of individual dialogs to keep bot organized and to reuse the dialog in relevant scenarios.

I recommend using “kebab casing” as a naming convention for Bot and Dialogs.

For guided flow chat, it’s apt to choose Recognizer Type to Default recognizer.

Now, let’s create a dialog “Root-Menu” to prompt user with some common choices like at the beginning of the interaction.

I’ve used User Input (Multi-choice) to compose root-menu options. You can configure options at array of choices and can store selected option to a variable.

On authoring canvas, next action after multi-choice input is “Switch Branch” to handle conversation flow as per user selection. For here you can redirect conversation to appropriate sub dialog flow.

Each sub dialogue may have multi choice input to prompt user with options and/or various user inputs like text, number etc. as per the conversation flow.

Start your bot and test it

Now that your new bot has its first simple feature, you can launch it in the emulator and verify that it works.

1. Select Start bot in the upper right hand corner of the screen. This tells Composer to launch the bot’s runtime, which is powered by the Bot Framework SDK.

2. Once the bot’s runtime has started, the Local bot runtime manager will open. You can also select the icon on the right of the text Restart bot, to open and close the Local bot runtime manager.