The Argyle MVP

Yet another Teams blog but this one by Masters & MVP's

Azure AI Bots Development Featured

Building your own Teams Bot with Azure AI

In this post we will discuss how to create a bot in Microsoft Teams and leverage Azure AI (Preview) for answers to questions. I have tried to keep this straightforward in development and use easy-to-understand libraries and coding principles. You can find the final code on GitHub.

We are going to do a few things in this post:

  1. Create Bot in C#
  2. Test Locally
  3. Create Azure AI Endpoint
  4. Add Critical Items to Project
  5. Update Our Bot
  6. Publish Bot Code to Azure
  7. Create Azure Bot
  8. Create Teams App and Deploy

Create Bot in C#

To create the bot there are several tools you could use including the Teams Toolkit and numerous examples. We are going to do this via command line to reduce the amount of “extra” code in the demo. We are going to use the Echo Bot template as it will provide us with an easy framework. By default, the echo bot will just return what the user typed. We will replace the echo response with Azure AI response.

  1. Install the SDK .Net Core version 7 or later.
  2. Download the C# model of the Framework Echo bot:
    >>
    dotnet new -i Microsoft.Bot.Framework.CSharp.EchoBot
  3. Create a new Bot project:
    >>
    dotnet new echobot --name MyEchoBot
  4. Open the project with Visual Studio or VSCode. Your browser displays a page Your bot is ready! and indicates that it is possible to test the Bot locally, via the emulator.

Personally, I like to use Visual Studio for any .NET/C# project still. My screenshots will be from there, but it will work in VS Code as well.

Test Locally

  1. Download and install the Bot Framework Emulator from Microsoft.
  2. Press the [Open Bot] button and use the URL from the running application: http://localhost:3978/api/messages
  3. You should see a welcome message from the bot. Type a message and it should reply.

You now have a working bot that returns what you typed.

Create Azure AI Endpoint

First, you should know, that you need to be accepted into the Preview of Azure AI as of this writing. You can go here to apply for acceptance into the program. This will obviously be coming to GA soon.

From the Azure Portal

  • Create a new instance of the AzureAI. You might want to put this into a dedicated instance. East and South US are the locations you want to choose from.
  • Once the instance is created, you need to launch the Azure AI Portal
  • Once within the portal, click on Deployments from the left menu.
  • On the resulting page, select the model text-davinci-003 and give it a deployment name. I picked davinci.
  • You now can test and play with your Azure AI in the playground. The next step is to throw a few prompts into the completion’s playground.

You now have a functional AI environment. A note about text-davinci-003 model. It can do any language task with better quality, longer output, and consistent instruction-following than most other models.

For newer, ChatGPT 3.5 and later, you would instead want to create a deployment using the gpt-35-turbo model instead. Ultimately, the model you want to use is up to you. text-davinci-003 is better at text completion, whereas gtp-35-turbo is better for chat.

What we need to do next is get the endpoint for this deployment. At the top of the Completions playground, you will see “View Code”. When you click it, you will find the following page. At the top is the URL for this deployment. Go ahead and copy that information and save it. Choose JSON as this will be helpful to see what is expected to be sent to work.

The next thing we need is a way to authenticate to the endpoint. Back in the Azure Portal (not the Azure AI Studio) you will find Keys and Endpoint. You need a key, pick either Key 1 or Key 2. There is no difference.

Add Critical Items to Project

Before we continue, we need to add a couple of things to our project so this will work.

  • From Visual Studio, right-click on your project and find Manage Nuget Packages. On the resulting page, you want to search for RestSharp and install it. We are going to use this as our tool to connect to the HTTP endpoint.
  • In the project, we need to add a folder named Models and create two files’ named MessagePrompt.cs and MessageResponse.cs.
  • In the MessagePrompt.cs file, add the following text.

namespace EchoBot.Models
{
    public class MessagePrompt
    {
        public string prompt { get; set; }
        public int temperature { get; set; }
        public float top_p { get; set; }
        public int frequency_penalty { get; set; }
        public int presence_penalty { get; set; }
        public int max_tokens { get; set; }
        public object stop { get; set; }
    }
}
  • In the MessageResponse.cs file, add the following text.

