Step-by-Step Guide: Building, Integrating, and Deploying a Microsoft Teams Bot Using Visual Studio, OpenAI, and Azure - Part 2

What is a Bot and Its Advantages?

A bot is a software application designed to automate tasks, often simulating human interaction. Bots are widely used in customer support, data retrieval, and task automation, making workflows efficient and reducing manual effort. With advancements in AI, bots can now engage in intelligent conversations and provide personalized assistance.

Advantages of Bots:

• Efficiency: Automates repetitive tasks, saving time and resources.
• 24/7 Availability: Provides uninterrupted support to users.
• Scalability: Handles multiple interactions simultaneously.
• Cost-Effective: Reduces the need for extensive human resources.

This tutorial is part of a series. To understand it fully, make sure to check out Part 1: Azure Configuration for Your Bot.

This blog covers the points of: Bot Configuration and Deployment

1. Add the Bot Framework v4 SDK Templates to Visual Studio.
2. Create an Echo Bot Solution in Visual Studio.
3. Configure the OpenAI API in the Echo Bot Solution.
4. Test the Bot Locally in BotFramework-Emulator.
5. Deploy the Bot to Azure App Service.
6. Create a manifest.json for Microsoft Teams.
7. Add the App to Microsoft Teams.
   
   

1. Add the Bot Framework v4 SDK Templates to Visual Studio.
   
Bot Framework SDK(Software Development Kit): This SDK provides essential tools and configurations for building bots. Visual Studio makes it easy to integrate and manage your bot's development.|


1. Click on the 'Download' link to open the Bot Framework v4 SDK page.
2. Once the page opens, find the green "Download" button.
3. Click the green button to download the Bot SDK. 
4. After the download is complete, install the SDK on your system.
   
   
   
5. This template includes default bot configurations, making it easier to get started with your bot development.
   
   
   
2. Create an Echo Bot Solution in Visual Studio.
1. Open Visual Studio and choose "Create a new project." 
2. Search bar in search ‘bot’. 
3. Select template  ‘Echo Bot (Bot Framework V4)’ 
   
   
   
4. Add a Project name and create a project.
   
   
   
   
3. Configure the OpenAI API in the Echo Bot Solution.
   
• Add Dependencies: Install the System.Net.Http and Newtonsoft.Json packages via NuGet for handling HTTP requests and JSON.
  
• Implement the ChatGPT Service: 
1. Go to solution explore and Open file EchoBot.cs
2. Add a new method in the following code to interact with the OpenAI API: 
   
   // New method to implement for retrieving OpenAI API responses and  returning them in the

   //proper format

   
   

    private async Task<string> GPTResponseAsync(string userQuery)

    {

       // API key for accessing Azure OpenAI service (replace this with your actual key)

       string apiKey = "API_KEY";

    

       // Endpoint URL of the Azure OpenAI deployment with the correct API version

       string endPoint = "AZURE_API";

    

       // Creating an HttpClient to send HTTP requests to the API

       var client = new HttpClient();

    

       // Preparing an HTTP POST request with the specified endpoint

       var request = new HttpRequestMessage(HttpMethod.Post, endPoint);

    

       // Adding the API key to the request header for authentication

       request.Headers.Add("api-key", apiKey);

    

       // Constructing the request body in JSON format

       // - `messages`: Contains the conversation with roles (`system`, `user`, `assistant`)

       // - `max_tokens`: Defines the maximum response length

       // - `temperature`: Controls the randomness of the response (higher values make output

       //    more creative)

       // - `top_p`, `frequency_penalty`, `presence_penalty`: Other parameters to fine-tune

       //    the response generation

        var content = new StringContent($@"{{

        ""messages"": [{{

          ""role"": ""system"",

          ""content"": ""You are an AI assistant designed to help people discover information.""

        }}, {{

          ""role"": ""user"",

          ""content"": ""{userQuery}""

        }}, {{

          ""role"": ""assistant"",

          ""content"": ""Hello! How can I assist you today?""

        }}],

        ""max_tokens"": 800,

        ""temperature"": 0.7,

        ""frequency_penalty"": 0,

        ""presence_penalty"": 0,

        ""top_p"": 0.95,

        ""stop"": null

      }}", null, "application/json");

    

       // Setting the content of the request to the JSON string prepared above

       request.Content = content;

    

       // Sending the request asynchronously and awaiting the response

       var response = await client.SendAsync(request);

    

       // Ensuring the response status code is successful (2xx), throwing an error if not

       response.EnsureSuccessStatusCode();

    

       // Reading the response content as a string

       var result = await response.Content.ReadAsStringAsync();

   
   

       // Parsing the result string into a JSON object    

       var resultObject = JObject.Parse(result);      

   
   

       // Returning the assistant's response from the JSON object    

        return Convert.ToString(resultObject["choices"][0]["message"]["content"]);

    }
   Note: Please double-check your API and API key to ensure they are working. (This code uses the Azure OpenAI API.)
   
   
