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
- 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
- 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
- Copy your
<OpenAIKey>in the config.ts file under the project. - From Visual Studio Code: Start debugging the project by hitting the
F5key in Visual Studio Code. - Alternatively use the
Run and Debug Activity Panelin Visual Studio Code and click theRun and Debuggreen arrow button. - From TeamsFx CLI:
- Executing the command
teamsfx provision --env localin your project directory. - Executing the command
teamsfx deploy --env localin your project directory. - Executing the command
teamsfx preview --env localin your project directory.
- Executing the command
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_IDto 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.
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 your project to Azure by following these steps:
| From Visual Studio Code | From TeamsFx CLI |
|---|---|
|
|
Note: Provisioning and deployment may incur charges to your Azure Subscription.
Once the provisioning and deployment steps are finished, you can preview your app:
-
From Visual Studio Code
- Open the
Run and Debug Activity Panel. - Select
Launch Remote (Edge)orLaunch Remote (Chrome)from the launch configuration drop-down. - Press the Play (green arrow) button to launch your app - now running remotely from Azure.
- Open the
-
From TeamsFx CLI: execute
teamsfx preview --env devin your project directory to launch your application.
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 validatein your project directory.
- From Visual Studio Code: open the Teams Toolkit and click
Zip Teams app packageor open the command palette and selectTeams: Zip Teams app package. - Alternatively, from the command line run
teamsfx packagein the project directory.
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 Teamsor open the command palette and select:Teams: Publish to Teams. - From TeamsFx CLI: run command
teamsfx publishin your project directory.