namespace EchoBot.Models
{
    public class MessageResponse
    {
        public string id { get; set; }
        public string _object { get; set; }
        public int created { get; set; }
        public string model { get; set; }
        public Choice[] choices { get; set; }
        public Usage usage { get; set; }
    }

    public class Usage
    {
        public int completion_tokens { get; set; }
        public int prompt_tokens { get; set; }
        public int total_tokens { get; set; }
    }

    public class Choice
    {
        public string text { get; set; }
        public int index { get; set; }
        public string finish_reason { get; set; }
        public object logprobs { get; set; }
    }
}
  • Right click on your project and select Manage User Secrets. You will eventually update all these items.

{
  "MicrosoftAppType": "",
  "MicrosoftAppId": "",
  "MicrosoftAppPassword": "",
  "MicrosoftAppTenantId": "",
  "AzureAI": {
    "RootUrl": "",
    "PathUrl": "",
    "ApiKey": ""
  }
}

Update Our Bot

Now that we have a functional Azure AI environment, we need to wire up and replace the echo bot with our new code. If you go back to Visual Studio and open the bot from the bot folder. It will be named what your project was called. Mine is called EchoBot.cs.

On line 18 in the screenshot, you can see a variable named replyText. We can see Echo and then {turnContext.Activity.Text} which is the text the user typed. We are going to replace Line 18 with code to communicate with Azure AI and then return the response from there.

We replaced line 18 with the following.

There is A LOT of code here so let’s look and see what is happening.

Lines 30 to 38 are the message prompt that we need to send. This is exactly what we saw from the Azure AI Studio when we clicked ‘View Code’.

NOTE: Here you will see the MessagePrompt is one of those critical items we created above.

You can see the prompt and various other settings for Azure AI. These options include items: temperature, top_p, token usage etc. We will do some definitions of these items at the bottom of this blog post.

Line 41 to 51 is what is needed to connect to the Azure AI endpoint. In this example, I am using RestSharp as a method to connect to and consume the endpoint. You could use the native HTTP tools if you want. For this demo, I thought RestSharp was a little easier to read and understand. In Line 41, 44 and 47 you can see we are using our configuration settings. From a security standpoint, this is best practice. Don’t put URL and authentication tokens directly into code. You might save this to GitHub at some point in time.

Line 54 is where we deserialize the JSON we received from Azure AI.

Line 56 is the same as before except we have the response object, this returns the text back to the bot.

Here is the code in a raw format for ease of copy/paste.


// Add Logic To Connect To Rest API
MessagePrompt message = new MessagePrompt()
{
   prompt = turnContext.Activity.Text,
   temperature = 1,
   top_p = 0.5f,
   frequency_penalty = 0,
   presence_penalty = 0,
 max_tokens = 500,
};

// Create Client
var client = new RestClient(_configuration.GetValue<string>("AzureAI:RootUrl"));

// Create a new request
var request = new RestRequest(_configuration.GetValue<string>("AzureAI:PathUrl"), Method.Post);
request.AddHeader("Accept", "application/json");
request.AddHeader("Content-Type", "application/json");
request.AddHeader("api-key", _configuration.GetValue<string>("AzureAI:ApiKey"));
request.AddJsonBody(message);

// Execute the request and get the response
var response = client.Execute(request);

// Deseralize Response
var responseObject = JsonSerializer.Deserialize<MessageResponse>(response. Content);

await turnContext.SendActivityAsync(MessageFactory.Text(responseObject.choices[0].text, responseObject.choices[0].text), cancellationToken);

Lastly, we need to add access to the configuration settings. At the top of this file, you need to add the following:

Here is the code for copy/paste.


private readonly IConfiguration _configuration;

public EchoBot(IConfiguration configuration)
{
   _configuration = configuration;
}

The last step is we need to update that secrets.json file with the basic information to connect to Azure AI.