• Integrate ChatGPT with the Bot: 
1. In your bot's main dialogue or message handler (e.g., EchoBot.cs), integrate the ChatGPT service: 
2. Method Purpose: This method is triggered whenever a user sends a message in the conversation (e.g., in Microsoft Teams). It takes the message, forwards it to OpenAI's GPT API, and sends the response back to the user.
3. TurnContext: This object contains all the relevant details about the conversation, including the message sent by the user. turnContext.Activity.Text gets the message text that the user sent. 
4. GPTResponseAsync: The method sends the user's message to the GPT model hosted on Azure OpenAI and waits for the AI's response. It returns the response, which will be sent back to the user. 
5. MessageFactory.Text: This creates a new message to be sent back to the user. The same text is passed twice; the first parameter is what will be displayed, and the second is for any formatting or processing. 
6. CancellationToken: This parameter is used to manage the cancellation of asynchronous tasks. It ensures that the operation can be cancelled if needed without blocking the application. 
   
     protected override async Task OnMessageActivityAsync(

       ITurnContext<IMessageActivity> turnContext,

        CancellationToken cancellationToken)

    {

        //var replyText = $"Echo: {turnContext.Activity.Text}";

        var gptResponse = await GPTResponseAsync(turnContext.Activity.Text);

        await turnContext.SendActivityAsync(

               MessageFactory.Text(gptResponse, gptResponse),

               cancellationToken);

    }
   
   
   
4. Test the Bot Locally in BotFramework-Emulator.
   
1.  Go to the following link to directly 'download' BotFramework-Emulator exe file.
2. Once the Bot Framework Emulator is downloaded, install it.
3. Run your Project When successfully running the solution open the Bot window and copy the URL. 
   


4. Open the Emulator > “Open Bot” > set your URL plus “api/messages” > Connect
   


5. Test your bot.
   
   
   
   
5. Deploy the Bot to Azure App Service.
• Prerequisite
• Azure Tenant ID
• MicrosoftAppId
• MicrosoftAppPassword
  
  
1. Azure Tenant ID: Azure Portal > Azure Active Directory > Overview > Directory ID (copy this value)
2. Microsoft App ID: Azure Portal > All services > Bot Services (or Azure Bot) > [Your Bot] > Settings > Microsoft App ID (copy this value)
3. Microsoft App Password: Azure Portal > All services > Bot Services (or Azure Bot) > [Your Bot] > Settings > Manage > Certificates & secrets > New client secret > Add (copy the value of the newly created client secret)
4. Open the Visual Studio solution(6) for your Echo Bot and navigate to the appsettings.json file. Add the following configuration (paste the IDs)
   
   
   
5. Visual Studio > Solution Explorer > Right-click on your project > Publish > Add New Profile > Azure 
   
   
   
6. Sign in to Azure (if required) and select Created app service for the bot. then Finish
   
   
   
   
7. Click on 'Publish' to deploy the app to Azure App Service.
   


