Journey to an intelligent Azure Chat Bot - Part 3

In this blog series we build a versatile and useful chatbot based on azure, microsoft bot framework, nodejs, teams, chatgpt. Today we hook up the chatbot with microsoft teams

Journey to an intelligent Azure Chat Bot - Part 3
Photo by Rolf Erik Lekang / Unsplash

First, I have to mention: As of today, I have no clue yet how to build a chatbot with Microsoft Azure. None of the steps below I have done before - Research will be necessary.
That said - the following are the goals and also the features of the bot built in this blog series. Achieving those goals will certainly facilitate a lot of the daily business:

Part-3 Content


Introduction


In the first and second part of this blog series, we already have built our basic Microsoft Azure chatbot and deployed it to Microsoft Azure Cloud. Now, let's focus on how to interact with the bot over Microsoft Teams.

The next and remaining blog posts of this series will be only for opensight.ch free subscription members. So sign up today and stay up to date with our blog.

Research


I did some research and found that, in order to get our bot connected to microsoft teams, we have to create a new App in the Microsoft Teams Developer Portal
https://dev.teams.microsoft.com/

Also, in our Bot Resource on Microsoft Azure Cloud, we have to enable a Teams Channel

Connect a Bot Framework bot to Microsoft Teams - Bot Service
Learn how to configure bots to connect to the Microsoft Teams channel and communicate with users via Teams.

-

Teams App, Teams Channel


When I open the bot resource in Microsoft Azure, I have the possibility to add a "teams channel". This is what we are going to do.

Image - Microsoft Azure Cloud Bot Resource - Add Teams Channel

I select the "commercial usage" and click apply.

Image - Microsoft Azure Bot resource - Teams Channel Setup

A link "open in teams" appears. Immediately, I can now test the Chat with the bot in Microsoft Teams. That is looking good so far. The bot is now able to communicate with Microsoft Teams.

Image - Test Chatbot in Microsoft Teams

But I like the chatbot to be active in an App in Microsoft Teams, that can be opened from the sidebar. So let's create a new app in the Microsoft Teams Developer Portal. Open https://dev.teams.microsoft.com/ and create a new app. In the "app features" I add my bot and click "personal" and also "team", because I like to try to embed the bot in a Microsoft Teams channel as well, though having the bot in a teams channel is not the focus of this blog series. We are focusing on personal conversation here. It is just for experimentation.

So then I click "publish to org".

Image - Setup new Microsoft Teams App for Chatbot

In the Teams Admin Center (https://admin.teams.microsoft.com), I also had to set the app to "allowed" - otherwise it wouldnt appear in the Microsoft Teams app for installation.

Image - Microsoft Teams approve bot app

Now I can add the app in Microsoft Teams. It will appear in the left sidebar, and you can chat with the Chatbot after it is installed.

Image - Chatbot im Microsoft Teams

Also, I have given a quick try adding the Bot App in a Teams Channel. This works - You can send a message to the bot with "@Testbot hello there" and it will reply.

Image - Chatbot in a Microsoft Teams Channel

For troubleshooting, the bot needs to run locally so we need a tunneling solution so the bot service in azure can communicate: ngrok

Debugging, NGROK

In the upcoming posts of this blog we like to play with dialogs, language detection etc. So we need to connect the bot service on azure with our bot app, which is running locally. We cannot redeploy the chatbot app each time when something is changed in the code - it would be too time intensive. So the chatbot has to run locally for debugging. The Azure Bot Service can only communicate over HTTPS with the chatbot - you are likely to need a tunneling solution.

The tunneling solution ngrok will help to do it. It is quickly installed and will give you a generated ngrok https url like:
https://***-***-***-**-**.eu.ngrok.io

Image - NGROK Tunneling for local debugging

Take this url and enter it in the azure portal in the bot service at "Messaging endpoint"

brew install ngrok
ngrok http 3978 --host-header=localhost

Now everything is hooked up correctly, and you can communicate in the Microsoft Teams App with your Chatbot Instance that is running locally on your machine for debugging. A little hint: Instead of starting your local bot with "npm start" you can install "nodemon" and launch the bot with "nodemon index.js". It will automatically restart every time you change a code file.

So that is it for today - the next goal is definitely achieved: Integrate the bot in a Microsoft Teams Channel. We are making good progress.

The next and remaining parts of the blog series will only be for opensight.ch free subscription members. So sign up right now and stay up to date with our new posts. The next part will be launched in a couple of days.