{
  "MicrosoftAppType": "",
  "MicrosoftAppId": "",
  "MicrosoftAppPassword": "",
  "MicrosoftAppTenantId": "",
  "AzureAI": {
    "RootUrl": "https://(yourinstance).openai.azure.com",
    "PathUrl": "openai/deployments/(yourdeployment)/completions?api-version=2022-12-01",
    "ApiKey": "bbbbbccccccdddddddeeeeeeefffffff"
  }
}

Now you should be able to start the application again and using Bot Emulator you can communicate with Azure AI.

Publish Bot Code to Azure

Now we have a functional bot that is communciating with Azure AI we need to publish it to Azure so Teams can use it. Yes, we could use ngrok and run it locally, but it is important to see the entire process.

The straightforward way to publish is to right-click your project in Visual Studio and choose Publish.

Choose Azure.

Choose App Service (Windows)

You can either use an existing app service in a resource group or create a new one. In my case, I’m going to create a new one. Click the Add button and fill out the wizard of where you want the App Service to be created. When you are done, you can click Publish.

When the publication is done, your default browser should open and show you that your bot is ready to use.

Create Azure Bot

If we want to use our new bot in Microsoft Teams, we need to create a bot instance and register it to Microsoft Teams.

To be able to use this Bot, you must create a Azure Bot Channels Registration :

  • Go to the Azure Portal and click Create Service. Search for Azure Bot and click create.
  • Pick a name, set the pricing to free (unless this really is production) and choose Single Tenant. Click Review and Create.
  • Once your bot is created. Go to the resource. Click on the Configuration tab and update the messaging endpoint. This is the full address of your Azure App Service you deployed. It will be something like https://echobotdemocomms.azurewebsites.net/api/messages
  • Additionally, on this screen, copy the Microsoft App ID and App Tenant ID. Update your secrets.json file with this information. In the MicrosoftAppType you can set it to “SingleTenant”.
  • Next, click the Manage Password link next to Microsoft App ID. This will redirect you to the Certificates and Secrets. Create a new secret. This is important! Copy the secret you just received into your secrets.json file. You will not have a chance to see the secret again after this.
  • Once you have your secret, go back to your Azure Bot.
  • Click on Channels and find Microsoft Teams. Click on Microsoft Teams. It will ask you to agree to a license.
  • On the resulting page, all you need to click is Apply. When you go back to Configuration you should see Microsoft Teams setup.

There is one more step you need to do. Although we added all of those settings into the secrets.json, those values WILL NOT get to the server. The secrets.json is for local development only.

In the Azure Portal navigate to the App Service you created in the step above. Click on Configuration.

Here you need to add seven new application settings. These are the same items you have saved in your secrets.json file. Add these items and the related values;

  • MicrosoftAppType
  • MicrosoftAppId
  • MicrosoftAppPassword
  • MicrosoftAppTenantId
  • AzureAI:RootUrl
  • AzureAI:PathUrl
  • AzureAI:ApiKey

Once done, it should look like this:

Click Save. Your web service will reboot.

If everything worked, you should be able to go to the Bot you created, click on Test in Web Chat. After a moment, you should see the welcome message.

Create Teams App and Deploy

If the above Test in Web Chat works, it is time to deploy this to Teams.

On the Basic Information page, navigate to the bottom and enter the App ID of your bot. You also need to fille out your Company Name and enter in website information in the three required spots. You can just use your generic domain for this.

Next, click on App Features and choose Bot. Then enter the App ID again. Additionally, select Personal and Team for the scope.

Click on App Package under Publish. Then choose Download App Package from the top of the page.

Now all you need to do is install this into Teams. This assumes you can side load application. Navigate to the Apps and click on Manage Your Apps at the bottom. Then choose Upload an app and select the Zip file you just downloaded.

After a moment, your bot should install and give you your welcome message. Ask it a question and you are set.

LEAVE A RESPONSE

Your email address will not be published. Required fields are marked *

Richard is an Office Apps & Services MVP (Teams / Skype) who lives in Minneapolis, MN. Microsoft Certified Solutions Master (MCSM) and MCSM Instructor - when those were a thing long ago. When not writing code, breaking teams - debate coach and avid golfer.