Bringing natural language to the world of the Graph

"Dammit, why can't I just see my last ten emails" Just imagine if you could shout that at your phone and have it reply with those emails. But not just that, what if it could also find that file that had that thingy about the last project that you worked on. That's the power of Azure Open AI, brought to you with the Teams AI library.

This is a Bot built using the Teams Toolkit with the Teams AI library and utilising Azure Open AI to provide that backend sparkle. To be honest, the really exciting thing in this project is the use of the OAuth to connect to the Graph with Teams AI. That is what should get you excited as that can happen with all sorts of APIs.

Prerequisites

• Node.js, supported versions: 16, 18
• An M365 account. If you do not have M365 account, apply one from M365 developer program
• Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or TeamsFx CLI
• An Azure OpenAI license key - see https://azure.microsoft.com/en-us/products/cognitive-services/openai-service/ and https://learn.microsoft.com/en-us/azure/cognitive-services/openai/how-to/chatgpt?pivots=programming-language-chat-completions.

Setting up OAuth

My hope is to automate this more as I try out more things but for right now, there are still some manual steps needed. The first is to set up a new App Registration as per the instructions at https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/tab-sso-register-aad#to-register-a-new-app-in-azure-ad. This app registration should be set up with the delegated Graph API calls that are used in the Bot, currently Mail.Read and Sites.Read.All.

Once set up, debug the project as per the instructions below - however, it won't work yet. This will set up items including registering a Bot at https://dev.botframework.com. Unfortunately, there is no way to set up the OAuth in this so you need to find the registered bot and migrate it to Azure. Once there, you can configure the OAuth settings for the previously set up App Registration, following the guidance at https://learn.microsoft.com/en-us/microsoftteams/platform/bots/how-to/authentication/bot-sso-register-aad?tabs=windows#to-configure-application-id-uri-for-your-app.

Debug

• From Visual Studio Code: Start debugging the project by hitting the F5 key in Visual Studio Code.
• Alternatively use the Run and Debug Activity Panel in Visual Studio Code and click the Run and Debug green arrow button.
• From TeamsFx CLI:
  • Install ngrok and start your local tunnel service by running the command ngrok http 3978.
  • In the env/.env.local file, fill in the values for BOT_DOMAIN and BOT_ENDPOINT with your ngrok URL.

    BOT_DOMAIN=sample-id.ngrok.io
    BOT_ENDPOINT=https://sample-id.ngrok.io
    

  • Executing the command teamsfx provision --env local in your project directory.
  • Executing the command teamsfx deploy --env local in your project directory.
  • Executing the command teamsfx preview --env local in your project directory.

Edit the manifest

You can find the Teams app manifest in ./appPackage folder. The folder contains one manifest file:

• manifest.json: Manifest file for Teams app running locally or running remotely (After deployed to Azure).

This file contains template arguments with ${{...}} statements which will be replaced at build time. You may add any extra properties or permissions you require to this file. See the schema reference for more information.

Deploy to Azure

Deploy your project to Azure by following these steps:

From Visual Studio Code	From TeamsFx CLI
Open Teams Toolkit, and sign into Azure by clicking the Sign in to Azure under the ACCOUNTS section from sidebar. After you signed in, select a subscription under your account. Open the Teams Toolkit and click Provision from DEPLOYMENT section or open the command palette and select: Teams: Provision. Open the Teams Toolkit and click Deploy or open the command palette and select: Teams: Deploy.	Run command teamsfx account login azure. Run command teamsfx provision --env dev. Run command: teamsfx deploy --env dev.

Note: Provisioning and deployment may incur charges to your Azure Subscription.

Preview

Once the provisioning and deployment steps are finished, you can preview your app:

• From Visual Studio Code

  1. Open the Run and Debug Activity Panel.
  2. Select Launch Remote (Edge) or Launch Remote (Chrome) from the launch configuration drop-down.
  3. Press the Play (green arrow) button to launch your app - now running remotely from Azure.

• From TeamsFx CLI: execute teamsfx preview --env dev in your project directory to launch your application.

Validate manifest file

To check that your manifest file is valid:

• From Visual Studio Code: open the command palette and select: Teams: Validate Application.
• From TeamsFx CLI: run command teamsfx validate in your project directory.

Package

• From Visual Studio Code: open the Teams Toolkit and click Zip Teams App Package or open the command palette and select Teams: Zip Teams App Package.
• Alternatively, from the command line run teamsfx package in the project directory.

Publish to Teams

Once deployed, you may want to distribute your application to your organization's internal app store in Teams. Your app will be submitted for admin approval.

• From Visual Studio Code: open the Teams Toolkit and click Publish or open the command palette and select: Teams: Publish.
• From TeamsFx CLI: run command teamsfx publish in your project directory.

Further reading

Bot

• Bot Basics
• Bot Framework Documentation
• Azure Bot Service Introduction