6. Create a manifest.json for Microsoft Teams.
1. Create a new file named manifest.json in your project folder.
2. Add the following basic structure to your manifest.json file: Need more information click manifest.json
   
   
   

       {

           "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",

           "manifestVersion": "1.16",

           "version": "1.0.9",

           "id": "<YOUR_TEAMS_APP_ID>",

           "packageName": "com.microsoft.teams.extension",

           "developer": {

               "name": "Teams App, Inc.",

               "websiteUrl": "<YOUR_WEBSITE_URL>",

               "privacyUrl": "<YOUR_WEBSITE_URL>",

               "termsOfUseUrl": "<YOUR_WEBSITE_URL>"

           },

           "icons": {

               "color": "color.png",

               "outline": "outline.png"

           },

           "name": {

               "short": "Gangbox ChatBot",

               "full": "Gangbox ChatBot"

           },

           "description": {

               "short": "This is AI Chatbot.",

               "full": "This is AI Chatbot."

           },

           "accentColor": "#FFFFFF",

           "bots": [

               {

                   "botId": "<YOUR_TEAMS_APP_ID>",

                   "scopes": [

                       "personal",

                       "team",

                       "groupchat"

                   ],

                   "supportsFiles": false,

                   "isNotificationOnly": false,

                   "commandLists": [

                       {

                           "scopes": [

                               "personal",

                               "team",

                               "groupchat"

                           ],

                           "commands": [

                               {

                                   "title": "welcome",

                                   "description": "Resend welcome card of this Bot"

                               },

                               {

                                   "title": "learn",

                                   "description": "Learn about Adaptive Card and Bot Command"

                               }

                           ]

                       }

                   ]

               }

           ],

           "composeExtensions": [],

           "configurableTabs": [],

           "staticTabs": [],

           "permissions": [

               "identity",

               "messageTeamMembers"

           ],

           "validDomains": []

       }

      


3. Replace Placeholders
   
• id: Your bot's Microsoft App ID.
• developer: Fill in details about your name/company and URLs for your website, privacy policy, and terms of use.
• botId: The same as your Microsoft App ID.
• icons: Add the paths to your bot's icon images (color and outline versions).
  
  Add two images (icon files) in your folder:
  - color.png (192x192 pixels)
  - outline.png (32x32 pixels)


4. Compress Files into a Zip
   Include the following files in a zip file:
   - manifest.json
   - color.png
   - outline.png
   
   The zip file will be your Teams app package.
   
   
   
7. Add the App to Microsoft Teams.
1. Go to Microsoft Teams > Apps > Upload a custom app > Upload for me or my teams.
   
   
   
   
2. Upload your .zip file, and your bot will be added to Microsoft Teams.
   
   

Thank you for reading! We hope this guide helped you successfully configure your bot. Feel free to share your thoughts or questions in the comments below!

If you have any questions you can reach out our SharePoint Consulting team here.

Step-by-Step Guide: Building, Integrating, and Deploying a Microsoft Teams Bot Using Visual Studio, OpenAI, and Azure - Part 1

In today's fast-paced business environment, effective communication and automation are crucial for productivity. Microsoft Teams bots powered by AI can significantly enhance your team's collaboration and efficiency. By integrating OpenAI with a Microsoft Teams bot, you can automate responses, streamline workflows, and offer instant support. This guide will walk you through the process of setting up and deploying a bot that leverages OpenAI’s capabilities to bring intelligent, natural interactions to your Microsoft Teams environment.

Why Need a Teams Bot?

A Microsoft Teams bot integrated with OpenAI enhances team collaboration by automating repetitive tasks, providing instant responses to queries, and streamlining workflows. It improves productivity and ensures round-the-clock support, offering human-like interactions within the team's environment. 

Key Advantages: 

• Automated Assistance: Reduces repetitive work and answers common questions instantly.
• Natural Conversations: Uses AI to understand and respond naturally in multiple languages.
• Integration and Personalization: Customizable to meet specific business needs and integrate with other tools
  
  

This blog is divided into two parts to help you easily navigate and follow the steps for creating and deploying a bot:

Part 1: Azure Configuration for Your Bot

1. Setting up a new resource group for your bot.
2. Set up the Azure Bot and Key Vault resources.
3. Setting up the web application along with its service plan.
4. Configuring the bot credentials and channels 
   
   

Part 2: Bot Configuration and Deployment here

1. Add the Bot Framework v4 SDK Templates to Visual Studio.
2. Create an Echo Bot Solution in Visual Studio.
3. Configure the OpenAI API in the Echo Bot Solution.
4. Test the Bot Locally in BotFramework-Emulator.
5. Deploy the Bot to Azure App Service.
6. Create a manifest.json for Microsoft Teams.
7. Add the App to Microsoft Teams.
   
   

