Chatbot Development using Bot Framework Composer
Published: 2022-07-05 10:46:57

---
title: Chatbot Development using Bot Framework Composer
published: true
date: 2021-11-29 09:57:47 UTC
tags: 
canonical_url: https://lkgforit.com/chatbot-development-using-bot-framework-composer
---

In this article we are going to see how to create a chatbot using Bot Framework Composer and Microsoft Azure AI tools like LUIS.

Prerequisites:

1. [Bot Framework Composer](https://github.com/microsoft/BotFramework-Composer/releases) 
2. Azure Subscription.
3. Basic Knowledge of natural language AI LUIS (Language understanding intelligent service).

After installing Bot Framework Composer open it and it will look like below image:

![composerstartpage.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638171091193/-K7m4hIVM.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638172472391/poAeFM3lH.png)

## What you can do with Composer

Composer is a visual editing canvas for building bots. With Composer, you can:

- Create a new bot using a template, which incorporates the Virtual Assistant capabilities directly into Composer.
- Add natural language understanding capabilities to your Bot using LUIS and QnA and FAQ capabilities using QnA Maker.
- Author text and if needed speech variation responses for your Bot using language generation templates.
- Author bots in multiple languages.
- Test directly inside Composer using embedded Web Chat.
- Publish bots to Azure App Service and Azure Functions.
- Extend Power Virtual Agents with Composer (Preview).
- Integrate external services such as QnA Maker knowledge base.
- Beyond a visual editing canvas, you can use Composer to do the following:

- Import and export dialog assets to share with other developers.

- Package manager provides a range of reusable conversational assets and code built by Microsoft and third parties. These assets can quickly add functionality to your project.
- Make any Bot available as a Skill for other Bots to call.
- Connect to a skill.
- Extend the dialog authoring canvas with Create custom actions.
- Integrate Orchestrator, which is an advanced transformer model-based router that can delegate from a parent bot to skills based on a user's utterance.
- Host Composer in the cloud.
- Extend Composer with plugins.

## Adaptive dialogs

Dialogs provide a way for bots to manage conversations with users. Adaptive dialogs and the event model simplify sophisticated conversation modeling enabling more natural, dynamic conversation flow, interruption, and context switching. They also help you focus on the model of the conversation rather than the mechanics of dialog management. Read more in the dialog concept article.

## Language understanding

Language understanding is a core component of Composer that allows developers and conversation designers to train language understanding models directly in the context of editing a dialog. As dialogs are edited in Composer, developers can continuously add to their bots' natural language capabilities using the .lu file format, a simple Markdown-like format that makes it easy to define new intents and entities, and provide sample utterances. In Composer, you can use regular expression, LUIS, and Orchestrator recognizers. Composer detects changes and updates the bot's cloud-based natural language understanding model automatically so it's always up to date. Read more in the language understanding concept article.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638173913945/oyYmQKG9S.png)

## Language generation

Creating grammatically correct, data-driven responses that have a consistent tone and convey a clear brand voice has always been a challenge for bot developers. Composer's integrated bot response generation allows developers to create bot replies with a great deal of flexibility, using the editor in the Bot Responses page or the response editor in the Properties pane. Read more in the language generation concept article.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638173958761/ncW0oYmyr.png)With Language Generation, you can achieve previously complex tasks easily such as:

- Including dynamic elements in messages.
- Generating grammatically correct lists, pronouns, articles.
- Providing context-sensitive variation in messages.
- Creating Adaptive Cards attachments, as seen above.
- Provide speech variations for each response, including Speech Synthesis Markup Language (SSML) modifications, which are key for speech-based experiences such as telephony.

## QnA Maker

QnA Maker is a cloud-based service that enables you to extract question-and-answer pairs from existing FAQ-style documents and websites into a knowledge base that can be manually curated by knowledge experts. QnA Maker, once integrated into a bot, can be used to find the most appropriate answer for any given natural language input from your custom knowledge base of information.

## Bot Framework Emulator

Emulator is a desktop application that allows bot developers to test and debug bots built using Composer. This tool allows for more advanced scenarios (like Authentication), which Composer's integrated Web Chat feature doesn't support at this time.

# Create a Basic Bot with LUIS integration

Steps:

1. Click on create new.

![createnew.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1638171162661/ry92K9MT4.png)

1. Select Core Bot with Language and click on next.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638171224521/SJ1G67qHL.png)

