Add capabilities of Teams Toolkit to Microsoft Teams app
Important
We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app.
Teams Toolkit v4 extension will soon be deprecated.
This article is applicable only to Teams Toolkit version 4.
Adding capabilities with Teams Toolkit allows you to extend the functionality of your existing Microsoft Teams app. The advantage of adding more capabilities is that you can add more functions to your app by using Teams Toolkit to automatically add necessary code and project files. You can select different capabilities based on the app project you've created for your Teams app. The following table lists the Teams app capabilities:
| Capability | Description | Other supported capabilities |
|---|---|---|
| Basic Teams app | ||
| Tab | Basic tabs are simple HTML tags that refer to domains declared in the app manifest. You can add tabs as a part of channel inside a team, group chat, or personal app for an individual user. | Basic tab, notification bot, command bot, basic bot, and basic message extension |
| Bot | Bots help to interact with your web service through text, interactive cards, and task modules. | Basic message extension, SSO-enabled tab, and basic tab |
| Message extension | Message extensions help to interact with your web service through buttons and forms in the Microsoft Teams client. | Basic bot, SSO-enabled tab, and basic tab |
| Scenario-based Teams app | ||
| Notification bot | Notification bot proactively sends messages in Teams channel or group chat, or personal chat. You can trigger the notification bot with an HTTP request, such as cards or texts. | SSO-enabled tab and basic tab |
| Command bot | Command bot allows you to automate repetitive tasks using a command bot. It responds to simple commands sent in chats with the Adaptive Cards. | SSO-enabled tab and basic tab |
| Workflow bot | Workflow bot allows users to interact with an Adaptive Card enabled by the Adaptive Card action handler in the workflow bot app. | SSO-enabled tab and basic tab |
| SPFx tab | Microsoft 365 hosts the SPFx tab apps and supports developing and hosting your client-side SharePoint Framework (SPFx) solution. | None |
| SSO-enabled tab | You can build SSO-enabled tab app that allows the user access to your app with single sign-on (SSO). | SSO-enabled tab, notification bot, command bot, basic bot, and basic message extension |
Note
You can add tabs up to 16 instances. You can add one bot and one message extension to each instance at a time.
Add capabilities
You can add capabilities in the following ways:
Use Teams Toolkit pane
Open your app project in Visual Studio Code.
Select Teams Toolkit from the Visual Studio Code activity bar.
Select Add features in the DEVELOPMENT section.
From the dropdown list that appears, select the capability you want to add to your app.
Teams Toolkit adds the selected capability to your app and updates the app directory structure for the new capability. After successfully adding the capability to your Teams app, you need to provision for each environment.
Use the Command Palette
Open your app project in Visual Studio Code.
Select View > Command Palette... or Ctrl+Shift+P.
Select Teams: Add features.
From the dropdown list that appears, select the capability you want to add to your app.
Teams Toolkit adds the selected capability to your app and updates the app directory structure for the new capability. After successfully adding the capability to your Teams app, you need to provision for each environment.
Use TeamsFx CLI
You can use TeamsFx CLI as an alternative way for adding capabilities to your Teams app project.
This section lists the capabilities you can add to your Teams app using TeamsFx CLI commands. Before you add capabilities to your app, ensure that you’ve changed the directory to your project directory.
The following table lists the capabilities and the TeamsFx CLI commands for adding them:
| Capability and Scenario | Command |
|---|---|
| To add notification bot | teamsfx add notification |
| To add command bot | teamsfx add command-and-response |
| To add SSO-enabled tab | teamsfx add sso-tab |
| To add tab | teamsfx add tab |
| To add bot | teamsfx add bot |
| To add message extension | teamsfx add message extension |
Changes after adding capabilities
The following table shows the changes that you can see in the files of your app after adding capabilities:
| Add capability | Description | Changes |
|---|---|---|
| Basic bot, basic message extension, and basic tab | Includes a basic bot or basic tab app template into your project. | Teams Toolkit adds a front-end bot or tab template code into a subfolder with path yourProjectFolder\bot or yourProjectFolder\tab, respectively. |
| Basic bot, message extension, and basic tab | Includes necessary scripts for Visual Studio Code and is executed when you want to debug your app locally. | Teams Toolkit updates the launch.json and task.json files under the .vscode folder. |
| Basic bot and basic message extension | Updates the manifest file for a basic bot or basic tab app. This information represents your app in the Teams Platform. | Teams Toolkit updates the file manifest.template.json under templates\appPackage folder. The manifest file includes tab-related information that represents your app in the Teams Platform. The changes are visible in the ID of your bot, the scopes of your bot, and the commands that your bot or tab app can respond to. |
| Basic tab | Includes information in the manifest file for a basic bot or basic tab. This information represents your app in the Teams Platform. | Teams Toolkit updates manifest.template.json under templates\appPackage folder. The manifest file includes tab-related information that represents your app in the Teams Platform. The changes are visible in the configurable and static tabs and scopes of the tabs. |
| Basic bot, basic message extension, and basic tab | Includes information in TeamsFx for a basic bot or tab app. It also includes provision files that are for integrating Azure Functions. | Files under templates\azure\teamsfx are updated and templates\azure\provision\xxx.bicep files are regenerated. |
| Basic bot, basic message extension, and basic tab | Ensures that you've set up your project with the right configuration for the newly added capability. | Teams Toolkit regenerates the files under .fx\config. |
Step-by-step guides
Follow the step-by-step guide to build command bot in Teams.
Follow the step-by-step guide to build notification bot in Teams.
Follow the step-by-step guide to build workflow bot in Teams.
See also
Feedback
Submit and view feedback for