Skip to content

create-new-project.md

Latest commit

 

History

History
153 lines (106 loc) · 8.43 KB

create-new-project.md

File metadata and controls

153 lines (106 loc) · 8.43 KB
title Create New Teams App in Agents Toolkit
author zyxiaoyuer
description Learn how to create basic and scenario-based Teams app in VSC, its directory structure, and Teams app template available in Microsoft 365 Agents Toolkit.
ms.localizationpriority high
ms.topic overview
ms.date 03/14/2022

Create a new Teams app

Learn how to create Microsoft Teams apps using Visual Studio Code and the Microsoft 365 Agents Toolkit. This guide walks you through the process of building a basic Teams app, exploring their directory structures, and leveraging available templates. Whether you're starting with a simple "Hello World" app, building apps to automate tasks, or extending Teams capabilities across Microsoft 365, this article provides instructions to help you get started.

[!div class="nextstepaction"] Learn to build agents

You can create the following types of Teams app:

App Types Definition
Basic Teams apps Basic Teams apps include Teams tab, bot, or message extension apps that you can create and customize based on your requirement.
Office Add-ins This group of add-ins can be installed and run on Outlook and Office.com.

Create a new Teams app using Visual Studio Code

The process to create a new Teams app is similar for all types of apps. To create a basic Teams app:

  1. Open Visual Studio Code.

  2. Select the Microsoft 365 Agents Toolkit > Create a New Agent/App > select Teams Agents and Apps.

    :::image type="content" source="../assets/images/toolkit-v2/first-tab/toolkit-activity-bar.png" alt-text="Screenshot shows the option to create a new agent or app in the Agents Toolkit sidebar.":::

  3. Select Other Teams Capabilities.

    :::image type="content" source="../assets/images/toolkit-v2/first-tab/other-teams-capabilities.png" alt-text="Screenshot shows the option to select the other Teams Capabilities.":::

  4. In this example, select Tab as app capability.

    :::image type="content" source="../assets/images/toolkit-v2/first-tab/select-capabilities-tabapp.png" alt-text="Screenshot shows the option to select the App Capability that you want to build.":::

  5. Select Default folder to store your project root folder in the default location.

    :::image type="content" source="../assets/images/toolkit-v2/first-tab/select-default-location.png" alt-text="Screenshot shows the option to select the default location for the project workspace.":::

    To change the default location, follow these steps:

    1. Select Browse.

    2. Select the location for project workspace.

      The folder you select is the location for your project workspace.

  6. Enter a suitable name, such as helloworld, as the application name. Ensure that you use only alphanumeric characters. Press Enter.

    :::image type="content" source="../assets/images/toolkit-v2/first-tab/enter-name-tab1.png" alt-text="Screenshot shows the field to enter the app name.":::

    The Teams tab app workspace is created in a few seconds.

    :::image type="content" source="../assets/images/toolkit-v2/first-tab/tab-app-created.png" alt-text="Screenshot shows that the project workspace is created." lightbox="../assets/images/toolkit-v2/first-tab/tab-app-created.png":::

[!div class="nextstepaction"] I ran into an issue

Directory structure for different app types

Agents Toolkit provides all components for building an app. After creating the project workspace, you can view the project folders and files under EXPLORER section.


Directory structure for basic Teams app

The following example shows a basic Teams tab app directory structure:

Folder name Contents
.vscode Settings for VS Code to build and debug your Teams app.
appPackage App manifest (previously called Teams app manifest) file and icon files that Teams used to recognize your Teams app.
env Stores different environment parameters.
infra Azure bicep template files. Used for deploy your Teams app to Azure.
src Source code for the Tab capability, including your front-end app, UI components and the privacy notice, terms of use,
src/app.js Application entry point and express handlers for website.
src/views/hello.html An HTML template that is bind to the tab endpoint.
src/static The web server can serve static assets such as CSS and JavaScript files.
m365agents.yml This configuration file defines the Agents Toolkit behavior for provision, deploy, and publish lifecycle. You can customize this file to change the behavior of Agents Toolkit in each lifecycle.
m365agents.local.yml This overrides m365agents.yml with actions that enable local execution and debugging.

[!NOTE] If you have a bot or message extension app, relevant folders are added to the directory structure.

To learn more about the directory structure of different types of basic Teams apps, see the following table:

App Type Links
For tab app Build your first tab app using JavaScript
For bot app Build your first bot app using JavaScript
For message extension app Build your first message extension app using JavaScript

For trying out more step-by-step guides on building apps, see Tutorials.

See also