Build Microsoft Teams Bot Extension Using TypeScript

Discover how to create a powerful Microsoft Teams Bot Extension using TypeScript in this detailed article. From setting up your development environment to implementing bot functionality, this tutorial will walk you through every step needed to build a feature-rich extension that enhances communication and productivity within Microsoft Teams.

Prerequisites

Before we dive into the development process, ensure you have a basic understanding of React and its core concepts, as well as a fundamental of JavaScript and HTML.

You'll also require the following tools.

1. Node.js, supported versions: 18, 20
2. A Microsoft 365 account for the development
3. Set up your dev environment for extending Teams apps across Microsoft 365 Please note that after you enroll your developer tenant in Office 365 Target Release, it may take a couple of days for the enrollment to take effect.
4. Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or Teams Toolkit CLI

Step 1. Installing Teams Toolkit

First, open Visual Studio Code and create a new folder for your app. Then, navigate to the Extensions panel on the left side. In the search bar at the top, search for "Teams Toolkit" and select it from the search results. Alternatively, you can download the Teams Toolkit extension directly from this link. Once installed, you're ready to proceed with building your Teams Tab Extension.

Step 2. Create your App

To start, click on the Teams Toolkit tab in the left-side menu of Visual Studio Code. Then, click the "Create App" button. This will display a menu with several options for the types of apps you can create.

• Custom Copilot: Integrate AI-powered features into your app to assist users with tasks and provide intelligent recommendations.
• Bot: Create a chatbot that can interact with users through messages, providing automated responses and services.
• Tab: Develop a tabbed interface within Microsoft Teams to showcase custom content and tools, enhancing collaboration and productivity.
• Message Extension: Build extensions that allow users to interact with your app directly from the Teams message compose box, enhancing communication capabilities.
• Outlook Add-in: Develop an add-in for Outlook to extend its functionality with custom features and integrations.

For now, we will focus on creating a Bot. To proceed, simply click the "Bot" button.

• Basic Bot: A simple starter bot for handling messages and user interactions in Microsoft Teams, ideal for beginners to learn bot development.
• Chat Notification Bot: A bot that proactively sends notifications or alerts to users or teams in Microsoft Teams, useful for important updates or events.
• Chat Command Bot: A bot that responds to specific commands issued by users in Teams, perfect for automating tasks or providing information based on user input.
• Sequential Workflow in Chat: A bot that guides users through a series of steps or tasks in a defined order, suitable for workflows like surveys or onboarding.

To Proceed with Our Example

Select "Chat Command Bot". After that, choose "TypeScript" when prompted to select the language, and then select the folder where you want the project to be created.

After selecting "Chat Command Bot" and choosing "TypeScript" as the language, you will be prompted to choose a folder where your project will be created. Navigate to your desired directory and select it. Then, provide a name for your application.

Now your extension is ready to run.

Step 3. Run our team extension

To verify that a Microsoft 365 account for development is added, follow these steps.

1. Open Visual Studio Code: Ensure your project is open in VS Code.
2. Navigate to Teams Toolkit: Click on the Teams Toolkit tab in the left sidebar.
3. Check Account: Verify that your Microsoft 365 account is listed under the "Accounts" section.

Here's an example image for reference.

Select your debugging environment—Chrome, Edge, or the Microsoft Teams desktop app. Since you are using Chrome, the app will run by default with Chrome as the debugging tool for testing purposes.

If your account is not listed, you will need to sign in with your Microsoft 365 developer account. To do this, click the "Sign In" button and follow the prompts.

After that, press the F5 button to run your app. This will provision and deploy your local app to the developer portal. You can check the developer portal at Microsoft Teams Developer Portal.

The provisioning and deployment process may take 1 or 2 minutes.

Once everything is set up, check your local environment as shown in the image below.

This will confirm that your Teams app is running successfully in your local development environment.

Once completed, your app will prompt you to log in to your Teams account.

Once you sign in with your Microsoft 365 account credentials, your app will run in Teams. Simply click the "Add" button to add your extension to your Teams bot app. Refer to the image below for guidance.

After adding the app, it will send a welcome message to the group.

Next, you can trigger your bot by mentioning it using @Xmonkeys-Botlocal, as shown in the image below for your reference.

After that, type Xmonkeys-Botlocal help, and the bot will return a help message based on how you've configured it in your code.

Step 4. Deploy your extension

Once your development work is complete, you can proceed to deploy your app. Follow these steps.

1. Click the "Provision" button to provision your app.
2. Select the environment where you want to deploy your app.
3. Choose the account that has Azure credits for deployment.
4. After the provisioning is completed, click the "Deploy" button.
5. Select the environment again for deployment.

This process will deploy your app to the specified environment.

After completing the deployment process, navigate to the Microsoft Teams Developer Portal. Click on your app to access its features and information. At the bottom, under the "Deploy" section, you'll find three options.

1. App Package: Download your app package from this option.
2. Publish Your App to Your Organization: Select this option to publish your app within your organization.
3. Publish to Teams Marketplace: Choose this option to publish your app to the Teams Marketplace for wider distribution.

Select the appropriate option based on your deployment needs and follow the prompts to deploy your app accordingly.

Conclusion

This article has provided a detailed guide to creating a Microsoft Teams Bot using the Teams Toolkit. By following the step-by-step instructions outlined here, developers can easily set up their development environment, create a new bot, and deploy it to Teams. Using the Teams Toolkit, you can build bots that automate tasks, enhance communication, and improve workflows within Teams. Whether you're a seasoned developer or just getting started, this tutorial gives you the knowledge and tools to create and deploy custom Teams Bots with ease. Happy coding, and may your Teams bots bring value and efficiency to users across your organization!

If you have any questions or need further clarification, please feel free to reach out in the comments section below. I'm here to help!