This blog covers the points of Part 1: Azure Configuration for Your Bot.

1. Setting up a new resource group for your bot.
   
We'll begin by setting up a new resource group in our subscription to host the resources needed for our bot deployment. 


1. Launch the Azure Portal in your browser.
2. Navigate to Resource Groups from the menu on the left, and click Create. 
3. Choose the subscription you want to use. 
4. Enter a name for the resource group, following your organization's naming standards.
5. Pick a region close to your users (for example, the US if your users are in Europe
   
   
   
   
2. Set up the Azure Bot and Key Vault resources.
   
Once the resource group is set up, go to the resource group and follow these steps to create the Azure Bot and Key Vault resources. The Key Vault is automatically created when setting up the bot resource. The Azure Bot resource is essential for managing communication between the bot code hosted on Azure and the client application (such as Microsoft Teams). The Key Vault stores the client secret necessary for authentication. 


1. Within the newly created resource group, click the 'Create Resource' button. This will take you to the Marketplace.
2. In the search bar, type Azure Bot and select it from the results.
   
   
   
3. Click Create to start setting up your bot.
   
   
   
4. Enter a unique name for the bot as its identifier (e.g., projectname-bot). This will serve as the bot’s "handle." You can set a separate display name, but the handle is just a unique identifier. 
5. Verify that the correct subscription and resource group are preselected. 
6. The default pricing tier is Standard, but you can downgrade it to Free by selecting Change plan if premium channels aren't needed.
7. Choose 'Multi-Tenant' as the app type. 
8. Keep the creation type set to its default option, which is 'Create a new Microsoft App ID'.
   
9. Finally, navigate to the 'Review + Create' tab and click on 'Create.'
10. Once the bot resource is created, click on 'Go to the resource.'



3. Setting up the web application along with its service plan.
   
The Azure Bot we previously set up manages communication between the bot's logic and the client application (in this case, Microsoft Teams). However, we still need to host the bot’s core code somewhere. To do this, we will create a Web App resource in Azure.Web apps require an App Service Plan, which lets us choose the hardware and computational resources for our bot. The plan you select will directly impact both the bot's performance and the associated running costs.


1. After the bot resource is created, click on 'Go to the resource.'
2. In the search bar, type Web App and select it
   
   
   
3. Click on Create.
   
   
   
4. Subscription: Select your Azure subscription.
5. Resource Group: Choose an existing resource group or create a new one.
6. Name: Enter a unique name for your web app.
7. Publish: Choose Code if you are deploying code directly, or Docker Container if you are using a container.
8. Runtime Stack: Select the runtime stack (e.g., .NET, Node.js, Python, etc.).
9. Region: Choose the region closest to your users.
10. App Service Plan: Select an existing plan or create a new one.
11. Review all the configurations and click on Create. Azure will deploy your web app, which might take a few minutes.
    
    
    
4. Configuring the bot credentials and channels .
   
With the bot resource created, we can now proceed with the configurations. Start by recording the bot app ID and secret for future reference.


1. Navigate to the Configuration section in the bot resource settings.
2. Go to your Azure Bot > Configuration > Messaging endpoint: set to the URL that your App Service gave you + “api/messages”
   
   
   


3. Copy the Microsoft App ID to a place like Notepad, as you'll need to use it later in your bot code project.
   
   
   
   
   
4. Click on the 'Manage' link just above the field containing the GUID you copied. This will take you to the Azure AD app registration created alongside your bot resource.
5. You will land on the 'Certificates and Secrets' section. Generate a new client secret (valid for 24 months) and save its value in Notepad for future use.
6. Now that we have the authentication details, let's enable the bot to communicate with our client application. Although I am setting up a bot for Teams here, you can choose another platform as the bot channel in a similar manner.


• Return to the bot resource and navigate to the Channels section.
• Open the Channels section.
• Select Microsoft Teams (or another platform)


• Accept the terms of service if required.
• Use the default settings (Teams Commercial, calling off) or adjust them for your bot’s needs (e.g., GCC environment, calling enabled)
• Click Apply and Close.
  
  

---

Thank you for reading! We hope this guide helped with Azure configuration for your bot. Click here to read Part 2 and complete your bot setup!

If you have any questions you can reach out our SharePoint Consulting team here.