Bot Framework Composer is based on Bot Framework SDK V4 and provides powerful visual design UI to create adaptive dialogs efficiently in low code mode. This article elaborates how to use latest Bot Framework Composer 2.1.2 to create a smart weather forecast bot app with Azure LUIS & Map services on Windows.

If you are a beginner on bot development, it is no problem to complete all steps in the article and create a bot app successfully. To know more details on how it is built in Bot Composer further, you may want to reference below articles from time to time, which will help you to understand how Bot Composer works and easily step into this domain:

•Basics of the Bot Framework Service - Bot Service | Microsoft Docs

•Conversation flow and memory in Bot Framework Composer | Microsoft Docs

•Add language understanding in Bot Framework Composer | Microsoft Docs

•Language generation in Bot Framework Composer | Microsoft Docs

Before we start, you should have a Windows 10/11, Azure Subscription as a development environment. Below are shortcut links to each section of this article:

Environment Preparation

Section 1: Build a bot integrated with Azure LUIS

Section 2: Add Weather feature supported by Azure Maps to the bot app

Environment Preparation

1. Install Node.js LTS 14.x with npm.

1. Install .NET Core SDK 3.1 or later.

Check the version in C:\Program Files\dotnet\sdk or C:\Program Files (X86)\dotnet\sdk to see if you have installed it.

1. Install Bot Framework Composer

1. Start Composer, enable firewall settings for it:

Section 1: Build a bot integrated with Azure LUIS

1. In Bot Framework Composer, click Home, click Create New

1. Choose Core Bot with Language, and click Next. This template creates a bot with Azure LUIS service.

1. Input a bot name, such as MyWeatherBot, Runtime is Azure Web App, and click Create

Notice:

1. After a while of loading, you will see this project interface:

        5.   Click Publish

       6.  Click Publish profiles

     7.  Click Add New

     8.  Give it a name, such as AzurePublish, choose Publishing Target as Publish bot to Azure, click Next

        9.    Click Next

     10.  Sign in your Azure subscription

     11.   After successfully login, if you have multiple Azure Directory, choose the correct one:

      12.  Create a new Azure resource group for this Bot app, name your bot, such as MyWeatherBot001 (this should be different from others), click Next

      13.    Review the Add Resources list, there are required resources and optional resources. Scroll down, un-check Optional resources, you can keep Application Insights, and click Next:

      14.   Click Create to provision Azure resources.

Note: if provision failed, please delete the resource group, and create the profile to provision again. Some useful Azure CLI commands may be helpful:

//Delete resource group
az group delete --name <resource group name>

//purge safe-deleted azure cognitive resource
az resource delete --ids "/subscriptions/{Subscription ID}/providers/Microsoft.CognitiveServices/locations/{location}/resourceGroups/{resource group name}/deletedAccounts/{safe-deleted cognitive service name}" --verbose

    15.  After provision completes successfully, go to https://portal.azure.com , check the resource group, we will see below resources are available now:

     16.  Click luis-authoring resource, click Key and Endpoint, copy a key, for example, KEY 2:

      17. Go to Composer, click Configure, select MyWeatherBot , click Development Resources , input the authoring key got at step 16, and LUIS region you configured at step 12:

     18. Scroll down to the bottom of the page, click Retrieve App ID

     19.  Choose your publish profile configured at step 8, click Save App ID, you will see your bot App ID and password automatically fill in the fields:

      20.   In Composer, click Create, we can see several default triggers and dialogs have been created. Select each of them, can get the ideas about how conversations are created in canvas:

When select the MyWeatherBot dialog, it shows the Recognizer/Dispatch type is Default, means we will use LUIS to recognize users’ inputs/intents:

      21. Click Start Bot on the top right, you will see a prompt about network access configure, click Allow access:

      22. Once you see the Local bot runtime manager starts, click Open Web Chat

     23. After getting the welcome message, type “how do you work”, you will see the local bot starts working:

Section 2: Add Weather feature supported by Azure Maps to the bot app

1. Go to the Azure Map Account resource, click Authentication, copy Secondary Key. It will be used at step 4.

1. Back to Composer, click Configuration, toggle on Advanced Settings View

1. Add “WeatherApiKey” : <the Azure Map Account key> right before “skillConfiguration” key in the json configuration:

1. Click Package Manager, in the Browser tab, search “weather”, find Bot.Builder.Community.Components.Dialogs.GetWeather  (4.13.2), click and install it

      6.  After install the GetWeather package, click Create, we can see the GetWeatherDialog, click BeginDialog below GetWeatherDialog, to be familiar with its conversation flow:

     7.  Select MyWeatherBot root dialog, click … , click Add New Trigger

     8.  Choose Intent recognized as the trigger type, set the trigger name as GetWeather, click Submit

    9.  In bot explorer, click the GetWeather trigger, add below content in the Tigger Phases property:

- how is the weather tomorrow
- tell me about the weather
- how is the weather outside
- How is the weather in Seattle
- What is the temperature in Melbourne
- Can you tell me the weather in New York

@ prebuilt geographyV2

Backend LUIS service will determine intents based on above content, give recognized intent score, and pick up locations based on prebuilt geographyV2 entity

Also in put =#GetWeather.Score>0.8 in the conditions field, means if the user input/intent score is above 0.8, then will trigger GetWeather

     10.   Click the + sign in Canvas, select Dialog management -> Begin a new dialog

      11.   Select Begin a new dialog in canvas, and choose GetWeatherDialog in its Dialog name

      12.  Click Start Bot

      13.  After Local Bot started, click Open Web Chat

      14.  In the bot message chat window, type message “how is the weather”, send it. Follow its next prompt, input a city name, such as “Seattle”, we will see:

15. In the bot message chat window, type message “how is the weather in Washington”, send it. Please notice that this time the bot doesn’t give more prompt for getting location. It can give answer directly, because LUIS helps to get the location entity directly in the statement:

Congratulations! The bot starts working with weather predict and language understanding features without coding!

However we note the city time and max/min info are still not correct/expected displayed in the adaptive card response, how to improve it if user wants to see more details about time zone, daylight saving, country, etc.? I will explain how to achieve this step by step in next article:

Improve the Weather Forecast Bot App in Bot Framework Composer - Microsoft Tech Community

Happy Modern Bot Development!

Freist Li