1. Give some name and select folder to save, be the app with azure web app and create.

![createbot.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638171399661/vIcGuZRCz.png)

It will run for some time to download template.

After that you will see this page with basic bot created.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638171663297/AgXxdzzMx.png)

We can see a basic bot with the following intent triggers:

1. Greeting Trigger
2. Cancel trigger
3. Help Trigger
4. Error occurred Trigger.
5. Unknown Intent Trigger

and below dialogs:

1. Cancel Di Talog
2. Help Dialog
3. Welcome Dialog

## How to create an intent Trigger

Click on three dots in the base dialog and click on add new intent trigger like screenshot below:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638176788456/k0vmawkIH.png)Fill in the intent name and trigger phrases which are the utterances for the intent in below screenshot.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638176904835/E4pVFOxrj.png)

After adding it will look like this: ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638176862755/w_31Pb7bG.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638177096470/TFfRISvAj.png)To add any logic or response click on plus icon like below:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638177140107/_0NSNAYHz.png)

After clicking send a response you will see a input field to fill in the text or attachments as a response:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638177791305/pGuCNDUFI.png)you can use any property to get values as a text response:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638177852235/DHc7jrcB0.png)we can also use in built functions to do some logic manipulation.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638177909326/M9h6IzDY4.png)

or you can add attachments or suggested actions.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638177943381/dJjFk1_ECs.png)

In the attachment we can also create a list of available options - adaptive cards, hero card, etc.,

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638177986879/QWBVp_kjD.png)

if you click on adaptive card it will generate a sample card in json which you can design and update using [this site](https://adaptivecards.io/designer/) .

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638178079607/oEefvZSbD.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638171756129/Y5A_2NFuP.png)

### 1. Greeting Trigger:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638171906315/K3da_WZuE.png)

This is a Conversation Update activity trigger which happens on any conversation update. In which we are seeing a logic of getting member added property from 'turn.Activity.membersAdded' value and checking if the recipient is the member added then we can trigger Welcome dialog by this logic 'string(dialog.foreach.value.id) != string(turn.Activity.Recipient.id)'.

### In Welcome Dialog:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638172224397/vCiC19dUZ.png)

We are checking whether the user is greeted from property: 'exists(user.greeted)' this is a custom property we are setting on first call to this welcome dialog, and it will be false so in false flow it will send a response to the user with intro message and set the 'user.greeted' property for this logic to work so that user is not greeted every time.

### In Help intent trigger:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638174210690/qQbjm9DcZ.png)

# LUIS Configurations

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638178259401/Ax9XsLIWgj.png)

Click on setup language understanding link in below screen shot

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179225685/0v8Zfuboq.png)

Select existing resources if the LUIS is already created in Azure.

else click on create and configure LUIS resources

After clicking on create resources then it will ask for login enter your azure login credentials and it will create the azure resources for you.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179585199/w_esIJAj8.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179605242/DFrcgnKP2.png)

Also create Azure Bot resource in Azure then fill in the credentials of microsoft app id and password below:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179413179/5mrZbzhbK.png)

After following these steps, you will get the values filled in here

on clicking the advanced settings radio button

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179503073/L0A7ypGn8.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179460375/bRaUANNoII.png)

After all these steps click on start bot

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179671708/AOAmv49Ft.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179704977/fNJw1LyGw.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179758200/5cnb8_961.png)

click on open in webchat to test the bot

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638179785818/ScHTIpFEo.png)

Your bot is running successfully!

Thanks Happy Coding :)