Message Extension app with Teams AI SDK and Teams Toolkit for Visual Studio Code v5

A Message Extension allows users to interact with your web service while composing messages in the Microsoft Teams client. Users can invoke your web service to assist message composition, from the message compose box, or from the search bar.

Message Extensions are implemented on top of the Bot support architecture within Teams.

This message extension action command capability is built using Teams Toolkit for Visual Studio Code v5 with the integration of Teams AI SDK and Microsoft Graph.

me-demo-ttk-ai.mp4

Code Structure

• Back-end code can be found in index.ts
• Adaptive cards can be found in cards folder
• Configuration settings can be found in config.ts
• Teams AI SDK prompts can be found in ./prompts folder

Prerequisites

• Node.js, supported versions: 14, 16, 18
• An M365 account. If you do not have M365 account, apply one from M365 developer program
• Teams Toolkit Visual Studio Code Extension pre-release v5 version after 5.0.0 pre-release or TeamsFx CLI

Debug

• Copy your <OpenAIKey> in the config.ts file under the project.
• 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:
  • 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.

Note for people picker feature

To test the people picker feature of this app, select dev > .env.local and copy AAD_APP_CLIENT_ID.

Visit Azure Portal and select Azure Active Directory.

In App registrations, paste AAD_APP_CLIENT_ID to find your project.

Select API permissions > Add a permission > Microsoft Graph > Application permissions, and add User.Read.All.

Select Grant admin consent for your organization.

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 in the cloud from DEPLOYMENT section or open the command palette and select: Teams: Provision in the cloud. Open the Teams Toolkit and click Deploy to the cloud or open the command palette and select: Teams: Deploy to the cloud.

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 manifest file.
• 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 to Teams or open the command palette and select: Teams: Publish to Teams.
• From TeamsFx CLI: run command teamsfx publish in your project directory.

Further reading

Message Extension

• Search Command
• Action Command
• Link Unfurling