-You can send and receive messages using the Bot Framework. The app listens for the user to send a message , and when it receives this message, it deletes the conversation state and sends a message back to the user. The app also keeps track of the number of messages received in a conversation and echoes back the userΓÇÖs message with a count of messages received so far.

-# [C#](#tab/dotnet6)

-* [Code sample](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/01.messaging.echoBot)

-* [Sample code reference](https://github.com/microsoft/teams-ai/blob/main/dotnet/samples/01.messaging.echoBot/Program.cs#L49)

-```csharp

- // Listen for user to say "/reset" and then delete conversation state

- app.OnMessage("/reset", ActivityHandlers.ResetMessageHandler);

- // Listen for ANY message to be received. MUST BE AFTER ANY OTHER MESSAGE HANDLERS

- app.OnActivity(ActivityTypes.Message, ActivityHandlers.MessageHandler);

- return app;

-# [C#](#tab/dotnet5)

-* [Code sample](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/02.messageExtensions.a.searchCommand)

-* [Sample code reference](https://github.com/microsoft/teams-ai/blob/main/dotnet/samples/02.messageExtensions.a.searchCommand/Program.cs#L47)

-* [Search results reference](https://github.com/microsoft/teams-ai/blob/main/dotnet/samples/02.messageExtensions.a.searchCommand/ActivityHandlers.cs#L39)

-```csharp

-// Listen for search actions

- app.MessageExtensions.OnQuery("searchCmd", activityHandlers.QueryHandler);

- // Listen for item tap

- app.MessageExtensions.OnSelectItem(activityHandlers.SelectItemHandler);

- return app;

- // Format search results in ActivityHandlers.cs

- List<MessagingExtensionAttachment> attachments = packages.Select(package => new MessagingExtensionAttachment

- {

- ContentType = HeroCard.ContentType,

- Content = new HeroCard

- {

- Title = package.Id,

- Text = package.Description

- },

- Preview = new HeroCard

- {

- Title = package.Id,

- Text = package.Description,

- Tap = new CardAction

- {

- Type = "invoke",

- Value = package

- }

- }.ToAttachment()

- }).ToList();

- // Return results as a list

- return new MessagingExtensionResult

- {

- Type = "result",

- AttachmentLayout = "list",

- Attachments = attachments

- };

-```

-## Adaptive Cards capabilities

-You can register Adaptive Card action handlers using theΓÇ»`app.adaptiveCards` property. The app listens for messages containing the keywords `static` or `dynamic` and returns an Adaptive Card using the `StaticMessageHandler` or `DynamicMessageHandler` methods. The app also listens for queries from a dynamic search card, submit buttons on the Adaptive Cards.

-# [C#](#tab/dotnet4)

-* [Code sample](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/03.adaptiveCards.a.typeAheadBot)

-* [Sample code reference](https://github.com/microsoft/teams-ai/blob/main/dotnet/samples/03.adaptiveCards.a.typeAheadBot/Program.cs#L52)

-```csharp

-// Listen for messages that trigger returning an adaptive card

- app.OnMessage(new Regex(@"static", RegexOptions.IgnoreCase), activityHandlers.StaticMessageHandler);

- app.OnMessage(new Regex(@"dynamic", RegexOptions.IgnoreCase), activityHandlers.DynamicMessageHandler);

- // Listen for query from dynamic search card

- app.AdaptiveCards.OnSearch("nugetpackages", activityHandlers.SearchHandler);

- // Listen for submit buttons

- app.AdaptiveCards.OnActionSubmit("StaticSubmit", activityHandlers.StaticSubmitHandler);

- app.AdaptiveCards.OnActionSubmit("DynamicSubmit", activityHandlers.DynamicSubmitHandler);

- // Listen for ANY message to be received. MUST BE AFTER ANY OTHER HANDLERS

- app.OnActivity(ActivityTypes.Message, activityHandlers.MessageHandler);

- return app;

-# [JavaScript](#tab/javascript3)

-* [Code sample](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#L93)

-```typescript

-// Create AI components

-const model = new OpenAIModel({

- // OpenAI Support

- apiKey: process.env.OPENAI_KEY!,

- defaultModel: 'gpt-3.5-turbo',

- // Azure OpenAI Support

- azureApiKey: process.env.AZURE_OPENAI_KEY!,

- azureDefaultDeployment: 'gpt-3.5-turbo',

- azureEndpoint: process.env.AZURE_OPENAI_ENDPOINT!,

- azureApiVersion: '2023-03-15-preview',

- // Request logging

- logRequests: true

-});

-const prompts = new PromptManager({

- promptsFolder: path.join(__dirname, '../src/prompts')

-});

-const planner = new ActionPlanner({

- model,

- prompts,

- defaultPrompt: 'sequence',

-});

-// Define storage and application

-const storage = new MemoryStorage();

-const app = new Application<ApplicationTurnState>({

- storage,

- ai: {

- planner

- }

-});

-// Define a prompt function for getting the current status of the lights

-planner.prompts.addFunction('getLightStatus', async (context: TurnContext, memory: Memory) => {

- return memory.getValue('conversation.lightsOn') ? 'on' : 'off';

-});

-// Register action handlers

-app.ai.action('LightsOn', async (context: TurnContext, state: ApplicationTurnState) => {

- state.conversation.lightsOn = true;

- await context.sendActivity(`[lights on]`);

- return `the lights are now on`;

-});

-app.ai.action('LightsOff', async (context: TurnContext, state: ApplicationTurnState) => {

- state.conversation.lightsOn = false;

- await context.sendActivity(`[lights off]`);

- return `the lights are now off`;

-});

-interface PauseParameters {

- time: number;

-}

-app.ai.action('Pause', async (context: TurnContext, state: ApplicationTurnState, parameters: PauseParameters) => {

- await context.sendActivity(`[pausing for ${parameters.time / 1000} seconds]`);

- await new Promise((resolve) => setTimeout(resolve, parameters.time));

- return `done pausing`;

-});

-```

-# [C#](#tab/dotnet3)

-### 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.

-# [JavaScript](#tab/javascript2)

-* [Code sample](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#L81)

-```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'

- };

-});

-# [C#](#tab/dotnet2)

-Thanks to our AI library, the prompt needs only to outline the actions supported by the bot, and supply a few-shot examples of how to employ those actions. Conversation history helps with a 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

-# [JavaScript](#tab/javascript1)

-* [Code sample](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#L154)

-```typescript

- app.ai.action('addItems', async (context: TurnContext, state: ApplicationTurnState, parameters: ListAndItems) => {

- const items = getItems(state, parameters.list);

- items.push(...(parameters.items ?? []));

- setItems(state, parameters.list, items);

- return `items added. think about your next action`;

- });

- app.ai.action('removeItems', async (context: TurnContext, state: ApplicationTurnState, parameters: ListAndItems) => {

- const items = getItems(state, parameters.list);

- (parameters.items ?? []).forEach((item: string) => {

- const index = items.indexOf(item);

- if (index >= 0) {

- items.splice(index, 1);

- }

- });

- setItems(state, parameters.list, items);

- return `items removed. think about your next action`;

- });

-```

-# [C#](#tab/dotnet1)

-# [C#](#tab/dotnet1)

-[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/dotnet/samples/04.ai.a.teamsChefBot/Program.cs)

-```csharp

-using Microsoft.Teams.AI;

-using Microsoft.Bot.Builder;

-using Microsoft.Bot.Builder.Integration.AspNet.Core;

-using Microsoft.Bot.Connector.Authentication;

-using Microsoft.TeamsFx.Conversation;

-var builder = WebApplication.CreateBuilder(args);

-builder.Services.AddControllers();

-builder.Services.AddHttpClient("WebClient", client => client.Timeout = TimeSpan.FromSeconds(600));

-builder.Services.AddHttpContextAccessor();

-// Prepare Configuration for ConfigurationBotFrameworkAuthentication

-var config = builder.Configuration.Get<ConfigOptions>();

-builder.Configuration["MicrosoftAppType"] = "MultiTenant";

-builder.Configuration["MicrosoftAppId"] = config.BOT_ID;

-builder.Configuration["MicrosoftAppPassword"] = config.BOT_PASSWORD;

-// Create the Bot Framework Authentication to be used with the Bot Adapter.

-builder.Services.AddSingleton<BotFrameworkAuthentication, ConfigurationBotFrameworkAuthentication>();

-// Create the Cloud Adapter with error handling enabled.

-// Note: some classes expect a BotAdapter and some expect a BotFrameworkHttpAdapter, so

-// register the same adapter instance for all types.

-builder.Services.AddSingleton<CloudAdapter, AdapterWithErrorHandler>();

-builder.Services.AddSingleton<IBotFrameworkHttpAdapter>(sp => sp.GetService<CloudAdapter>());

-builder.Services.AddSingleton<BotAdapter>(sp => sp.GetService<CloudAdapter>());

-# [JavaScript](#tab/javascript1)

-[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.a.teamsChefBot/src/index.ts#L82)

-```javascript

-/// Create AI components

-const model = new OpenAIModel({

- // OpenAI Support

- apiKey: process.env.OPENAI_KEY!,

- defaultModel: 'gpt-3.5-turbo',

- // Azure OpenAI Support

- azureApiKey: process.env.AZURE_OPENAI_KEY!,

- azureDefaultDeployment: 'gpt-3.5-turbo',

- azureEndpoint: process.env.AZURE_OPENAI_ENDPOINT!,

- azureApiVersion: '2023-03-15-preview',

- // Request logging

- logRequests: true

-});

-const prompts = new PromptManager({

- promptsFolder: path.join(__dirname, '../src/prompts')

-});

-const planner = new ActionPlanner({

- model,

- prompts,

- defaultPrompt: 'chat',

-});

-```

-# [C#](#tab/dotnet2)

-# [C#](#tab/dotnet3)

-[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/dotnet/samples/04.ai.c.actionMapping.lightBot/Program.cs#L99)

-```csharp

- return new TeamsLightBot(new()

- {

- Storage = sp.GetService<IStorage>(),

- AI = new(planner),

- LoggerFactory = loggerFactory,

- TurnStateFactory = () =>

- {

- return new AppState();

- }

- });

-`TurnStateFactory` allows you to create a custom state class for your application. You can use it to store additional information or logic that you need for your bot. You can also override some of the default properties of the turn state, such as the user input, the bot output, or the conversation history. To use `TurnStateFactory`, you need to create a class that extends the default turn state and pass a function that creates an instance of your class to the application constructor.

-* Provide quality data. Ensure that there are enough examples and proofread your examples. The model is 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.

-# [JavaScript](#tab/javascript2)

-[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/js/samples/04.ai.c.actionMapping.lightBot/src/index.ts#L133)

-```javascript

-// Register action handlers

-app.ai.action('LightsOn', async (context: TurnContext, state: ApplicationTurnState) => {

- state.conversation.lightsOn = true;

- await context.sendActivity(`[lights on]`);

- return `the lights are now on`;

-});

-app.ai.action('LightsOff', async (context: TurnContext, state: ApplicationTurnState) => {

- state.conversation.lightsOn = false;

- await context.sendActivity(`[lights off]`);

- return `the lights are now off`;

-});

-interface PauseParameters {

- time: number;

-}

-app.ai.action('Pause', async (context: TurnContext, state: ApplicationTurnState, parameters: PauseParameters) => {

- await context.sendActivity(`[pausing for ${parameters.time / 1000} seconds]`);

- await new Promise((resolve) => setTimeout(resolve, parameters.time));

- return `done pausing`;

-});

-```

-# [C#](#tab/dotnet4)

-Feedback loop allows the bot to validate and correct the output of the language model. It checks the structure and parameters of the plan or monologue that the model returns, and provides feedback on errors or missing information. The model then tries to fix its mistakes and returns a valid output. The feedback loop can improve the reliability and accuracy of the AI system, and reduce the chances of hallucination or invalid actions.

-|Type |Description |JavaScript|C#|

-|||||

-|OpenAIModel |The OpenAIModel class lets you call both OAI and Azure OAI with one single component. New models can be defined for other model types like LLaMA2. | ✔️ |✔️|

-|Embeddings | The OpenAIEmbeddings class lets you generate embeddings using either OAI or Azure OAI. New embeddings can be defined for things like OSS Embeddings. | ✔️ |❌|

-|Prompts | A new object-based prompt system enables better token management and reduces the likelihood of overflowing the model's context window. | ✔️ |✔️|

-| Augmentation | Augmentations simplify prompt engineering tasks by letting the developer add named augmentations to their prompt. Only `functions`, `sequence`, and `monologue` style augmentations are supported. | ✔️ |✔️|

-|Data Sources | A new DataSource plugin makes it easy to add RAG to any prompt. You can register a named data source with the planner and then specify the name[s] of the data sources they wish to augment the prompt. | ✔️ |❌|

-|Sample name | Description |.NET | Node.js |

-|-|--|--|--|

-|Echo bot| This sample shows how to incorporate a basic conversational flow into a Microsoft Teams application using Bot Framework and the Teams AI library. | [View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/01.messaging.echoBot) | [View](https://github.com/microsoft/teams-ai/tree/main/js/samples/01.messaging.a.echoBot) |

-|Message extensions: GPT-ME|This sample is a message extension (ME) for Microsoft Teams that uses the text-davinci-003 model to help users generate and update posts.|[View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/04.ai.b.messageExtensions.gptME)|[View](https://github.com/microsoft/teams-ai/tree/main/js/samples/04.ai.b.messageExtensions.AI-ME) |

-|Light bot|This sample illustrates more complex conversational bot behavior in Microsoft Teams. The bot is built to allow GPT to facilitate the conversation on its behalf and manually defined responses, and maps user intents to user defined actions.|[View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/04.ai.c.actionMapping.lightBot)|[View](https://github.com/microsoft/teams-ai/tree/main/js/samples/04.ai.c.actionMapping.lightBot) |

-## Code Sample

-* [Invoke Stageview through deep link](#invoke-stageview-through-deep-link)

-## Invoke Stageview through deep link

-To invoke the Stageview through deep link from your tab, you must wrap the deep link URL in the `app.openLink(url)` API. The deep link can also be passed through an `OpenURL` action in the card. For more information see, [Stageview](~/tabs/tabs-link-unfurling.md#invoke-stageview-through-deep-link).

-## Code Sample

-> Share to Teams isn't supported inside a [modal dialog](~/task-modules-and-cards/what-are-task-modules.md) (referred as task modules in TeamsJS v1.x) or [Stage View](~/tabs/tabs-link-unfurling.md#stageview) in Teams web client. You can't open a modal on top of another modal.

-| [Collaborative Stageview](../tabs/tabs-link-unfurling.md#collaborative-stageview) | Collaborative Stageview is an enhancement to Stageview that allows users to engage with your app content in a new Teams window. <br> **See also**: [Stageview](#s)|

-description: In this article, lean how to use micro-capability templates and schema.org metadata to unfurl rich previews for your links in Microsoft Teams.

-description: Learn about Stageview and Collaborative Stageview, a full screen UI component invoked to surface your web content. Link unfurling is used to turn URLs into a tab using Adaptive Cards.

-# Tabs link unfurling and Stageview

-Stageview is a user interface (UI) component that allows you to render content in a full screen within Teams or as a new window.

-> [!NOTE]

-> This article is based on Microsoft Teams JavaScript client library version 2.0.x. If you are using an earlier version, see [TeamsJS](how-to/using-teams-client-library.md) for guidance on the differences between the latest TeamsJS and earlier versions.

-<!--It allows users to maintain their context within their new window experience while continuing group chat conversation. <br> Developers have to enable Tab link Unfurling for their app to get Stageview update for free. Users are still able to pin the app content as a tab. It's a new entry point to pinning app content but it will not change the existing functionality of tabs or pinning.

-## Stageview

-Stageview is a full screen UI component that can be used to render your app content, providing users with a focused experience to engage with your app. Stageview can be invoked from either an Adaptive Card or a deep link, in both chats and channels.

-* When users invoke Stageview from Adaptive Cards, Stageview opens in a new Teams window along with the originating chat or channel thread in the side panel. This new app canvas is called the [Collaborative Stageview](#collaborative-stageview). The Collaborative Stageview allows users to multi-task and collaborate with each other.

-* The Collaborative Stageview surfaces the originating chat or thread from where it was invoked and helps the users to engage with content and conversation side-by-side.

-The following image is an example of the Collaborative Stageview:

-### Stageview vs. Dialog

-| Stageview | Dialog (referred as task module in TeamsJS v1.x)|

-|:--|:--|

-| Stageview is useful to display rich content to the users, such as a page, a dashboard, or a file. It provides rich features that help to render your content in the new pop-up window and the full-screen canvas. <br><br> After your app content opens in Stageview, users can choose to pin the content as a tab. <br><br> For more collaborative capabilities, opening your content in Collaborative Stageview (through an Adaptive Card) allows users to engage with content and conversation side-by-side, while enabling multi-window scenarios.| [Dialog](../task-modules-and-cards/task-modules/task-modules-tabs.md) is especially useful to display messages that need users' attention, or collect information required to move to the next step.|

-> [!WARNING]

-> Microsoft's cloud services, including web versions of Teams (*teams.microsoft.com*), Outlook (*outlook.com*), and Microsoft 365 (*microsoft365.com*) domains are migrating to the *cloud.microsoft* domain. Perform the following steps before June 2024 to ensure your app continues to render on the Teams web client:

->

-> 1. Update TeamsJS SDK to v.2.19.0 or higher. For more information about the latest release of TeamsJS SDK, see [Microsoft Teams JavaScript client library](https://www.npmjs.com/package/@microsoft/teams-js).

->

-> 2. Update your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers in your Teams app to allow your app to access the ***teams.cloud.microsoft*** domain. If your Teams app extends across Outlook and Microsoft 365, ensure you allow your app to access ***teams.cloud.microsoft***, ***outlook.cloud.microsoft***, and ***m365.cloud.microsoft*** domains.

-### Invoke Stageview through deep link

-To invoke the Stageview through deep link from your tab, you must wrap the deep link URL in the `app.openLink(url)` API. Stageview from a deep link always defaults to the modal experience (and not a Teams window). While the Stageview deep link can be passed through an `OpenURL` action in the card, the Stageview deep link is intended for the tab canvas. For Stageview from Adaptive Cards, it's recommended to follow the JSON [Adaptive Card example](#example).

-The following image is an example of Stageview when it's invoked from a deep link:

-#### Syntax

-Following is the deep link syntax for Stageview:

-`https://teams.microsoft.com/l/stage/{appId}/0?context={"contentUrl":"contentUrl","websiteUrl":"websiteUrl","name":"Contoso"}`

-#### Examples

-Following are the deep link examples to invoke Stageview:

-<br>

-<details>

-<summary><b>Example 1</b></summary>

-URL with threadId

-Unencoded URL:

-`https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous","threadId":"19:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2"}`

-Encoded URL:

-`https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%2C%22threadId%22%3A%2219:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2%22%7D`

-</details>

-<br>

-<details>

-<summary><b>Example 2</b></summary>

-URL without threadId

-Unencoded URL:

-`https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous"}`

-Encoded URL:

-`https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%7D`

-</details>

-<br>

-> [!NOTE]

->

-> * All deep links must be encoded before pasting the URL.The unencoded URLs aren't supported.

-> * The `name` property is optional in a deep link. If not included, the app name replaces it.

-> * The deep link can also be passed through an `OpenURL` action.

-> * When you launch a Stageview from a certain context, ensure that your app works in that context. For example, if the Stageview is launched from a personal app, you must ensure your app has a personal scope.

-## Collaborative Stageview

-> [!NOTE]

-> Collaborative Stageview isn't supported in Teams web and mobile clients.

-Collaborative Stageview is an enhancement to Stageview that allows users to engage with your app content in a new Teams window. When a user opens Collaborative Stageview from an Adaptive Card, the app content pops-out in a new Teams window instead of the default Stageview modal.

-In the new Teams window, the Collaborative Stageview also opens a chat in the side panel. The chat brings the conversation from the group chat or channel thread where the users' Adaptive Card is originally shared. Users can continue to collaborate directly within the new window.

-The following image is an example of Collaborative Stageview:

-### Advantages of Collaborative Stageview

-Collaborative Stageview helps unlock multi-tasking scenarios with your app content in Teams. Users can open and view your app content inside a new Teams window, while having meaningful conversation and collaboration from the same window. The ability to engage with content while also having a conversation on the content leads to higher user engagement for your app.

-|Feature |Notes |Desktop |Web |Mobile|

-| |:-- |:-- |:- |:-- |

-|Collaborative Stageview| Invoke from Adaptive Card action. |Chat or Channel: Opens Teams pop-out window with chat pane.| Opens Stageview modal. |Opens Stageview modal.|

-|Stageview |Invoke from Deep link. Only recommended when calling from your tab app, and not an Adaptive Card. |Opens Stageview modal.| Opens Stageview modal.| Opens Stageview modal.|

-### Invoke Collaborative Stageview from Adaptive Card

-When the user enters an app content URL in a chat, the bot is invoked and returns an Adaptive Card with the option to open the URL. Depending on the context and the usersΓÇÖ client, the URL opens in the appropriate Stageview UI. When the Collaborative Stageview is invoked from an Adaptive Card in a chat or channel (and not from a deep link), a new window opens.

-The following image is an example of a Collaborative Stageview from an Adaptive Card:

-#### Example

-The following is a JSON code example to create a Collaborative Stageview button in an Adaptive Card:

-```json

-{

- "type": "Action.Submit",

- "title": "Open",

- "data": {

- "msteams": {

- "type": "invoke",

- "value": {

- "type": "tab/tabInfoAction",

- "tabInfo": {

- "contentUrl": "contentUrl",

- "websiteUrl": "websiteUrl",

- "name": "Sales Report",

- "entityId": "entityId"

- }

- }

- }

- }

-}

-```

-The following steps show how to invoke Collaborative Stageview:

-* When the user shares a URL in a Teams chat, the bot receives an `composeExtensions/queryLink` invoke request. The bot returns an Adaptive Card with the type `tab/tabInfoAction`.

-* When the user selects the action button on the Adaptive Card, Collaborative Stageview opens based on the content in the Adaptive Card.

-> [!NOTE]

->

-> * Passing a Stageview deep link into an Adaptive Card doesn't open the Collaborative Stageview. A Stageview deep link always opens the Stageview Modal.

-> * Ensure that the URL of the content is within the list of `validDomains` in your app manifest.

-> * The invoke request type must be a `composeExtensions/queryLink`.

-> * `invoke` workflow is similar to the `appLinking` workflow.

-> * To maintain consistency, it is recommended to name `Action.Submit` as `Open`.

-> * `websiteUrl` is a required property to be passed in the `TabInfo` object.

-> * If you don't have an optimized mobile experience for Teams mobile client, the Stageview for apps distributed through the [Microsoft Teams Store](../concepts/deploy-and-publish/apps-publish-overview.md) opens in a default web browser. The browser opens the URL specified in the `websiteUrl` parameter of the `TabInfo` object.

-#### Query parameters

-| Property name | Type | Number of characters | Description |

-|:--|:|:|:--|

-| `entityId` | String | 64 | This property is a unique identifier for the entity that the tab displays and it's a required field.|

-| `name` | String | 128 | This property is the display name of the tab in the channel interface and it's an optional field.|

-| `contentUrl` | String | 2048 | This property is the `https://` URL that points to the entity UI to be displayed in the Teams canvas and it's a required field.|

-| `websiteUrl?` | String | 2048 | This property is the `https://` URL to point at, if a user selects to view in a browser and it's a required field.|

-| `removeUrl?` | String | 2048 | This property is the `https://` URL that points to the UI to be displayed when the user deletes the tab and it's an optional field.|

-## Code sample

-| Sample name | Description | .NET |Node.js| Manifest|

-|-|-||-|-|

-|Tab in Stageview |Microsoft Teams tab sample app for demonstrating tab in Stageview.|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-stage-view/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-stage-view/nodejs)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-stage-view/csharp/demo-manifest/tab-stage-view.zip)|

-## Next step

-> [!div class="nextstepaction"]

-> [Create conversational tabs](~/tabs/how-to/conversational-tabs.md)

-## See also

-* [Build tabs for Teams](what-are-tabs.md)

-* [Add link unfurling](../messaging-extensions/how-to/link-unfurling.md)

-* [Build tabs with Adaptive Cards](how-to/build-adaptive-card-tabs.md)

-* [Create deep links](../concepts/build-and-test/deep-links.md)

-* [Cards](../task-modules-and-cards/what-are-cards.md)

-* [App manifest schema for Teams](../resources/schem)

-> [!Note]

-> Teams app doesn't recognize sub iframes. Therefore, it'll not load if there is an iframe within the tab app.

-For static tabs you can pin a `contentUrl` to chat or meeting tabs. This allows you to skip the mandatory configuration dialog and get your users to use the app much faster. You can also change the `contentUrl` at runtime. This allows you to build one tab object that works in all surface areas of Teams. For more information, see [migrate your configurable tab to static tab.](~/tabs/how-to/create-channel-group-tab.md#migrate-your-configurable-tab-to-static-tab)

-</br>

-</br>

-</br>

-</br>

-</br>

-</br>

-</br>

-</br>

-</br>

-## Live share

-<details>

-<summary>Can I use my own Azure Fluid Relay service?</summary>

-Yes! When initializing Live Share, you can define your own `AzureConnectionConfig`. Live Share associates containers you create with meetings, but you need to implement the `ITokenProvider` interface to sign tokens for your containers. For example, you can use a provided `AzureFunctionTokenProvider`, which uses an Azure cloud function to request an access token from a server.

-While most of you find it beneficial to use our free hosted service, there might still be times where it's beneficial to use your own Azure Fluid Relay service for your Live Share app. Consider using a custom AFR service connection if you:

-* Require storage of data in Fluid containers beyond the lifetime of a meeting.

-* Transmit sensitive data through the service that requires a custom security policy.

-* Develop features through Fluid Framework, for example, `SharedMap`, for your application outside of Teams.

-For more information, see [how to guide](apps-in-teams-meetings/teams-live-share-how-to/how-to-custom-azure-fluid-relay.md) or visit the [Azure Fluid Relay documentation](/azure/azure-fluid-relay/).

-<br>

-&nbsp;

-</details>

-<details>

-<summary>How long is data stored in Live Share's hosted service accessible?</summary>

-Any data sent or stored through Fluid containers created by Live Share's hosted Azure Fluid Relay service is accessible for 24 hours. If you want to persist data beyond 24 hours, you can replace our hosted Azure Fluid Relay service with your own. Alternatively, you can use your own storage provider in parallel to Live Share's hosted service.

-<br>

-&nbsp;

-</details>

-<details>

-<summary>What meeting types does Live Share support?</summary>

-Live Share supports scheduled meetings, one-on-one calls, group calls, and meet now. Channel meetings aren't yet supported.

-<br>

-&nbsp;

-</details>

-<details>

-<summary>Will Live Share's media package work with DRM content?</summary>

-Live Share's media package work doesn't with DRM content. Currently, Teams doesn't support encrypted media for tab applications on desktop. Chrome, Edge, and mobile clients are supported.

-For more information, you can [track the issue here](https://github.com/microsoft/live-share-sdk/issues/14).

-<br>

-&nbsp;

-</details>

-<details>

-<summary>How many people can attend a Live Share session?</summary>

-Currently, Live Share supports a maximum of 100 attendees per session. If it's something you're interested in, you can [start a discussion here](https://github.com/microsoft/live-share-sdk/discussions).

-<br>

-&nbsp;

-</details>

-<details>

-<summary>Can I use Live Share's data structures outside of Teams?</summary>

-Currently, Live Share packages require the Teams Client SDK to function properly. Features in `@microsoft/live-share` or `@microsoft/live-share-media` don't work outside Microsoft Teams. If this is something you're interested in, you can [start a discussion here](https://github.com/microsoft/live-share-sdk/discussions).

-<br>

-&nbsp;

-</details>

-<details>

-<summary>Can I use multiple Fluid containers?</summary>

-Currently, Live Share only supports having one container using our provided Azure Fluid Relay service. However, it's possible to use both a Live Share container and a container created by your own Azure Fluid Relay instance.

-<br>

-&nbsp;

-</details>

-<details>

-<summary>Can I change my Fluid container schema after creating the container?</summary>

-Currently, Live Share doesn't support adding new `initialObjects` to the Fluid `ContainerSchema` after creating or joining a container. Because Live Share sessions are short-lived, this is most commonly an issue during development after adding new features to your app.

-> [!NOTE]

-> If you are using the `dynamicObjectTypes` property in the `ContainerSchema`, you can add new types at any point. If you later remove types from the schema, existing DDS instances of those types will gracefully fail.

-To fix errors resulting from changes to `initialObjects` when testing locally in your browser, remove the hashed container ID from your URL and reload the page. If you're testing in a Teams meeting, start a new meeting and try again.

-If you plan to update your app with new `SharedObject` or `LiveObject` instances frequently, you should consider how you deploy new schema changes to production. While the actual risk is relatively low and short lasting, there might be active sessions at the time you roll out the change. Existing users in the session shouldn't be impacted, but users joining that session after you deployed a breaking change might have issues connecting to the session. To mitigate this, you might consider some of the following solutions:

-* Deploy schema changes for your web application outside of normal business hours.

-* Use `dynamicObjectTypes` for any changes made to your schema, rather than changing `initialObjects`.

-> [!NOTE]

-> Live Share does not currently support versioning your `ContainerSchema`, nor does it have any APIs dedicated to migrations.

-<br>

-&nbsp;

-</details>

-<details>

-<summary>Are there limits to how many change events I can emit through Live Share?</summary>

-While Live Share is in Preview, any limit to events emitted through Live Share isn't enforced. For optimal performance, you must debounce changes emitted through `SharedObject` or `LiveObject` instances to one message per 50 milliseconds or more. This is especially important when sending changes based on mouse or touch coordinates, such as when synchronizing cursor positions, inking, and dragging objects around a page.

-<br>

-&nbsp;

-</details>

-<details>

-<summary>Is Live Share supported for Government Community Cloud (GCC), Government Community Cloud High (GCC-High), and Department of Defense (DOD) tenants?</summary>

-Live Share isn't supported for GCC, GCC-High, and DOD tenants.

-<br>

-</details>

-<details>

-<summary>Does Live Share support external and guest users?</summary>

-Yes, Live Share supports guest and external users for most meeting types. However, guest users aren't supported in channel meetings.

-<br>

-</details>

-<details>

-<summary>Does Live Share support Teams Rooms devices?</summary>

-No, Live Share doesn't support Teams Rooms devices.

-<br>

-</details>

-<details>

-<summary>Do Live Share apps support meeting recordings?</summary>

-No, Live Share doesn't support meeting recordings.

-<br>

-</details>

-<summary>How can I generate the access token using the endpoint oauth2/v2.0/token with grant type as "authorization_code"?</summary>

-***April 3, 2024***: [Updated the common reasons for app validation failure to help your app pass the Teams Store submission process.](concepts/deploy-and-publish/appsource/common-reasons-for-app-validation-failure.md)