Updates from: 05/24/2023 01:54:40
Service Microsoft Docs article Related commit history on GitHub Change details
platform Designing Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/design/designing-apps-in-meetings.md
Users can add a meeting extension before and during meetings. They can also add
In the meeting details, users can select **Add a tab +** to open the app flyout and find apps optimized for meetings. ### Add during a meeting
Once app is added (for example, on desktop), users can access the app in a meeti
In a meeting, users can select **More** :::image type="icon" source="../../assets/icons/teams-client-more.png"::: > **Add an app** and select the app they want. ## Before a meeting Prior to a meeting, your app's available to users in a tab. The following example shows a draft survey question that people will answer during the meeting. ### Anatomy: Meeting tab (before and after meetings) |Counter|Description| |-|--|
People might use the in-meeting tab to:
#### Desktop ### Anatomy: In-meeting tab |Counter|Description| |-|--|
In-meeting dialogs are triggered by a user (such as the meeting organizer) who m
### Desktop ### Anatomy: In-meeting dialog
In-meeting dialogs are triggered by a user (such as the meeting organizer) who m
### Anatomy: In-meeting dialog header There are two header variants. When possible, use the variant with the avatar to reinforce that the dialog is coming from a person.
In-meeting dialogs can vary in size to account for different scenarios. Make sur
* **Width**: You can specify the width of the dialog's iframe anywhere within the supported size range. * **Height**: You can specify the height of the dialog's iframe anywhere within the supported size range. You also can allow users to scroll vertically if your app content exceeds the maximum height. ## Use the shared meeting stage
The shared meeting stage is all about collaboration and participation. Here are
:::column-end::: :::column span="3"::: :::column-end::: :::row-end:::
The shared meeting stage is all about collaboration and participation. Here are
:::column-end::: :::column span="3"::: :::column-end::: :::row-end:::
The shared meeting stage is all about collaboration and participation. Here are
:::column-end::: :::column span="3"::: :::column-end::: :::row-end::: ### Anatomy: Share all app content to a meeting |Counter|Description| |-|--|
The shared meeting stage is all about collaboration and participation. Here are
### Anatomy: Share specific app content to a meeting |Counter|Description| |-|--|
When the side panel is open, the meeting stage is 918x540 pixels by default and
You can go back to a meeting after it ends and view app content. In this example, the meeting organizer can look at poll results in the **Contoso** tab. (Note: From a design standpoint, there's no difference between the pre- and post-meeting tab experience.) ## Best practices
platform Bots https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/design/bots.md
Users can add a bot one of the following ways:
* Using the app flyout by selecting the **More** icon on the left side of Teams. * With an @mention in the new chat or compose box (the following example shows how you can do this in a group chat).
- :::image type="content" source="../../assets/images/bots/add-bot-chat-at-mention.png" alt-text="Example shows how to add a bot in a group chat using an @mention.":::
+ :::image type="content" source="../../assets/images/bots/add-bot-chat-at-mention.png" alt-text="Example shows how to add a bot in a group chat using an @mention." lightbox="../../assets/images/bots/add-bot-chat-at-mention.png":::
## Introduce a bot
In personal contexts, welcome messages set your bot's tone. The message includes
#### Desktop ### Welcome message in channels and group chats
Your bot's introduction should be slightly different in channels and group chats
#### Desktop ### Bot authentication with single sign-on
DonΓÇÖt forget: In the bot command menu (**What can I do?**), you must also prov
#### Desktop ### Tours
In a personal app, a carousel can provide an effective overview of your bot and
#### Desktop ### Channels and group chats
In channels and group chats, a tour should open in a modal (also known as a [tas
#### Desktop ## Chat with a bot
You can use bots in the following contexts:
#### Desktop |Counter|Description| |-|--|
The list of commands should be brief. The menu is only meant to highlight your b
The command menu must always be available regardless of the state of the conversation. ## Understand what people are saying
Bots can deliver an exact match to a query or a group of related matches to help
#### Desktop ### Multi-turn interactions
In the following examples, the bot responds to each message with options for wha
#### Desktop ### Reach out to users
Now in that channel, the user can read their message from the bot.
In the following example, the user gets a toast notification that a bot messaged them in another channel. Now in that channel, the user can read their message from the bot. ### Use tabs with bots
In personal apps, a tab can complement what your bot can do. For example, if you
#### Desktop ## Manage a bot Users should be able to change a bot's settings. You can provide this functionality with bot commands, but it's usually more efficient to include all settings in a [task module](../../task-modules-and-cards/task-modules/design-teams-task-modules.md) (as shown in the following example). ## Best practices
platform Conversation Ai Quick Start https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/Teams conversational AI/conversation-ai-quick-start.md
+
+ Title: Teams AI library quick start guide
+
+description: In this module, learn how to quickly try the Teams AI library.
+
+ms.localizationpriority: high
+ Last updated : 04/07/2022++
+# Teams AI library quick start guide
+
+> [!NOTE]
+>
+> Teams AI library is available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).
+
+Get started with Teams AI library using the **ChefBot** sample. It's designed to quickly run a Teams AI library based sample on your computer's localhost.
+
+## Set up your development environment
+
+To get started, ensure that you have the following tools:
+
+* Microsoft Teams
+* [Teams Toolkit](../../../toolkit/install-Teams-Toolkit.md)
+* [NodeJS](https://nodejs.org/en/)
+* [OpenAI](https://openai.com/api/) key
+* Global Administrator access to a [Microsoft 365 tenant](https://developer.microsoft.com/microsoft-365/dev-program?ocid=MSlearn&WT.mc_id=m365-16105-cxa) and [Enable custom Teams apps and turn on custom app uploading](../../../concepts/build-and-test/prepare-your-o365-tenant.md#enable-custom-teams-apps-and-turn-on-custom-app-uploading)
+
+## Build and run the sample app
+
+1. Go to the [sample](https://github.com/microsoft/teams-ai/tree/main/js/samples).
+
+1. Clone the repository to test the sample app.
+
+ ```bash
+ git clone https://github.com/microsoft/teams-ai.git
+ ```
+
+1. Run the following command to go to the app folder:
+
+ ```bash
+ cd samples/js/samples/04.ai.a.teamsChefBot
+ ```
+
+1. Update the **SECRET_OPENAI_API_KEY** in the `.env.local.user` configuration file.
+
+ ```text
+ SECRET_OPENAI_API_KEY=<your OpenAI key>
+ ```
+
+ > [!NOTE]
+ > If youΓÇÖre cloning the [ChefBot sample](https://github.com/microsoft/teams-ai/tree/main/js/samples) through Teams Toolkit, youΓÇÖll find the `.env.local.user` file in the setup that is created automatically. If you can't find the file, create the `.env.local.user` file and update the OpenAI key to get started.
+
+1. Go to **Visual Studio Code**.
+
+1. Select **Open a folder**, browse to the folder where ChefBot is available and then select **Select folder**.
+
+1. From the left pane, select **Teams Toolkit**.
+
+1. Under **ACCOUNTS**, sign in to the following:
+ * **Microsoft 365 account**
+ * **Azure account**
+
+1. To debug your app, enter **F5**.
+
+ A browser tab opens a Teams web client requesting to add the bot to your tenant.
+
+1. Select **Add**.
+
+ :::image type="content" source="../../../assets/images/bots/Conversation-AI-sample-app-add.png" alt-text="Screenshot shows the add option in Teams web client.":::
+
+ A chat window opens.
+
+1. In the message compose area, @mention **TeamsChef-local** to invoke the bot and chat in a plain language.
+
+ :::image type="content" source="../../../assets/images/bots/conversation-AI-quick-start-final.png" alt-text="Screenshot shows an example of conversation with Teams chef bot in Teams.":::
+
+ The bot uses the text-davinci-003 model to chat with Teams users and respond in a polite and respectful manner, staying within the scope of the conversation.
+
+> [!NOTE]
+> If you're building a bot for the first time, it's recommended to use Teams Toolkit extension for Visual Studio code to build a bot, see [Build your first bot app using JavaScript](../../../sbs-gs-bot.yml).
+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Build your first bot using Teams AI library](../../../sbs-botbuilder-conversation-AI.yml)
platform Coversational Ai Faq https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/Teams conversational AI/coversational-ai-faq.md
+
+ Title: Teams AI library FAQs
+
+description: In this module, learn more about Teams AI library Frequently Asked Questions.
+
+ms.localizationpriority: high
+ Last updated : 04/07/2022++
+# Teams AI library FAQ
+
+> [!NOTE]
+>
+> Teams AI library is available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).
+
+<br>
+<details>
+<summary>What does the Teams AI library do?</summary>
+
+Teams AI library provides abstractions for developers to build robust applications that utilize OpenAI large language model (LLM)s.
+
+</details>
+<br>
+
+<details>
+<summary>Does Microsoft provide a hosted version of OpenAI models that are used by the AI library?</summary>
+
+No, you need to have your large language model (LLM)s, hosted in Azure OpenAI or elsewhere.
+
+</details>
+<br>
+
+<details>
+<summary>Can we use the AI library with other large language models apart from OpenAI?</summary>
+
+Yes, it's possible to use Teams AI library with other large language model (LLM)s.
+
+</details>
+<br>
+
+<details>
+<summary>Does a developer need to do anything to benefit from LLMs? If yes, why?</summary>
+
+Yes, Teams AI library provides abstractions to simplify utilization of large language model (LLM)s in conversational applications. However, you (developer) must tweak the prompts, topic filters, and actions depending upon your scenarios.
+
+</details>
+<br>
+
+<details>
+<summary> How does Teams AI library integrate with ODSL? </summary>
+
+The two are independent and can't be integrated.
+
+</details>
+<br>
+
+<details>
+<summary> How does Teams AI library co-exist against the hero-story of developers building for the Skills ecosystem in Microsoft 365?</summary>
+
+Teams AI library story is targeted towards Pro-developers and separate from the hero-story around skills ecosystem in Microsoft 365.
+
+</details>
+<br>
+
+<details>
+<summary> What is the release status of Teams AI library at Build 2023?</summary>
+
+Teams AI library is available in public preview at Build 2023.
+
+</details>
+<br>
+
+<details>
+<summary> How should information about the existing Bot Framework SDK be communicated after announcing a new version? </summary>
+
+Teams AI library works alongside the existing Bot Framework SDK and isn't a replacement.
+
+</details>
+
+## See also
+
+[Teams AI library](teams-conversation-ai-overview.md)
platform How Conversation Ai Core Capabilities https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/Teams conversational AI/how-conversation-ai-core-capabilities.md
+
+ Title: Teams AI library capabilities
+description: In this article, learn more about Teams AI library capabilities, bot logic and message extension query.
+ms.localizationpriority: medium
++++
+# Teams AI library capabilities
+
+> [!NOTE]
+>
+> Teams AI library is available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).
+
+Teams AI library supports JavaScript and is designed to simplify the process of building bots that can interact with Microsoft Teams, and facilitates the migration of existing bots. The AI library supports the migration of messaging capabilities, Message extension (ME) capabilities, and Adaptive Cards capabilities to the new format. It's also possible to upgrade existing Teams apps with these features.
+
+Earlier, you were using BotBuilder SDK directly to create bots for Microsoft Teams. Teams AI library is designed to facilitate the construction of bots that can interact with Microsoft Teams. While one of the key features of Teams AI library is the AI support that customers can utilize, the initial objective might be to upgrade their current bot without AI. After you upgrade, the bot can connect to AI or large language model (LLM) available in the AI library.
+
+Teams AI library supports the following capabilities:
+
+* [Send or receive message](#send-or-receive-message)
+
+* [Message extension (ME) capabilities](#message-extensions)
+
+* [Adaptive Cards capabilities](#adaptive-cards-capabilities)
+
+ You need to use the AI library to scaffold bot and Adaptive Card handlers to the source file.
+
+In the following section, we'll explain each capability and their path to migration. We'll be using the samples from the [AI library](https://github.com/microsoft/teams-ai/tree/main) to explain the migration method:
+
+## Send or receive message
+
+Replace `BotActivityHandler` and `ApplicationTurnState` with this `Application` and `DefaultTurnState`. `DefaultTurnState` is constructed to include `ConversationState`.
+
+Example: [EchoBot](https://github.com/microsoft/teams-ai/tree/main/js/samples/01.messaging.a.echoBot)
+
+```javascript
+
+// Assumption is that the bot/app is named ΓÇ£appΓÇ¥ or ΓÇ£botΓÇ¥
+ import { Application, DefaultTurnState } from "botbuilder-m365";
+
+interface ConversationState {
+
+ count: number;
+
+}
+
+// DefaultTurnState: Conversation State, UserState, TurnState (or TempState)
+
+type ApplicationTurnState = DefaultTurnState<ConversationState>;
+
+// Previous:
+
+// const bot = BotActivityHandler();
+
+const app =
+
+ new Application() <
+
+ ApplicationTurnState >
+
+ {
+
+ storage
+
+ };
+
+```
+
+## Message extensions
+
+In the previous Teams SDK format, you needed to set up the Message extensions query handler like:
+
+Now, the app class has `messageExtensions` features to simply creating the handlers:
+
+* `context`: TurnContext
+* `state`: DefaultTurnState
+* `query`: The data passed from message extension interaction
+
+Example: [Message extension search command](https://github.com/microsoft/teams-ai/tree/main/js/samples/02.messageExtensions.a.searchCommand)
+
+```javascript
+// Imported from earlier example
+
+import { MessagingExtensionAttachment } from "botbuilder";
+
+import { Application } from "botbuilder-m365";
+
+// ME query Listener
+
+app.messageExtensions.query("searchCmd", async (context, state, query) => {
+
+ const searchQuery = query.parameters.queryText;
+
+ // Other handling
+
+ // For examples, Create search / action cards
+
+ // Return results
+
+ return {
+
+ attachmentLayout: "",
+
+ attachments: results,
+
+ type: "result"
+
+ };
+
+});
+
+Similarly, selectItem listener would be set up as:
+
+app.messageExtensions.selectItem(async (context, state, item) => {
+
+ // Other handling
+
+ // For example, Create search / action cards
+
+ // item is the card/item the user selected
+
+ return {
+
+ //...
+
+ }
+
+}
+```
+
+## Adaptive Cards capabilities
+
+The `app.AdaptiveCards` handler is the handler for producing Adaptive Cards.
+
+[Code sample](https://github.com/microsoft/teams-ai/tree/main/js/samples/03.adaptiveCards.a.typeAheadBot)
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/03.adaptiveCards.a.typeAheadBot/src/index.ts#L92)
+
+```javascript
+
+// Listen for messages that trigger returning an adaptive card
+app.message(/dynamic/i, async (context, _state) => {
+ const attachment = createDynamicSearchCard();
+ await context.sendActivity({ attachments: [attachment] });
+});
+
+app.message(/static/i, async (context, _state) => {
+ const attachment = createStaticSearchCard();
+ await context.sendActivity({ attachments: [attachment] });
+});
+
+// Listener for action.submit on cards from the user
+
+interface SubmitData {
+ choiceSelect?: string;
+}
+
+// Listen for submit buttons
+app.adaptiveCards.actionSubmit('DynamicSubmit', async (context, _state, data: SubmitData) => {
+ await context.sendActivity(`Dynamically selected option is: ${data.choiceSelect}`);
+});
+
+app.adaptiveCards.actionSubmit('StaticSubmit', async (context, _state, data: SubmitData) => {
+ await context.sendActivity(`Statically selected option is: ${data.choiceSelect}`);
+});
+```
+
+## Core capabilities
+
+## Bot logic for handling an action
+
+ The Bot responds to the user's input with the action `lights on` to turn the lights on.
+
+The following example illustrates how Teams AI library makes it possible to manage the bot logic for handling an action `LightsOn` or `LightsOff` and connect it to the prompt used with OpenAI:
+
+Example: [Light bot](https://github.com/microsoft/teams-ai/tree/main/js/samples/04.ai.c.actionMapping.lightBot)
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.c.actionMapping.lightBot/src/index.ts#L80)
+
+```typescript
+
+// Create AI components
+const planner = new OpenAIPlanner<ApplicationTurnState>({
+ apiKey: process.env.OpenAIKey,
+ defaultModel: 'gpt-3.5-turbo',
+ logRequests: true
+});
+const promptManager = new DefaultPromptManager<ApplicationTurnState>(path.join(__dirname, '../src/prompts'));
++
+// Define storage and application
+const storage = new MemoryStorage();
+const app = new Application<ApplicationTurnState>({
+ storage,
+ planner
+});
++
+// Register action handlers
+app.ai.action('LightsOn', async (context, state) => {
+ state.conversation.value.lightsOn = true;
+ await context.sendActivity(`[lights on]`);
+ return true;
+});
++
+app.ai.action('LightsOff', async (context, state) => {
+ state.conversation.value.lightsOn = false;
+ await context.sendActivity(`[lights off]`);
+ return true;
+});
++
+app.ai.action('Pause', async (context, state, data) => {
+ const time = data.time ? parseInt(data.time) : 1000;
+ await context.sendActivity(`[pausing for ${time / 1000} seconds]`);
+ await new Promise((resolve) => setTimeout(resolve, time));
+ return true;
+});
++
+app.ai.action('LightStatus', async (context, state) => {
+ // Send the user a static response with the status of the lights.
+ const response = responses.lightStatus(state.conversation.value.lightsOn);
+ await context.sendActivity(response);
++
+ // Since we might be prompting the user with a followup question, we need to do
+ // some surgery on the {{conversation.history}} to append a THEN SAY command. This
+ // lets the model know we just asked the user a question and it can predict the
+ // next action based on their response.
+ ConversationHistory.appendToLastLine(state, ` THEN SAY ${response}`);
++
+ // End the current chain since we've manually just prompted the user for input.
+ return false;
+});
++
+// Register a handler to handle unknown actions that might be predicted
+app.ai.action(AI.UnknownActionName, async (context, state, data, action) => {
+ await context.sendActivity(responses.unknownAction(action));
+ return false;
+});
++
+// Register a handler to deal with a user asking something off topic
+app.ai.action(AI.OffTopicActionName, async (context, state) => {
+ await context.sendActivity(responses.offTopic());
+ return false;
+});
+
+```
+
+### Message extension query
+
+The Teams AI library offers you a more intuitive approach to create handlers for various message-extension query commands when compared to previous iterations of Teams Bot Framework SDK. The new SDK works alongside the existing Teams Bot Framework SDK.
+
+The following is an example of how you can structure their code to handle a message-extension query for the `searchCmd` command.
+
+Example: [Message extension search command](https://github.com/microsoft/teams-ai/tree/main/js/samples/02.messageExtensions.a.searchCommand)
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/02.messageExtensions.a.searchCommand/src/index.ts#L76)
+
+```typescript
+
+// Listen for search actions
+app.messageExtensions.query('searchCmd', async (context, state, query) => {
+ const searchQuery = query.parameters.queryText ?? '';
+ const count = query.count ?? 10;
+ const response = await axios.get(
+ `http://registry.npmjs.com/-/v1/search?${new URLSearchParams({
+ size: count.toString(),
+ text: searchQuery
+ }).toString()}`
+ );
++
+ // Format search results
+ const results: MessagingExtensionAttachment[] = [];
+ response?.data?.objects?.forEach((obj: any) => results.push(createNpmSearchResultCard(obj.package)));
++
+ // Return results as a list
+ return {
+ attachmentLayout: 'list',
+ attachments: results,
+ type: 'result'
+ };
+});
+
+And hereΓÇÖs how they can return a card when a message-extension result is selected.
+
+// Listen for item tap
+app.messageExtensions.selectItem(async (context, state, item) => {
+ // Generate detailed result
+ const card = createNpmPackageCard(item);
++
+ // Return results
+ return {
+ attachmentLayout: 'list',
+ attachments: [card],
+ type: 'result'
+ };
+});
+
+```
+
+## Intents to actions
+
+A simple interface for actions and predictions allows bots to react when they have high confidence for taking action. Ambient presence lets bots learn intent, use prompts based on business logic, and generate responses.
+
+Thanks to our AI library, the prompt need only outline the actions supported by the bot, and supply a few-shot examples of how to employ those actions. We also use conversation-history to enable a more natural dialogue between the user and bot, such as *add cereal to groceries list*, followed by *also add coffee*, which should indicate that coffee is to be added to the groceries list.
+
+All entities are required parameters to actions.
+
+Current list names:
+
+```javascript
+{{conversation.listNames}}
+```
+
+Conversation history:
+
+```javascript
+{{conversation.history}}
+```
+
+Current query:
+
+```javascript
+Human: {{activity.text}}
+```
+
+## AI
+
+The bot logic is simplified to provide handlers for actions such as addItem, removeItem and , findItem. This clear delineation between actions and the prompts that instruct the AI on how to execute them is an incredibly potent tool.
+
+Example: [List bot](https://github.com/microsoft/teams-ai/tree/main/js/samples/04.ai.d.chainedActions.listBot)
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.d.chainedActions.listBot/src/index.ts#L149)
+
+```typescript
+app.ai.action('addItem', async (context, state, data: EntityData) => {
+ const items = getItems(state, data.list);
+ items.push(data.item);
+ setItems(state, data.list, items);
+ return true;
+});
++
+app.ai.action('removeItem', async (context, state, data: EntityData) => {
+ const items = getItems(state, data.list);
+ const index = items.indexOf(data.item);
+ if (index >= 0) {
+ items.splice(index, 1);
+ setItems(state, data.list, items);
+ return true;
+ } else {
+ await context.sendActivity(responses.itemNotFound(data.list, data.item));
++
+ // End the current chain
+ return false;
+ }
+});
+
+app.ai.action('findItem', async (context, state, data: EntityData) => {
+ const items = getItems(state, data.list);
+ const index = items.indexOf(data.item);
+ if (index >= 0) {
+ await context.sendActivity(responses.itemFound(data.list, data.item));
+ } else {
+ await context.sendActivity(responses.itemNotFound(data.list, data.item));
+ }
++
+ // End the current chain
+ return false;
+});
+```
+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Get started with Teams AI library](how-conversation-ai-get-started.md)
platform How Conversation Ai Get Started https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/Teams conversational AI/how-conversation-ai-get-started.md
+
+ Title: Get started with Teams AI library
+description: In this article, learn how to create an app using Teams AI library and its capabilities.
+ms.localizationpriority: medium
++++
+# Get started with Teams AI library
+
+> [!NOTE]
+>
+> Teams AI library is available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).
+
+Teams AI library streamlines the process to build intelligent Microsoft Teams applications by using the AI components. It provides APIs to access and manipulate data, as well as a range of controls and components to create custom user interfaces.
+
+You can easily integrate Teams AI library, prompt management, and safety moderation into your apps and enhance the user experience. It also facilitates the creation of bots that uses an OpenAI API key or AzureOpenAI to provide an AI-driven conversational experience.
+
+## Initial setup
+
+Teams AI library is built on top of the Bot Framework SDK and uses its fundamentals to offer an extension to the Bot Framework SDK capabilities. As part of initial setup, it's important to import the Bot Framework SDK functionalities.
+
+> [!NOTE]
+> The adapter class that handles connectivity with the channels is imported from [Bot Framework SDK](/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0#the-bot-adapter&preserve-view=true).
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.a.teamsChefBot/src/index.ts#L9)
+
+```typescript
+// Import required bot services.
+// See https://aka.ms/bot-services to learn more about the different parts of a bot.
+import {
+ CloudAdapter,
+ ConfigurationBotFrameworkAuthentication,
+ ConfigurationServiceClientCredentialFactory,
+ MemoryStorage
+} from 'botbuilder';
+
+const botFrameworkAuthentication = new ConfigurationBotFrameworkAuthentication(
+ {},
+ new ConfigurationServiceClientCredentialFactory({
+ MicrosoftAppId: process.env.BOT_ID,
+ MicrosoftAppPassword: process.env.BOT_PASSWORD,
+ MicrosoftAppType: 'MultiTenant'
+ })
+);
+
+// Create adapter.
+// See https://aka.ms/about-bot-adapter to learn more about how bots work.
+const adapter = new CloudAdapter(botFrameworkAuthentication);
+
+ ```
+
+### Import Teams AI library
+
+Import all the classes from `@microsoft/teams-ai` to build your bot and use the Teams AI library capabilities.
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.a.teamsChefBot/src/index.ts#L64)
+
+```typescript
+///// Teams AI library /////
+
+// import Teams AI library
+import { Application, ConversationHistory, DefaultPromptManager, DefaultTurnState, OpenAIModerator, OpenAIPlanner, AI } from `@microsoft/teams-ai`;
+import path from "path";
+```
+
+## Create AI Components
+
+You can take your existing or a new bot framework app and add AI capabilities.
+
+**Planner**: OpenAI planner is the main component that calls the large language model (LLM) OpenAI or AzureOpenAI. The OpenAI API is powered by a diverse set of models with different capabilities. You can also make limited customizations to our original base models for your specific use case.
+
+**Prompt manager**: The prompt manager manages prompt creation. It calls functions and injects from your code into the prompt. It can copy the conversation state and the user state into the prompt for you automatically.
+
+**Moderator**: A moderator adds safety moderation to the input and output. It allows you to identify the user input, flag prompt injection techniques, review the output from the bot, and run it through a business logic for filtering to ensure that the bot complies with OpenAI's usage policies. You can either moderate the input or the output, or both. OpenAI moderator is the default moderator.
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.a.teamsChefBot/src/index.ts#L70)
+
+```javascript
+// Create AI components
+const planner = new OpenAIPlanner({
+ apiKey: process.env.OpenAIKey!,
+ defaultModel: 'text-davinci-003',
+ logRequests: true
+});
+const moderator = new OpenAIModerator({
+ apiKey: process.env.OpenAIKey!,
+ moderate: 'both'
+});
+// You can also modify this to out the `chatGPT` prompt.
+const promptManager = new DefaultPromptManager(path.join(__dirname, '../src/prompts/chat'));
+
+The `defaultModel` type `text-davinci-003` can perform any language task with better quality, longer output, and consistent instruction.
+
+```
+
+## Define storage and application
+
+The application object automatically manages the conversation and user state of your bot.
+
+* **Storage**: Create a storage provider to store the conversation and the user state for your bot.
+
+* **Application**: The application class has all the information and bot logic required for an app. You can register actions or activity handlers for the app in this class.
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.a.teamsChefBot/src/index.ts#L82)
+
+```javascript
+// Define storage and application
+const storage = new MemoryStorage();
+const app = new Application<ApplicationTurnState>({
+ storage,
+ ai: {
+ planner,
+ moderator,
+ promptManager,
+ prompt: 'skprompt',
+ history: {
+ assistantHistoryType: 'text'
+ }
+ }
+});
+```
+
+The `MemoryStorage()` function stores all the state for your bot. The `Application` class replaces the Teams Activity Handler class. You can configure your `ai` by adding the planner, moderator, prompt manager, default prompt and history. The `ai` object is passed into the `Application`, which receives the AI components and the default prompt defined earlier.
+
+## Prompt
+
+Prompts are pieces of text that can be used to create conversational experiences. Prompts are used to start conversations, ask questions, and generate responses. The use of prompts can help reduce the complexity of creating conversational experiences and make them more engaging for the user.
+
+The following are a few guidelines to create prompts:
+
+* Provide instructions, examples, or both.
+* Provide quality data. Ensure that there are enough examples and proofread your examples. The model is usually smart enough to see through basic spelling mistakes and give you a response, but it also might assume that the input is intentional and it might affect the response.
+* Check your prompt settings. The temperature and top_p settings control how deterministic the model is in generating a response. Higher value such as 0.8 makes the output random, while lower value such as 0.2 makes the output focused and deterministic.
+
+Create a folder called prompts and define your prompts in the folder. When the user interacts with the bot by entering a text prompt, the bot responds with a text completion.
+
+* `skprompt.txt`: Contains the prompts text and supports template variables and functions. Define all your text prompts in the `skprompt.txt` file.
+
+* `config.json`: Contains the prompt model settings. Provide the right configuration to ensure bot responses are aligned with your requirement. Configure `max_tokens`, `temperature`, and other properties to pass into OpenAI or AzureOpenAI.
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.a.teamsChefBot/src/prompts/chat/config.json)
+
+ ```json
+ {
+ "schema": 1,
+ "description": "Chat with Santa Clause",
+ "type": "completion",
+ "completion": {
+ "max_tokens": 150,
+ "temperature": 0.9,
+ "top_p": 0.0,
+ "presence_penalty": 0.6,
+ "frequency_penalty": 0.0,
+ "stop_sequences": [
+ "Human:",
+ "AI:"
+ ]
+ }
+ }
+ ```
+
+### Query parameters
+
+The following table includes the query parameters:
+
+|**Value** |**Description** |
+|||
+|`max_tokens` | The maximum number of tokens to generate in the completion. The token count of your prompt plus max_tokens can't exceed the model's context length. |
+|`temperature` | What sampling temperature to use, between 0 and 2. Higher values like 0.8 makes the output more random, while lower values like 0.2 makes it more focused and deterministic. |
+|`top_p` |An alternative to sampling with temperature, called nucleus sampling, where the model considers the results of the tokens with top_p probability mass. Therefore, 0.1 means only the tokens comprising the top 10% probability mass are considered. |
+|`presence_penalty` | Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics. |
+|`frequency_penalty` |Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim. |
+|`stop_sequences` | Up to four sequences where the API stops generating further tokens. The returned text won't contain the stop sequence. |
+
+### Prompt actions
+
+Plans let the model perform actions or say things to the user. You can create a schema of the plan and add a list of actions that you support. It can perform an action and pass arguments. The OpenAI endpoint can figure out what actions it wants to use and then extract all the entities and pass those as arguments to the action call.
+
+```text
+ The following is a conversation with an AI assistant.
+ The AI is Santa Clause and the Human is a child meeting Santa for the first time.
+ The AI should always reply the way Santa would.
+ The AI should always greet the human the way Santa would, ask them their name, and then what they would like for Christmas.
+
+ {{$history}}
+ Human: {{$input}}
+ AI:
+ ```
+
+### Prompt Template
+
+Prompt template is a simple and powerful way to define and compose AI functions using plain text. You can use it to create natural language prompts, generate responses, extract information, invoke other prompts, or perform any other task that can be expressed with text.
+
+The language supports features that allow you to include variables, call external functions, and pass parameters to functions. You don't need to write any code or import any external libraries, just use the curly braces {{...}} to embed expressions in your prompts. Teams parses your template and execute the logic behind it. This way, you can easily integrate AI into your apps with minimal effort and maximum flexibility.
+
+* {{function}}: Calls a registered function and inserts its value.ΓÇï
+
+* {{$input}}: Inserts the message text. It gets it's value from state.temp.input.
+
+* {{$history}}: Inserts the conversation history.ΓÇï It gets it's value from state.temp.history
+
+* {{$state.< property >}}: Inserts state properties.
+
+## Actions
+
+Actions handle events triggered by AI components.
+
+`FlaggedInputAction` and `FlaggedOutputAction` are the built-in action handlers to handle the moderator flags. If the moderator flags an incoming message input, the moderator redirects to the `FlaggedInputAction` handler and the `context.sendActivity` sends a message to the user about the flag.
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.a.teamsChefBot/src/index.ts#L97)
+
+```javascript
+app.ai.action(AI.FlaggedInputActionName, async (context: TurnContext, state: TurnState, data: TData) => {
+ await context.sendActivity(`I'm sorry your message was flagged: ${JSON.stringify(data)}`);
+ return false;
+});
+
+app.ai.action(AI.FlaggedOutputActionName, async (context: TurnContext, state: ApplicationTurnState, data: TData) => {
+ await context.sendActivity(`I'm not allowed to talk about such things.`);
+ return false;
+});
+```
+
+### Register Action Handlers
+
+Action handlers help users achieve the goals, which is shared in the user intents.
+
+One of the key aspects in action handlers is that you must first register the actions in the prompts and then help user achieve the goal.
+
+You must register a handler for each action listed in the prompt and also add a handler to deal with unknown actions.
+
+In the following example of a light bot, we have the `LightsOn`, `LightsOff`, and `Pause` action. Every time an action is called, you return `true` or `false`. ΓÇïReturning `false` from a handler prevents the planner from running additional `DO` or `SAY` commands. When the bot receives an unknown action, we're telling the bot to terminate the action.
+
+[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.c.actionMapping.lightBot/src/index.ts#L107)
+
+```javascript
+// Register action handlers
+app.ai.action('LightsOn', async (context: TurnContext, state: ApplicationTurnState) => {
+ state.conversation.value.lightsOn = true;
+ await context.sendActivity(`[lights on]`);
+ return true;
+});
+
+app.ai.action('LightsOff', async (context: TurnContext, state: ApplicationTurnState) => {
+ state.conversation.value.lightsOn = false;
+ await context.sendActivity(`[lights off]`);
+ return true;
+});
+
+app.ai.action('Pause', async (context: TurnContext, state: ApplicationTurnState, data: TData) => {
+ const time = data.time ? parseInt(data.time) : 1000;
+ await context.sendActivity(`[pausing for ${time / 1000} seconds]`);
+ await new Promise((resolve) => setTimeout(resolve, time));
+ return true;
+});
+
+// Register a handler to handle unknown actions that might be predicted
+app.ai.action(
+ AI.UnknownActionName,
+ async (context: TurnContext, state: ApplicationTurnState, data: TData, action: string | undefined) => {
+ await context.sendActivity(responses.unknownAction(action || 'unknown'));
+ return false;
+ }
+);
+```
+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Teams AI library quick start guide](conversation-ai-quick-start.md)
platform Teams Conversation Ai Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/Teams conversational AI/teams-conversation-ai-overview.md
+
+ Title: Teams AI library
+description: In this article, learn about Teams conversation AI.
+ms.localizationpriority: medium
++++
+# Teams AI library
+
+> [!NOTE]
+>
+> Teams AI library is available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).
+
+Teams AI library is a Teams-centric interface to GPT-based common language models and user intent engines. This moderates the need for you to take on complex and expensive tasks of writing and maintaining conversational bot logic to integrate with large language models (LLMs).
++
+The AI library provides a simple capabilities-driven approach and helps you create intelligent apps quickly and easily with prebuilt, reusable code snippets so that you can focus on building the business logic rather than learning the semantics of Teams conversational applications.
+
+The following are some of the main features available through Teams AI library:
+
+* [Simple Teams-centric component scaffolding](#simple-teams-centric-component-scaffolding)
+* [Natural language modeling](#natural-language-modeling)
+* [Prompt engineering](#prompt-engineering)
+* [Conversational session history](#conversational-session-history)
+* [Localization](#localization)
+* [LLM modularity](#llm-modularity)
+* [Responsible AI](#responsible-ai)
+* [Predictive engine for mapping intents to actions](#predictive-engine-for-mapping-intents-to-actions)
+
+## Simple Teams-centric component scaffolding
+
+The Teams AI library simplifies the Teams app model to focus on the extension needed versus the protocol required. You can use prebuilt templates and add your business logic to this scaffold to add modules such as bots, message extensions, Adaptive Cards, or link unfurling.
+
+## Natural language modeling
+
+The Teams AI library is built with GPT-powered language models, so that you don't need to spend time to write your conversational logic and identify user intents. This makes building AI-powered Teams apps easier, more compliant, and consistently usable than ever before.
+
+Bots can run in-context and assist when the bot recognizes a user intent that maps to one of the bot actions. This boosts the conversation without requiring users to explicitly talk to the bot using a small set of registered actions.
+
+## Prompt engineering
+
+Prompt engineering helps you design prompts considering user's intent, context of the conversation, and the bot personality. Bots can be personalized, customized, and tailor-made to meet user needs.
+
+## Conversational session history
+
+Teams AI library remembers context across messages and helps improve the bot performance by analyzing patterns in user behavior.
+
+## Localization
+
+Since Teams AI library is backed by GPT, localization is available. When a user inputs in any language, the input is consistently translated to intents, entities, and resultant actions that the app understands without the need to build and maintain localization records.
+
+## LLM modularity
+
+Large language model (LLM) is an advanced language model that utilizes latent variables to generate coherent and diverse natural language text and style.
+
+Although, Teams AI library is built to use Open AIΓÇÖs GPT model, you have the flexibility to swap with any LLM of your choice without changing the bot logic.
+
+## Responsible AI
+
+Teams AI library allows you to create ethical and responsible conversational apps by:
+
+* Moderation hooks: To regulate bot responses against any moderation API.
+* Conversation sweeping: To monitor conversations and intervene when the conversation goes astray through proactive detection and remediation.
+* Feedback loops: To evaluate the performance of the bot for high quality conversations and enhance user experience.
+
+Teams AI library offers support from low code to complex scenarios. The library extends capabilities with AI constructs to build natural language modeling, scenario-specific user intent, personalization, and automated context-aware conversations.
+
+## Predictive engine for mapping intents to actions
+
+A simple interface for actions and predictions allows bots to react when the bot has confidence for taking action. Ambient presence lets bots learn intent, use prompts based on business logic, and generate responses. For example, if a user has been out of office and needs to quickly summarize a thread, the library:
+
+1. Understands the intent as summarization.
+1. Allows prompts to make summarizations over a period of time focused on the userΓÇÖs manager.
+1. Provides actions to summarize chat content for users to consume.
+
+## Why build apps with Teams AI library?
+
+Teams AI library makes Teams apps conversational, not driven by rigid command structures. The library is designed to seamlessly integrate with the Teams Bot Framework SDK. Building apps for Teams is drastically simpler, with rich natural language features that bring any app experience into the conversation.
+
+Here are some key benefits of the Teams AI library:
+
+* ΓÇïStrong proof of value with Teams app componentsΓÇï. You can instantiate your bot activity handler and invoke any Teams capabilities by just invoking the function.
+
+* ΓÇïEasy to use powerful conversational language models versus building your modelΓÇï.
+
+* ΓÇïGuardrails to steer responsible conversation with moderationΓÇï.
+
+* ΓÇïOut of the box localization with LLMs.
+
+* You can select any LLM.
+
+* ΓÇïYou can talk to Teams apps like youΓÇÖd talk to a human as opposed to a set of commandsΓÇï.
+
+* ΓÇïAny app that uses the library offers consistency for interactions, and the app handles steering natural conversation into actionable outcomes.
+
+* Multiple safety layers to ensure that the bot works in a safe and responsible manner. The safety layers are as follows:
+
+ * Skype Messaging Bot API (SMBA): Endpoint for all bot related activities. Performs throttling and sanitization on bot payload.
+ * Other IC3
+ * Agent Provisioning Service (APS): Bot metadata retrieval and bot validation.
+ * Teams Middle Tier (MT): App policy or tenant settings checks.
+ * Partner Lookup Service (PLS): User or tenant region lookups.
+ * Experimental Config Service (ECS): Feature flags and scenario configuration data.
+ * Microsoft Graph: App install state and resource specific consent validation.
+ * Bot Framework
+
+<!-- ## Bots Architecture overview
+
+The bot framework using Teams AI library requires the following:
+
+* Support to OAuth S2S
+* Adherence to Activity schema for reading and writing JSON documents
+* Invoking Rest APIs to determine additional context required to handle a user's message, such as Azure Active Directory (Azure AD) ID and UPN of the user the bot is interacting with. -->
+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Teams AI library capabilities](how-conversation-ai-core-capabilities.md)
platform Activity Feed Notifications https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/activity-feed-notifications.md
The activity feed is a surface for users to access their notifications in Micros
# [Desktop](#tab/desktop)
The activity feed is a surface for users to access their notifications in Micros
The following variants show the kinds of activity feed notification cards you can display. The app logo replaces the user avatar for app-generated notifications. ## Manage activity feed notifications
Each activity generates a system notification. What displays depends on what the
# [Desktop](#tab/desktop) |Counter|Description| |-|--|
platform Design Teams App Advanced Ui Components https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-advanced-ui-components.md
Use the left nav to browse multiple pages within your Teams tab. In the followin
### Desktop ## Notification bar
Your app can launch a stage from an Adaptive Card, shared link, or visual compon
### Desktop ## Toolbar
platform Design Teams App Artwork Store https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-artwork-store.md
+
+ Title: Design your app - App artwork for store
+description: Learn about guidelines and templates for displaying the app artwork.
+
+ms.localizationpriority: medium
+++
+# Microsoft Teams app artwork for store
+
+This article provides guidelines and templates for displaying app artwork and details in the Teams store. Follow these guidelines for tips on crafting engaging and useful imagery to get people excited about your app in [Fluent icons](https://www.figma.com/community/file/836835755999342788) and [Teams icon](https://react.fluentui.dev/?path=/docs/concepts-developer-icons-icons--page).
+
+## App image templates
+
+Select one of the following templates that helps you show customers your app images in an appealing way. Use the templates to highlight key screens from your app and change the text to emphasize features. It's recommended to change the background color to enhance your brand.
+
+Use Size 1 for single column images and Size 2 for double column images.
+
+#### Template A
++
+#### Template B
++
+#### Template C
++
+## Best practices
+
+Follow these tips to make the most of your space in the Teams store.
+
+ :::column span="":::
+
+#### Do: Use color to enhance your brand
+
+Use the background color to highlight your logo and create more cohesion.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Use colors that clash with your brand
+
+Your app display is overwhelming to customers.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Use simple and clear text
+
+Briefly highlight the features that are displayed.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Use unclear text
+
+Customers may ignore an unclear message.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Clearly and accurately describe your app
+
+Give a brief and accurate overview of your application and what people can expect from it.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Use confusing or misleading copy to describe your app
+
+It is essential that your app description is accurate and easy to understand.
+
+ :::column-end:::
platform Design Teams App Basic Ui Components https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-basic-ui-components.md
Based on [Fluent UI react components](https://react.fluentui.dev/), the Microsof
## Alert ## Button ## Breadcrumb ## Card ## Carousel ## Checkbox ## Coachmark ## Contextual menu ## Dialog ## Dropdown ## Group list ## Hyperlink ## Input ## Key value pair ## Paragraph ## Picker
Based on [Fluent UI react components](https://react.fluentui.dev/), the Microsof
## Pivot ## Progress indicator ## Radio ## Scrollbar ## Search box ## Side panel
Based on [Fluent UI react components](https://react.fluentui.dev/), the Microsof
## Status label ## Toast ## Toggle Note: In Fluent UI, toggle is a type of checkbox. ## Tooltip ## Other resources
Get code samples and implementation details for some of the components listed he
> [!div class="nextstepaction"] > [Try the Fluent UI react components](https://react.fluentui.dev/)-
platform Design Teams App Color https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-color.md
+
+ Title: Design your app - Colors
+description: Learn about the basics of colors and color schemes in your Microsoft Teams app, including avatars, layout, icons, color scheme, and more.
+
+ms.localizationpriority: medium
+++
+# Colors for your Microsoft Teams app
+
+Teams web and desktop supports default (light), dark, and high-contrast themes, while Teams mobile supports light and dark themes. Each theme has its own color scheme.
+
+## Guidelines
+
+Use standard Teams colors, which are designed to meet Web Content Accessibility Guidelines (WCAG) 2.1 contrast requirements, ensures a consistent and accessible experience across the supported themes.
+
+ :::column span="":::
+
+##### Add colors when necessary
+
+Start from a white canvas and add colors only if needed. Avoid using colors to paint large surfaces such as cards. Instead, use colors to create hierarchy, for example, highlighting important actions.
+
+ :::column-end:::
+ :::column span="":::
+
+##### Put accessibility first
+
+Always aim to present app content with all user needs and preferences in mind. The color of text and important elements such as icons must be accessible.
+
+ :::column-end:::
+ :::column span="":::
+
+##### Use colors consistently
+
+DonΓÇÖt confuse by using colors inconsistently. Use Teams core colors and secondary colors, which convey activity, errors, and other common states.
+
+ :::column-end:::
+
+### Primary colors and color tokens
+
+Each Teams theme has its own color scheme. To handle theme changes automatically, you can specify color tokens in your design.
+
+Learn how to [use color tokens in your Teams app project](https://react.fluentui.dev/?path=/docs/theme-colors--page).
+
+##### Example for design with tokens
++
+The following token values are for the default (light) theme:
+
+|Counter|Description|
+|-|--|
+|A|**Background 2**: Canvas background color|
+|B|**Default Foreground**: Primary text color|
+|C|**Foreground 1**: Secondary text color|
+|D|**Brand Background**: Primary button background color|
+|E|**Brand Foreground**: Link text color|
+
+### Integrate your apps color palette with Teams
+
+##### Primary color
++
+|Counter|Description|
+|-|--|
+|1|Action button color in an embedded component|
+|2|Action button color in a personal app|
+
+##### Apply the primary color
++
+##### Secondary colors
++
+|Counter|Description|
+|-|--|
+|1|Teams secondary colors|
+|2|Custom secondary colors in an example app|
+
+### Best Practices
+
+ :::column span="":::
+
+#### Do: Use colors with purpose
+
+Colors must be used for highlighting functionality, defining hierarchy, and conveying different states. Avoid using colors when not tied to any semantic meaning.
+
+ :::column-end:::
+ :::column span="":::
+
+#### Do: Use the neutral color palette to create depth
+
+Always use the neutral, gray scale color palette provided in this kit as the base of your UI. You can include additional steps of gray to reinforce a sense of depth and hierarchy. Layers must appear brighter as they move up the z-axis.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### DonΓÇÖt: Use color for branding only
+
+DonΓÇÖt use colors just for branding purposes or visual delight. Avoid using colors on large surfaces, such as the background of cards and headers.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Get too complicated
+
+For example, donΓÇÖt have different shades of gray for light and dark themes. Also, on large surfaces, never use neutral colors that arenΓÇÖt gray scale.
+
+ :::column-end:::
platform Design Teams App Icon Store Appbar https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-icon-store-appbar.md
+
+ Title: Design your app - App icon for store and app bar
+description: Learn about the app icons for store and app bar
+
+ms.localizationpriority: medium
+++
+# Microsoft Teams app icon for store and app bar
+
+This article provides the guidelines for creating icons in your app ecosystem to help designers and you submit the correct application icon. Following these guidelines creates uniformity and balance in your app ecosystem and emphasizes the artwork of your app icon.
+
+## App icon
+
+When submitting your app package, include two PNG versions of the app icon, a color icon and an outline icon. For your app to pass Teams store review, these icons must meet certain size requirements. Follow the steps to ensure your app icons fit the Teams store standards.
+
+### Balanced layout
+
+The icons are intended to create a uniform layout. These guidelines helps you create your app icon for submission.
++
+### Creating your assets
+
+Microsoft Teams needs three assets during app submission to generate the app icons.
++
+|Counter|Description|
+|-|--|
+|1|A full bleed PNG format at 192 x 192 pixels. Utilize the full asset space as the background. This is used in the app store or fly-outs.|
+|2|A default or rest PNG format icon at 32 x 32 pixels. This icon is used as **rest/default** state in the app bar and other locations in the product. |
+|3|A focus or pressed PNG format icon at 32 x 32 pixels. This icon is used as **focus** state in the app bar.|
+
+### Color icon architecture
+
+The color app icon dimensions must be 192 x 192 pixels. If you have a logo icon, the logo needs to fit within the 120 x 120 safe area in the center.
+
+The submitted icon must be a full square. Teams automatically applies masking for consistent icon shapes across the app.
++
+### Icon attributes
+
+#### Colored
++
+#### White background
++
+## App icon utilization
+
+Refer this list for content areas where your icon shows in the product, depending on app type or capability.
+
+### Personal app
++
+### App flyout
++
+### Bot (channel view)
++
+### Message extension flyout
++
+### Meeting apps flyout
++
+### Meeting U-bar
++
+## Best practices
+
+ :::column span="":::
+
+#### Do: Follow the recommendation for safe area (96 x 96)
+
+It is recommended that if you have a logo, keep it within the 96 x 96 safe area inside of the 192 x 192 PNG format icon.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Make the icon bigger than the safe area
+
+Here is an example of a logo inside of the PNG format icon that is not within the safe area. It creates uneven padding (negative space) around the icon.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Provide full bleed for rounded corners
+
+If you have a full bleed image, just upload a square PNG format at 192 x 192. The corners are rounded dynamically.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Round the corners of your icon
+
+DonΓÇÖt round the corners. Submit at perfect square at 192 x 192, the corners are rounded dynamically.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Upload an icon without a border
+
+Border is added automatically. In this case just upload your PNG format without a border, even if itΓÇÖs on a white background.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Add a border
+
+Borders are added dynamically. If you include a border in your PNG format, it'll result in unwanted duplication on white backgrounds.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Provide enough contrast
+
+Consider your icon to have enough contrast against the background. It's recommended that a ratio of 4.5:1 for best accessibility.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Fade the icon
+
+Avoid low contrast for your icons. Ensure that the background and icon you use in your PNG format has enough contrast.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Elevate your brand
+
+Focus on your brand by using a full flat color as background.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Avoid placing your brand icon in a circle
+
+Elevate your brand by keeping the brand icon within 96 x 96 safe area.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Abbreviate long words in the app icon
+
+If you have a long app name, try to abbreviate so that itΓÇÖs easier to read when your icon is resized to 32 x 32 size.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Include multiple words in app icon
+
+Avoid using multiple words on the icon. It is impossible to read the text when the icon is at smaller sizes for example 32 x 32 or 36 x 36.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Create balance (96 x 96)
+
+Elevate your brand by keeping balance. Stick to the 96 x 96 safe area for a sense of equilibrium.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Skew or stretch your icon
+
+Keep your icon within the safe area. DonΓÇÖt stretch your icon in one direction or another.
+
+ :::column-end:::
platform Design Teams App Layout Scaling https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-layout-scaling.md
+
+ Title: Design your app - Layout and scaling
+description: Learn about the layout and scaling for Microsoft Teams app.
+
+ms.localizationpriority: medium
+++
+# Layout and scaling for your Microsoft Teams app
+
+A grid layout allows your app to be consistent and guarantees recognizable relationships between design components. You can learn about your grid system and tips for scaling and zoom levels in your app to pass submission criteria.
+
+Scaling and responsive design are essential to all Teams apps so that users can successfully interact with all interfaces with certainty. In order to pass Teams store review, the entire text must be visible and not truncated.
+
+## Layout design
+
+The 4-pixel base unit of grid allows components to scale consistently across all display size in Teams. In the following example, the corner radius of each button is 4 pixels.
++
+### Always follow the grid
++
+### Make it responsive
++
+### Use white space
++
+## Scaling and responsive
+
+### Mobile
+
+Mobile designs must be 320 pixels.
++
+### Desktop
+
+The minimum size for desktop is 550 pixels.
+
+##### Example for 550 pixels
++
+##### Example for 2560 pixels
++
+## Best practices
+
+ :::column span="":::
+
+#### Do: Use word wrap so that text is legible at all zoom levels
+
+Avoid text overlap and truncation.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Let text and buttons shift and overlap as zoom level changes
+
+Overlapping text and buttons might not meet our accessibility standards.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Use word wrap so that text is legible at all widths
+
+Avoid truncation with reflow, prioritizing call to actions (CTAs), and action items.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Let text or CTAs get cut off or become illegible as window width changes
+
+Without word wrapping, the text and CTAs are not usable.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Ensure your app is legible at 200% scale
+
+Use responsive design to avoid text overlap and truncation.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Truncate and cut off content at any zoom level
+
+It is recommended to test up to 200% zoom.
+
+ :::column-end:::
+
+ :::column span="":::
+
+#### Do: Text and colors for accessibility
+
+The entire text must be visible and used for all users, meaning that it must exceed certain color ratios, depending on its usage. To check your contrast levels check out the WebAIM contrast checker.
+
+ :::column-end:::
+ :::column span="":::
+
+#### DonΓÇÖt: Submit your app with text that doesnΓÇÖt pass contrast standards
+
+Teams apps need to be accessible to all users with any level of visual impairment or disability. Submissions with inaccessible text is not accepted.
+
+ :::column-end:::
+
+ :::column span="":::
+
+##### Do: Test your app at 1920 x 1080 resolution
+
+Avoid text overlap and truncation.
+
+ :::column-end:::
+ :::column span="":::
+
+##### DonΓÇÖt: Submit your app for review without testing at Teams default resolution
+
+Your app might not pass the submission process if there are issues at 1920 x 1080 resolution.
+
+ :::column-end:::
+
+ :::column span="":::
+
+##### Do: Test mobile app for responsiveness
+
+Mobile view of your app must be responsive, similarly to the narrowest responsive breakpoint of a web app.
+
+ :::column-end:::
+ :::column span="":::
+
+##### DonΓÇÖt: Allow truncation on your mobile app
+
+Nothing must be cut off or illegible on your mobile app.
+
+ :::column-end:::
+
+ :::column span="":::
+
+##### Do: Ensure headers are always legible at all zoom levels
+
+If the headers truncate, use a tooltip so that users can read headers by hovering.
+
+ :::column-end:::
+ :::column span="":::
+
+##### DonΓÇÖt: Truncate headers without a hover feature
+
+Your app won't pass Teams submission if it has illegible headers without a hover functionality.
+
+ :::column-end:::
platform Design Teams App Shape Elevation https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-shape-elevation.md
+
+ Title: Design your app - Shape and elevation
+description: Learn about the basics of shapes and elevation of your Teams app.
+
+ms.localizationpriority: medium
+++
+# Shape and elevation for designing your Teams app
+
+This article provides how to use shape and elevation to create additional hierarchy in your app.
++
+## Shape and form
+
+Depending on the component, Teams uses corner radiuses of 0 pixels, 4 pixels, and fully rounded. Most Teams components, including buttons, have a 4-pixel corner radius. Key calls to action might use different shapes, such as rounded floating action buttons. In cases where you must alter a Teams button shape, follow the sizing and spacing guidelines to maintain a consistent experience.
++
+## Best practices
+
+ :::column span="":::
+
+##### DonΓÇÖt: Change the shape of basic UI components
+
+Avoid modifying the shape of basic UI components as much as possible. Try following the common sizing and spacing rules of each component even when the shape needs altering.
+
+ :::column-end:::
+ :::column span="":::
+
+##### DonΓÇÖt: Modifying or adding to the shadow levels
+
+Customizing the shadow values might create a confusing visual hierarchy when your app is rendered in the Teams interface.
+
+ :::column-end:::
+ :::column span="":::
platform Design Teams App Type https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-type.md
+
+ Title: Design your app - Typography
+description: Learn about the basics of typography in Microsoft Teams app including type scale, font and more.
+
+ms.localizationpriority: medium
+++
+# Typography for your Microsoft Teams app
+
+This article provides how to incorporate standard Teams typography in your app design.
+
+## Font type
+
+ :::column span="":::
+
+##### Web and desktop app
+
+Teams uses Segoe UI for its type ramp to optimize hierarchy and readability.ΓÇï
+
+ :::column-end:::
+ :::column span="":::
+
+##### Android
+
+The Teams Android app uses Roboto typeface. For more information, see [Android guidelines and examples (Fluent UI)](https://www.microsoft.com/design/fluent/#/android).
+
+ :::column-end:::
+ :::column span="":::
+
+##### iOS
+
+The Teams iOS app uses the SF Pro typeface. For more information, see [iOS guidelines and examples (Fluent UI)](https://www.microsoft.com/design/fluent/#/ios).
+
+ :::column-end:::
+
+## Type scale
+
+Teams uses seven styles that range from level-one titles to captions.
++
+## Font weight
+
+Font weights are for identifying specific elements and conveying states. ​Don’t use bold to create hierarchy in your text. Instead, use a different shade of grey and the SemiBold weight.
++
+## Usage
+
+Using different font sizes and weights help create hierarchy and ensure readability. However, donΓÇÖt rely on just size and weight. When possible, build your hierarchy with the primary, secondary, and tertiary text colors listed here.
+
platform Design Teams App Ui Templates https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-ui-templates.md
In Teams, a calendar is where a user views, schedules, and manages upcoming and
### Desktop ## Dashboard
A dashboard displays different types of content in a central location (such as a
### Desktop ## Data visualization
The empty state template can be used for many scenarios, including sign in, firs
### Desktop ## Filter
Forms are used to collect, validate, and submit user input in a structured way.
### Desktop ## List
You can use a list to display related items in a scannable format and allow user
### Desktop ## Sign in
You can design app sign-in flows for different Teams contexts and identity provi
### Desktop ## Settings
Settings screens are where users can configure their preferences with your app.
* Manage app features ## Task board
A task board, sometimes called a kanban board or swim lanes, is a collection of
### Desktop ## Wizard
A wizard guides a user through several screens to complete a task (such as a set
### Desktop ## See also
platform Personal Apps https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/personal-apps.md
You can find comprehensive personal app design guidelines, including elements th
Users can add a personal app from the Teams store or app flyout by selecting the **More** icon on the left side of Teams (shown in the following example). ## Use a personal app (private workspace)
You can add multiple actions to the upper-right NavBar and build an overflow men
:::image type="content" source="../../assets/images/overflow-menu-and-multiple-actionsoptions.png" alt-text="The screenshot is an example thats describes the NavBar and Overflow menu.":::
+|Counter|Description|
+|-|--|
+|1|NavBar|
+|2|Overflow menu|
+ To **Configure and add multiple actions in NavBar**, call [setNavBarMenu](/javascript/api/@microsoft/teams-js/microsoftteams.menus?view=msteams-client-js-1.12.1&preserve-view=true) API and add the `displayMode enum` property to `MenuItem`. The `displayMode enum` defines how a menu appears in the NavBar. The default value of `displayMode enum` is set to `ifRoom`. Based on the requirements and space available in the NavBar, set `displayMode enum` considering one of the following.
microsoftTeams.menus.setNavBarMenu(menuItems, (id: string) => {
#### Desktop |Counter|Description| |-|--|
microsoftTeams.menus.setNavBarMenu(menuItems, (id: string) => {
|C|**Popout view**: Pushes your app content from a parent window to a standalone child window.| |D|**More menu**: Includes other app options and information. (You could alternatively make **Settings** a tab.)| |Counter|Description| |-|--|
microsoftTeams.registerBackButtonHandler(() => {
#### Desktop |Counter|Description| |-|--|
microsoftTeams.registerBackButtonHandler(() => {
On the left side of Teams, users can right-click the personal app to pin, remove, and configure other app options. ## Best practices
platform How To Extend Copilot https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/copilot/how-to-extend-copilot.md
+
+ Title: How to Extend Microsoft 365 Copilot
+description: In this article, learn how to integrate with Microsoft 365 Copilot through message extensions and Graph connectors.
+ms.localizationpriority: medium
++ Last updated : 05/23/2023 ++
+# Extend Microsoft 365 Copilot
+
+Microsoft 365 Copilot is powered by an advanced processing and orchestration engine that seamlessly integrates Microsoft 365 apps, Microsoft Graph, and large language models (LLMs) to turn your words into the most powerful productivity tool. While Copilot is already able to use the apps and data within the Microsoft 365 ecosystem, many users still depend on various external tools and services for work management and collaboration. You can address this gap by extending Copilot to enable users to work with their third-party tools and services, unlocking the full potential of Microsoft 365 Copilot.
+
+You can extend Microsoft 365 Copilot by building a plugin or by connecting to an external data source.
+
+## What is a plugin?
+
+A plugin allows Copilot to interact directly with third-party data, apps, and services, enhancing its capabilities and broadening its range of capabilities.
+Plugins allow Copilot to:
+
+* Retrieve real-time information, for example, latest news coverage on a product launch.
+* Retrieve knowledge-based information, for example, my teamΓÇÖs design files in Figma.
+* Perform actions on behalf of the user, for example, create a Jira ticket.
+
+## How do I build a plugin?
+
+> [!NOTE]
+> Plugins for Microsoft 365 Copilot are in early access preview. This documentation is subject to change. When you have access to [the developer preview program](https://aka.ms/plugins-dev-waitlist), you'll receive instructions on evaluating your message extension to be used by Microsoft 365 Copilot.
+
+If you already have a Teams message extension, then you already have a plugin that works with Copilot. If not, create a [message extension using the Teams Toolkit](~/messaging-extensions/what-are-messaging-extensions.md).
+
+**Scenario 1: I want to create a new plugin from an existing API or OpenAI plugin**
+
+[Join the early access program](https://aka.ms/PluginsEarlyAccess) to build a message extension that allows you to convert an existing API or OpenAI plugin to work for Microsoft Copilot.
+
+1. Using the Teams Toolkit for Microsoft Visual Studio Code, go to **Create plugin for Copilot**.
+2. Provide a link to either an OpenAPI specification or an OpenAI plugin.
+3. Update your manifest with plugin metadata such as name, publisher, APIs used.
+4. Optional: If you want your plugin to return an Adaptive Card, provide an Adaptive Card template and reference the template in the manifest.
+5. Test your plugin.
+6. Preview and publish your plugin.
+
+**Scenario 2: I want to build a plugin from an existing Microsoft 365 message extension**
+
+Your Message Extension will work with Copilot (after quality testing).
+
+## What makes a good plugin for Microsoft 365 Copilot?
+
+To ensure your plugin works as intended, it is important to include good descriptions in your manifest. This allows the underlying LLM to take full advantage of your pluginΓÇÖs capabilities. ItΓÇÖs recommended to test different descriptions and instructions to find the most effective way for the LLM to utilize your plugin. Also, itΓÇÖs important that the manifest file is up-to-date with any changes or enhancements you make to your plugin.
+
+1. App description: Include detailed descriptions of the app, supported scenarios, feature capabilities, and related keywords using the `shortDescription` and `longDescription` fields.
+
+ ```json
+ "name": {
+ "shortDescription": "Work-item tracking and productivity app",
+ "longDescription": "Contoso app is a work-item tracking and project management app that allows teams to create, manage, and track work items. This app helps teams manage projects more efficiently. "
+ }
+ ```
+
+2. Skill parameter descriptions: Include detailed descriptions of your search and action skills along with associated parameters. These descriptions are used by the LLM to trigger the right skill and input the correct parameters for a given user request.
+
+ ```json
+ "commands": [
+ {
+ "id": "Work item search query",
+ "type": "query",
+ "context": "command box",
+ "parameters": [
+ {
+ "name": "Work item search string",
+ "title": "Work item search keyword",
+ "description": "Search for work items by keyword(s)",
+ }
+ ]
+ }
+ ```
+
+3. Adaptive Card responses: By incorporating Adaptive Cards into your pluginΓÇÖs response, you can enhance the user experience by providing more dynamic, actionable content within the responses and references, allowing users to interact more effectively with the information provided.
+
+4. Including links in plugin response: Including links within your skillΓÇÖs response serves multiple purposes:
+ * Assists the LLM in posting the entity link for users, streamlining the reference process.
+ * Enables users to easily access your entities in future Copilot requests.
+ * Embedded links in Adaptive Cards that allows your content to be displayed as a live, actionable loop component throughout the M365 ecosystem, enhancing user engagement and interaction.
+
+5. Deep Content Retrieval: To further enhance your pluginΓÇÖs functionality, itΓÇÖs recommended that your API supports deep content retrieval scenarios that can be leveraged by the LLMs to obtain grounding data. This involves enabling Copilot to send targeted requests, such as limiting a search to a specific date range, to your API for particular tasks and queries.
+
+## Upgrading your plugin to a rich conversational Teams app
+
+When you connect your API to Teams, you've built a simple, powerful Microsoft 365 Copilot plugin. Teams makes it easier and helps you enhance this experience by adding rich conversational components. In addition to your plugin, you can use Teams Toolkit to add a bot to your manifest file. Developing a bot has never been easier with the release of the new [Teams AI library](../bots/how-to/Teams%20conversational%20AI/teams-conversation-ai-overview.md). By bot, your plugin becomes a full conversational Teams app, allowing you to develop link unfurling experiences, message extensions, message actions, search bar actions, and end-to-end conversational bots.
+
+## Connecting external data sources
+
+If you have an existing Microsoft Graph Connector, it will work with Copilot without any changes. With a Graph Connector, your data will be included in Copilot responses, and also participate in other Microsoft 365 experiences such as search, content recommendations. For more information, see [building a Microsoft Graph connector](https://developer.microsoft.com/graph/connectors).
+
+## How to make your Graph connector work better with Copilot?
+
+To ensure your Graph connector works well with Copilot, there are several things you should do. Following these tips will also improve relevance for your connector content with Microsoft Search:
+
+1. Include `urlToItemResolver`. By including `urlToItemResolver` in your connectorΓÇÖs [activity settings](/graph/connecting-external-content-manage-connections), Copilot will become aware when users share URLs to your content with one another. When users share an item with one another, Copilot will boost its importance for including the item in its response.
+2. Provide a rich human-readable name and detailed description when you [create the connection](/graph/api/externalconnectors-external-post-connections). This helps Copilot understand what the data source is, so it includes the data source in its response if itΓÇÖs relevant.
+3. Apply [semantic labels](/graph/connecting-external-content-manage-schema). Semantic labels help Copilot understand the semantic meaning of your schema. You must apply as many of them to your schema as applicable.
+4. Add [user activities](/graph/api/externalconnectors-externalitem-addactivities). In addition to adding your content `externalItems` to the Microsoft Graph, your connector should also add user activities around youΓÇÖre content. Supported activity types are shown [here](/graph/api/resources/externalconnectors-externalactivity). Items that have more activities are boosted in their importance.
+
+## See also
+
+* [Message extensions overview](~/messaging-extensions/what-are-messaging-extensions.md)
+* [Build message extension](~/get-started/build-message-extension.md)
+* [OpenAPI spec definition](https://spec.openapis.org/oas/v3.1.0)
+* [Graph connectors overview](https://developer.microsoft.com/graph/connectors)
+* [Our approach to responsible AI at Microsoft](https://www.microsoft.com/ai/our-approach?activetab=pivot1:primaryr5)
platform Build Basic Tab App https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/build-basic-tab-app.md
# Build your basic tab app
-Start Microsoft Teams app development with your first Teams tab app.
+Tabs are Teams-aware webpages embedded in Microsoft Teams. You can add them as part of a channel inside a team, group chat, or personal app for an individual user. Start Microsoft Teams app development with your first Teams tab app.
:::image type="content" border="false" source="../assets/images/get-started/get-started-tab.png" alt-text="Screenshot shows you the conceptual tab app in Teams client.":::
platform Choose What Suits You https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/choose-what-suits-you.md
You've built your first tab app, notification bot, and message extension. You ca
A Teams app offers you the flexibility of choosing your build environment. It includes tools, framework, and languages to approach your app development. Build your Teams app in the environment that's best suited for your app. You can even select a combination. For example, you can use Teams Toolkit to build an app with JavaScript and host it on a SharePoint site.
-This section takes you through the various options that you've for building your Teams app as per your requirements.
+This section takes you through the various options that you have for building your Teams app.
* [Teams collaborative platform](#teams-collaborative-platform) * [Tools and SDKs](#tools-and-sdks)
You can use various tools and services to build your app. An example development
You can build your Microsoft Teams app with the help of the following tools and SDKs. To start building your Teams app, you can select the tools and SDKs based on your app requirements:
To start building your Teams app, you can select the tools and SDKs based on you
**Example scenario**: If you want to build a social media dashboard app that sends notifications using TypeScript, consider the following scenario: ### Explore SDKs You can also create and build your Teams app with various SDKs. Teams supports all the SDKs shown in the following image and you can choose SDKs based on your requirements: ### Explore Tools
platform Get Started Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/get-started-overview.md
Let's get started with building apps for Microsoft Teams and beyond!
-Experience the Teams app with GitHub Codespaces or walk through the steps to build a basic, real-world Teams app. The Get started also introduces you to the common tools, fundamental concepts, and more advanced functionalities.
+Use GitHub Codespaces or walk through the step-by-step guide to build a basic, real-world Teams app. The Get started module introduces you to common tools, fundamental concepts, and more advanced functionalities.
Here's an idea of what you'll learn:
Here's an idea of what you'll learn:
## Build your first Teams app
-In this section, learn how to build Teams app with different capabilities, such as tab, scenario-based bot app, and message extension.
+In this section, learn more on how to build Teams app with different capabilities, such as tab, scenario-based bot app, and message extension.
1. Select the type of Teams app that you want to build:
platform Extend M365 Teams Message Extension https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/extend-m365-teams-message-extension.md
Alternately, you can use the ready-made Outlook-enabled app in the following sec
To start with a [sample message extension](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2.1.0/NPM-search-connector-M365) that's already enabled to run in Outlook, use Teams Toolkit extension for Visual Studio Code.
-1. Open your app project in **Visual Studio Code**.
+1. Open **Visual Studio Code**.
1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. 1. Select **Teams: Create a New App**. 1. From the dropdown list that appears, select **Message Extension**.
To start with a [sample message extension](https://github.com/OfficeDev/TeamsFx-
1. Select preferred programming language. 1. Select a location on your local machine for the workspace folder and enter your application name. 1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**.
-1. Enter **Teams: Provision**, to create the Teams app. Few resources under **Teams: Provision** such as Azure App Service, App Service plan, Azure Bot, and Managed Identity in your Azure account.
+1. Enter **Teams: Provision** to create the relevant app resources, such as Azure App Service, App Service plan, Azure Bot, and Managed Identity, in your Azure account.
1. Select a subscription and a resource group.
-1. Select **Provision**. Alternatively, you can select **Provision** under **LIFECYCLE** section.
+1. Select **Provision**. Alternatively, you can select **Provision** under the **LIFECYCLE** section of the extension.
1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**.
-1. Enter **Teams: Deploy** to deploy the sample code to the provisioned resources in Azure and start the app. Alternatively, you can select **Deploy** under **LIFECYCLE** section.
+1. Enter **Teams: Deploy** to deploy the sample code to the provisioned resources in Azure and start the app. Alternatively, you can select **Deploy** under **LIFECYCLE** section of the extension.
1. Select **Deploy**. From here, you can skip ahead to [Add Microsoft 365 channel for your bot](#add-microsoft-365-channel-for-your-bot) to complete the final step of enabling the Teams message extension to work in Outlook. (The app manifest is already referencing the correct version, so no updates are necessary).
Azure Active Directory (AD) single sign-on (SSO) for message extensions works th
The final step is to sideload your updated message extension ([app package](/microsoftteams/platform/concepts/build-and-test/apps-package)) into Teams. After you complete, message extension appears in your installed *Apps* from the compose message area.
-1. Package your Teams application (manifest and app [icons](/microsoftteams/platform/resources/schema/manifest-schema#icons)) in a zip file. If you use Teams Toolkit to create your app, you can easily do this using the **Zip Teams App Package** option in the **UTILITY** section of Teams Toolkit. Select the `manifest.json` file for your app and the appropriate environment.
+1. Package your Teams application (manifest and app [icons](/microsoftteams/platform/resources/schema/manifest-schema#icons)) in a zip file. If you used Teams Toolkit to create your app, you can easily do this using the **Zip Teams App Package** option in the **UTILITY** section of Teams Toolkit. Select the `manifest.json` file for your app and the appropriate environment.
:::image type="content" source="images/toolkit-zip-teams-app-package.png" alt-text="The screenshot is an example that shows Zip Teams metadata package option in Teams Toolkit extension for Visual Studio Code.":::
The final step is to sideload your updated message extension ([app package](/mic
1. Select **Apps** to open the **Manage your apps** pane. Then select **Upload an app**.
- :::image type="content" source="~/assets/images/teams-manage-your-apps.png" alt-text="The screenshot is an example that shows the Upload an app option.":::
+ :::image type="content" source="images/teams-manage-your-apps.png" alt-text="The screenshot is an example that shows the Upload an app option.":::
1. Choose the **Upload a custom app** option, select your app package, and install (**Add**) it to your Teams client.
- :::image type="content" source="~/assets/images/teams-upload-custom-app.png" alt-text="The screenshot is an example that shows the Upload a customized app option in Teams.":::
+ :::image type="content" source="images/teams-upload-custom-app.png" alt-text="The screenshot is an example that shows the Upload a customized app option in Teams.":::
After it's sideloaded through Teams, your message extension is available in Outlook for Windows desktop and web.
To preview your app running in Outlook on the web:
1. Select **New message**. 1. Select **Apps** on the ribbon.
- :::image type="content" source="~/m365-apps/images/outlook-web-compose-more-apps.png" alt-text="The screenshot is an example that shows the 'Apps' menu on the ribbon of the mail composition window to launch your message extension.":::
+ :::image type="content" source="images/outlook-web-compose-more-apps.png" alt-text="The screenshot is an example that shows the 'Apps' menu on the ribbon of the mail composition window to launch your message extension.":::
Your message extension is listed. You can invoke it from there and use it just as you would while composing a message in Teams.
To preview your app running in Outlook on Windows desktop:
1. Select **New Email**. 1. Select **All Apps** on the ribbon.
- :::image type="content" source="~/m365-apps/images/outlook-desktop-compose-more-apps.png" alt-text="The screenshot is an example that shows the 'All Apps' menu on the ribbon of the composition window to launch your message extension.":::
+ :::image type="content" source="images/outlook-desktop-compose-more-apps.png" alt-text="The screenshot is an example that shows the 'All Apps' menu on the ribbon of the composition window to launch your message extension.":::
Your message extension is listed, it opens an adjacent pane to display search results.
Use the [Microsoft Teams developer community channels](/microsoftteams/platform/
### Debugging
-As you test your message extension, you can identify the source (originating from Teams versus Outlook) of bot requests by the [channelId](<https://github.com/MicrosFrom> Teams Toolkitoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#channel-id) of the [Activity](https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md) object. When a user performs a query, your service receives a standard Bot Framework `Activity` object. One of the properties in the Activity object is `channelId`, which has the value of `msteams` or `outlook`, depending on where the bot request originates. For more information, see [search based message extensions SDK](/microsoftteams/platform/resources/messaging-extension-v3/search-extensions).
+As you test your message extension, you can identify the source (originating from Teams versus Outlook) of bot requests by the [channelId](https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#channel-id) of the [Activity](https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md) object. When a user performs a query, your service receives a standard Bot Framework `Activity` object. One of the properties in the Activity object is `channelId`, which has the value of `msteams` or `outlook`, depending on where the bot request originates. For more information, see [search based message extensions SDK](/microsoftteams/platform/resources/messaging-extension-v3/search-extensions).
## Code sample
platform Extend M365 Teams Personal Tab https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/extend-m365-teams-personal-tab.md
ms.localizationpriority: medium
# Extend a Teams personal tab across Microsoft 365
-Personal tabs provide a great way to enhance the Microsoft Teams experience. Using personal tabs, you can provide a user access to their application right within Teams, without the user having to leave the experience or sign in again. With this preview, personal tabs can light up within other Microsoft 365 applications too. This tutorial demonstrates the process of taking an existing Teams personal tab and updating it to run in both Outlook and Microsoft 365 app desktop and web experiences, and Microsoft 365 for Android app.
+Personal tabs provide a great way to enhance the Microsoft Teams experience. Using personal tabs, you can provide a user access to their application right within Teams, without the user having to leave the experience or sign in again. With this preview, personal tabs can light up within other Microsoft 365 applications too. This tutorial demonstrates the process of taking an existing Teams personal tab and updating it to run in both Outlook and Microsoft 365 app (desktop and web experiences), and the Microsoft 365 for Android app too.
-Updating your personal app to run in Outlook and Microsoft 365 app involves these steps:
+Updating your Teams personal app to run in other Microsoft 365 applications involves these steps:
> [!div class="checklist"] >
Alternately, you can use a basic single sign-on (SSO) **hello world** app that's
To start with a personal tab that's already enabled to run in Teams, Outlook, and Microsoft 365 app, you can use Teams Toolkit extension for Visual Studio Code.
-1. Open your app project in **Visual Studio Code**.
+1. Open **Visual Studio Code**.
1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. 1. Select **Teams: Create a New App**. 1. Select the **Tab** option.
To start with a personal tab that's already enabled to run in Teams, Outlook, an
1. Select a location on your local machine for the workspace folder and enter your application name. 1. Once your app has been created, within the Teams Toolkit extension, make sure you're signed in to the appropriate Microsoft 365 Developer Program sandbox tenant and Azure account. These options can be found within the **ACCOUNTS** section of the extension. 1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**.
-1. Enter **Teams: Provision**, to create the Teams app resources such as Azure App Service, App Service plan, Azure Bot, and Managed Identity in your Azure account. Alternatively, you can select **Provision** under **LIFECYCLE** section.
+1. Enter **Teams: Provision** to create the relevant app resources, such as Azure App Service, App Service plan, Azure Bot, and Managed Identity, in your Azure account. Alternatively, you can select **Provision** under the **LIFECYCLE** section of the extension.
1. Select a subscription and a resource group. If you choose to create a new resource group, you'll need to specify the Location. 1. Select **Provision**. 1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**.
-1. Enter **Teams: Deploy** to deploy the sample code to the provisioned resources in Azure and start the app. Alternatively, you can select **Deploy** under **LIFECYCLE** section.
+1. Enter **Teams: Deploy** to deploy the sample code to the provisioned resources in Azure and start the app. Alternatively, you can select **Deploy** under the **LIFECYCLE** section of the extension.
1. Select **Deploy**. From here, you can skip ahead to [sideload your app in Teams](#sideload-your-app-in-teams) and preview your app in Outlook and the Microsoft 365 app. (The app manifest and TeamsJS API calls have already been updated for Microsoft 365 app.)
If you used Teams Toolkit to create your personal app, you can also use it to va
## Update TeamsJS references
-To run in Outlook and Microsoft 365 app, your app needs to refer to the npm package `@microsoft/teams-js@2.0.0` (or higher). While code with downlevel versions is supported in Outlook and Microsoft 365 app, deprecation warnings are logged, and support for downlevel versions of TeamsJS in Outlook and Microsoft 365 app are eventually ceased. To determine the latest version of TeamsJS, see [TeamsJS GitHub repository](https://github.com/OfficeDev/microsoft-teams-library-js).
+To run in Outlook and Microsoft 365 app, your app needs to refer to the npm package `@microsoft/teams-js@2.0.0` (or higher). While code with downlevel versions is supported in Outlook and Microsoft 365 app, deprecation warnings are logged, and support for downlevel versions of TeamsJS in Outlook and Microsoft 365 app will eventually cease. To determine the latest version of TeamsJS, see [TeamsJS GitHub repository](https://github.com/OfficeDev/microsoft-teams-library-js).
You can use Teams Toolkit to help identify and automate the required code changes to upgrade from 1.x TeamsJS versions to TeamsJS 2.x.x versions. Alternately, you can perform the same steps manually; refer to [TeamsJS library](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx) for details.
Upon completion, your *package.json* file references `@microsoft/teams-js@2.0.0`
> [!div class="checklist"] >
-> * Import statements for <teams-js@2.x.x>
-> * [Function, Enum, and Interface calls](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx) for <teams-js@2.x.x>
+> * Import statements for `teams-js@2.x.x`
+> * [Function, Enum, and Interface calls](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx) for `teams-js@2.x.x`
> * `TODO` comment reminders flagging areas that might be impacted by [Context](../tabs/how-to/using-teams-client-library.md#updates-to-the-context-interface) interface changes > * `TODO` comment reminders to [convert callback functions to promises](../tabs/how-to/using-teams-client-library.md#callbacks-converted-to-promises)
The final step to running your app in Microsoft 365 and Outlook is to sideload y
1. Select **Apps** to open the **Manage your apps** pane. Then select **Upload an app**.
- :::image type="content" source="~/assets/images/teams-manage-your-apps.png" alt-text="The screenshot is an example that shows the Manage your apps pane and Publish an app options.":::
+ :::image type="content" source="images/teams-manage-your-apps.png" alt-text="The screenshot is an example that shows the Manage your apps pane and Publish an app options.":::
1. Choose the **Upload a custom app** option and select your app package.
- :::image type="content" source="~/assets/images/teams-upload-custom-app.png" alt-text="The screenshot is an example that shows the option to upload am app in Teams.":::
+ :::image type="content" source="images/teams-upload-custom-app.png" alt-text="The screenshot is an example that shows the option to upload am app in Teams.":::
After it's sideloaded to Teams, your personal tab is available in Outlook and Microsoft 365 app. You must sign in with the same credentials that you used to sideload your app into Teams. When running the Microsoft 365 for Android app, you need to restart the app to use your personal tab app from the Microsoft 365 app.
Use the [Microsoft Teams developer community channels](/microsoftteams/platform/
### Debugging
-From Teams Toolkit, you can Debug (**F5**) your tab application running in Teams, and Microsoft 365 app and Outlook.
+From Visual Studio code with Teams Toolkit, you can Debug (**F5**) your tab application running in Teams, Microsoft 365 app, and Outlook.
:::image type="content" source="images/toolkit-debug-targets.png" alt-text="The screenshot is an example that shows the dropdown menu of debug in Teams in the Teams Toolkit.":::
To debug your app in Outlook for Android:
:::image type="content" source="images/office-android-debug.png" alt-text="The screenshot is an example that shows the list of webviews in devtool.":::
-1. Debug your tab app within the Android WebView. In the same way, [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device.
+1. Debug your tab app within the Android WebView in the same way that you [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device.
##### Debugging Microsoft 365 for Android Teams Toolkit (`F5`) debugging isn't yet supported with Microsoft 365 for Android app. Here's how to remotely debug your app running in Microsoft 365 for Android app:
-1. If you debug using a physical Android device, connect it to your dev machine and enable the option for [USB debugging](https://developer.android.com/studio/debug/dev-options). This function is enabled by default with the Android emulator.
+1. If you debug using a physical Android device, connect it to your dev machine and enable the option for [USB debugging](https://developer.android.com/studio/debug/dev-options). This option is enabled by default with the Android emulator.
1. Launch the Microsoft 365 app From your Android device. 1. Open your profile **Me > Settings > Allow debugging**, and toggle on the option for **Enable remote debugging**.
Teams Toolkit (`F5`) debugging isn't yet supported with Microsoft 365 for Androi
:::image type="content" source="images/office-android-debug.png" alt-text="The screenshot is an example that shows the list of webviews in devtool.":::
-1. Debug your tab app within the Android WebView. In the same way, [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device.
+1. Debug your tab app within the Android WebView in the same way that you [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device.
## Code sample
platform Messaging Extension Design https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/design/messaging-extension-design.md
The following examples show how to add a message extension in a channel.
### Desktop ## Set up a message extension
For consistency across Teams apps, you can't customize the sign-in screen. If yo
### Desktop ## Types of message extensions
With search commands, people can use your message extension to quickly find exte
#### Desktop #### Compose box layout options You have some options for displaying message extension search results, including [list and grid views](../../messaging-extensions/how-to/search-commands/respond-to-search.md#respond-to-user-requests). ### Action commands
Once added, users can open your message extension by selecting your app icon bel
#### Desktop ### From a chat message or channel post
Once added, users can select the **More** :::image type="icon" source="../../ass
#### Chat message #### Channel post ## Use a message extension
The following scenarios show the primary ways people use message extensions.
#### Desktop **2. Insert content**. Once posted, others can reply or select the content to see more information in your app.
The following scenarios show the primary ways people use message extensions.
#### Desktop ### Take action on a message **1. Select a message extension**. Your app can include one or more action commands. **2. Complete the action**. Your app can receive and process any content or data sent by the message action. Users complete the action in your app while remaining in their conversation. ### Preview links
Message extensions also allow you to insert rich links from a recognized URL int
#### Desktop **2. Insert content**. If your app recognizes the URL in the compose box, it renders the link as a card that provides a content-rich preview of the web content. (See [Adaptive Cards design guidelines](../../task-modules-and-cards/cards/design-effective-cards.md) for more information.)
Message extensions also allow you to insert rich links from a recognized URL int
#### Desktop ## Manage a message extension
The following examples show a message extension opened from the compose box.
#### Desktop |Counter|Description| |-|--|
The following examples show a message extension opened from the compose box.
### Message extension management menu |Counter|Description| |-|--|
platform Overview Solution https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview-solution.md
Teams offers these and many more capabilities to bring your users a feature-rich
Choose to customize your app with functionalities, such as user authentication and tools, such as Microsoft Graph and Developer Portal.
-Lets go through Teams Developer Documentation based on your requirement for building Teams app:
+Let's go through Teams Developer Documentation based on your requirements for building a Teams app:
| What do you want? | Where to go | | --| --|
platform Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview.md
Let's look at some areas where an app helps to meet a business need.
| | | | - Desktop app <br> - Web app <br> - Mobile app | - Increase user engagements <br> - Make your app discoverable on Teams store | | **Customer benefits** | **Internal workflows** |
-| - On-the-go accessibility <br> - Secure customer data <br> - Ease of communication | - Automate repetitive tasks <br> - Simplify tasks with bots, such as Q&A and help-desk |
+| - On-the-go accessibility <br> - Secure customer data <br> - Ease of communication | - Automate repetitive tasks <br> - Simplify tasks with bots, such as Q&A and helpdesk |
You can build apps with Teams platform by extending app capabilities to fit your needs. Create something brand new for Teams or integrate an existing app.
Teams apps help your collaborative workspace to be more productive by bringing k
The benefits of building apps span from meeting organizational goals to increasing internal productivity.
-Here's why Teams is best-suited for your app needs:
+Here's why Teams is best suited for your app needs:
* **Communication and collaboration**
Here's why Teams is best-suited for your app needs:
If you've got an existing web app, SharePoint site (or SPFx extension), PowerApp, or other web-based application, it may make sense to enable some or all of it in Teams. Extending existing apps and porting interactive functionalities to Teams helps to grow user base and user engagement for your app.
- :::image type="content" border="false" source="../msteams-platform/assets/images/overview/scenario-dashboard.png" alt-text="Screenshot shows you the sharePoint site ported as a Teams tab.":::
+ :::image type="content" border="false" source="../msteams-platform/assets/images/overview/scenario-dashboard.png" alt-text="Screenshot shows you the SharePoint site ported as a Teams tab.":::
* **Teams store advantage**
platform Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/design/tabs.md
Users can access tabs by selecting the **More** button in the channel (example b
The following example shows how users can add a tab in a channel. ## Set up a tab
There's a short setup process to add an app as a channel, chat, or meeting tab.
### Tab configuration dialog #### Anatomy: Tab configuration dialog
You can add a step in which users must first sign in with their Microsoft creden
#### Desktop #### Mobile
Tabs provide a full-screen web experience in Teams where you can display collabo
### Desktop ### Anatomy: Tab
Tabs provide a full-screen web experience in Teams where you can display collabo
#### Desktop |Counter|Description| |-|--|
Users can automatically post to a channel or chat once theyΓÇÖve added a new tab
#### Desktop ### Tab chat
Users can have a conversation next to the tab content they're viewing. On deskto
#### Desktop ### Permissions and role-based views
You can include options to rename, remove, or modify a tab.
#### Desktop |Counter|Description| |-|--|
If you donΓÇÖt use Teams color tokens, your designs will be less scalable and ta
:::image type="content" source="~/assets/images/tabs/mobile-tab-best-practices.png" alt-text="Illustration shows the best practices to follow when using mobile tab app."::: - ## See also [Tab margin changes](~/resources/removing-tab-margins.md)
platform Build Adaptive Card Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/build-adaptive-card-tabs.md
When developing a tab using the traditional method, you might run into these iss
* iFrame constraints * Server maintenance and costs
-Adaptive Card tabs are a new way to build tabs in Teams. Instead of embedding web content in an iFrame, you can render Adaptive Cards to a tab. While the front end is rendered with Adaptive Cards, the backend is powered by a bot. The bot is responsible for accepting requests and responding appropriately with the Adaptive Card that is rendered.
+You can build Adaptive Card tabs in Teams. Instead of embedding web content in an iFrame, you can render Adaptive Cards to a tab. While the front end is rendered with Adaptive Cards, the backend is powered by a bot. The bot is responsible for accepting requests and responding appropriately with the Adaptive Card that is rendered.
You can build your tabs with ready-made user interface (UI) building blocks native on desktop, web, and mobile. This article helps you understand the changes required to be made to the app manifest. The article also identifies how the invoke activity requests and sends information in tab with Adaptive Cards, and its effect on the task module workflow.
platform What Are Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/what-are-tabs.md
Title: Microsoft Teams tabs
-description: Learn to build tabs, webpages embedded in Microsoft Teams. Create a content page as part of personal, channel, or group tab. Also, learn to build tabs with Adaptive Cards.
+description: Learn to build tabs, webpages embedded in Microsoft Teams. Create a content page as part of personal, channel, or group tab.
ms.localizationpriority: high
platform Design Effective Cards https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/design-effective-cards.md
An Adaptive Card contains a freeform body of card elements and optional set of a
The Adaptive Card framework is used across many Microsoft products, including Teams. You can send cards inside messages to users via bots or message extensions. Users can also take actions on cards when present. ## Microsoft Teams UI Kit
Use for sending a simple actionable message.
#### Desktop ### List
Use in scenarios where you want the user to pick an item from a list, but the it
#### Desktop ### Digest
Use for news digests and round-up posts. Note: We recommend the thumbnail card f
#### Desktop ### Media
Use when you want to combine text and media, like audio or video.
#### Desktop ### People
Best used when you to efficiently convey who's involved with a task.
#### Desktop ### Request ticket
Use to get quick inputs from a user to automatically create a task or ticket.
#### Desktop ### ImageSet
Use when you want to the user to select a button, then gather addition user inpu
#### Desktop ### ChoiceSet
Use to gather multiple inputs from the user.
#### Desktop ## Anatomy
platform Design Teams Task Modules https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/task-modules/design-teams-task-modules.md
You can create modal pop-up experiences in your Teams app with task modules. Use this capability to display rich media and information or complete a complex task. ## Microsoft Teams UI Kit
Lists work nicely in a task module because they're easy to scan.
#### Desktop ### Form
Create a focused sign in or sign up flow with a series of task modules, letting
#### Desktop ### Media
Embed media content in a task module for a focused viewing experience.
#### Desktop ### Empty state
Use for welcome, error, and success messages.
#### Desktop ### Image gallery
Embed a gallery carousel in an iframe (desktop) or webview (mobile).
##### Desktop ### Poll
This example shows poll results launched from an Adaptive Card. The poll can be
#### Desktop ## Best practices
platform Faq https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/faq.md
Last updated 11/29/2021
> > [Teams Toolkit v4](toolkit-v4/teams-toolkit-fundamentals-v4.md) extension will soon be deprecated.
-You can see the FAQ for all the sections of Teams Toolkit for Visual Studio Code.
-
-FAQ for [Provision cloud resources using Teams Toolkit](provision.md)
+Following are the FAQs for [Provision cloud resources using Teams Toolkit](provision.md):
<br>
platform Install Teams Toolkit https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/install-Teams-Toolkit.md
You can install Teams Toolkit using **Extensions** in Visual Studio Code, or ins
Visual Studio Code opens with the Teams Toolkit extension page.
- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc_1.png" alt-text="Screenshot shows how to select Teams Toolkit in Visual Studio Code." lightbox="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc_1.png":::
+ :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc_1.png" alt-text="Screenshot shows how to select Teams Toolkit in Visual Studio Code." lightbox="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc_2.png":::
1. Select **Install**.
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md
Discover Microsoft Teams platform features that are generally available (GA). Yo
| **Date** | **Update** | **Find here** | | -- | | -|
+| 23/05/2023 | Design your app for new Teams. | Design your app > [Overview](concepts/design/design-teams-app-overview.md)|
|17/05/2023 | Distribute your app to specific countries. | Distribute your app > Publish to the Teams store > Prepare your Teams store submission > [Distribute your app to specific countries](concepts/deploy-and-publish/appsource/prepare/submission-checklist.md#distribute-your-app-to-specific-countries)| | 17/05/2023 | Introduced the Teams Toolkit v5 extension within Visual Studio Code. | Tools and SDKs > Teams Toolkit > [Teams Toolkit Overview](toolkit/teams-toolkit-fundamentals.md)| | 17/05/2023 | Updated Get started module with GitHub Codespaces and step-by-step guides aligned with Teams Toolkit v5. It also includes details for extending Teams app over Microsoft 365 and Outlook. | [Get started](get-started/get-started-overview.md)|
Explore updates from the previous GA releases listed here.
Discover Microsoft Teams platform features that are in developer preview. You can now get latest Teams platform updates by subscribing to the RSS feed [![download feed](~/assets/images/RSSfeeds.png)](https://aka.ms/TeamsPlatformUpdates). For more information, see [configure RSS feed](#get-latest-updates).
+## Microsoft Build 2023 :::image type="icon" source="assets/images/bullhorn.png" border="false"
+
+| **Date** | **Update** | **Find here** |
+| -- | | -|
+|23/05/2023 | Introduced Teams AI library to help build AI-powered Teams apps. | Build Bots > [Teams AI library](bots/how-to/Teams%20conversational%20AI/teams-conversation-ai-overview.md)|
+|23/05/2023| Extend Microsoft 365 Copilot| [Extend Microsoft 365 Copilot](copilot/how-to-extend-copilot.md)|
+ ## Developer preview :::row:::
Developer preview is a public program that provides early access to unreleased T
**2023 January**
-* ***January 31, 2023***: [Introducing Targeted in-meeting notification for apps in Teams.](apps-in-teams-meetings/in-meeting-notification-for-meeting.md#targeted-in-meeting-notification)
+* ***January 31, 2023***: [Introduced Targeted in-meeting notification for apps in Teams.](apps-in-teams-meetings/in-meeting-notification-for-meeting.md#targeted-in-meeting-notification)
* ***January 30, 2023***: [Enable app caching to improve subsequent launch time of the apps to the meeting side panel.](apps-in-teams-meetings/build-tabs-for-meeting.md#app-caching) :::column-end:::