-Live Share canvas has two primary classes that enable turn-key collaboration: `InkingManager` and `LiveCanvas`. `InkingManager` is responsible for attaching a fully-featured `<canvas>` element to your app, while `LiveCanvas` manages the remote synchronization with other meeting participants. Used together, your app can have complete whiteboard-like functionality in just a few lines of code.

-The laser pointer is unique as the tip of the laser has a trailing effect as you move your mouse. When you draw strokes, the trailing effect renders for a short period before it fades out completely. This tool is perfect to point out information on the screen during a meeting, as the presenter doesn't have to switch between tools to erase strokes.

-> Reference points, offsets, and scale levels are local to the client and aren't synchronized across meeting participants.

-The Live Share SDK can be added to your meeting extension's `sidePanel` and `meetingStage` contexts with minimal effort.

-The [Live Share SDK](https://github.com/microsoft/live-share-sdk) is a JavaScript package published on [npm](https://www.npmjs.com/package/@microsoft/live-share), and you can download through npm or yarn. You must also install Live Share peer dependencies, which include `fluid-framework` and `@fluidframework/azure-client`. If you're using Live Share in your tab application, you must also install `@microsoft/teams-js` version `2.11.0` or later. If you want to use the `TestLiveShareHost` class for local browser development, you must install `@fluidframework/test-client-utils` and `start-server-and-test` packages in your `devDependencies`.

-To enable the Live Share SDK for your meeting extension, you must first add the following RSC permissions into your app manifest:

- "meetingStage"

-## Join a meeting session

-Follow the steps to join a session that's associated with a user's meeting:

-import { LiveShareProvider, useLiveShareContext } from "@microsoft/live-share-react";

- // Create the host as React state so that it doesn't get reset on mount

- const [host] = useState(LiveShareHost.create());

- // Live Share for React does not require that you define a custom Fluid schema

- return (

- <LiveShareProvider host={host} joinOnLoad>

- <LiveShareLoading />

- </LiveShareProvider>

- );

-}

- // Any live-share-react hook (e.g., useLiveShareContext, useLiveState, etc.) must be a child of <LiveShareProvider>

- const { joined } = useLiveShareContext();

- if (joined) {

- return <p>{"Loading..."}</p>;

- }

- return <p>{"Your app here..."}</p>;

-}

-That's all it took to setup your container and join the meeting's session. Now, let's review the different types of _distributed data structures_ that you can use with the Live Share SDK.

-The Live Share SDK includes a set of new distributed-data structures that extend Fluid's `DataObject` class, providing new types of stateful and stateless objects. Unlike Fluid data structures, Live Share's `LiveDataObject` classes donΓÇÖt write changes to the Fluid container, enabling faster synchronization. Further, these classes were designed from the ground up for common meeting scenarios in Teams meetings. Common scenarios include synchronizing what content the presenter is viewing, displaying metadata for each user in the meeting, or displaying a countdown timer.

-| Live Object | Description |

-| | |

-| [LivePresence](/javascript/api/@microsoft/live-share/livepresence) | See which users are online, set custom properties for each user, and broadcast changes to their presence. |

-| [LiveState](/javascript/api/@microsoft/live-share/livestate) | Synchronize any JSON serializable `state` value. |

-| [LiveTimer](/javascript/api/@microsoft/live-share/livetimer) | Synchronize a countdown timer for a given interval. |

-| [LiveEvent](/javascript/api/@microsoft/live-share/liveevent) | Broadcast individual events with any custom data attributes in the payload. |

-| [LiveFollowMode](/javascript/api/@microsoft/live-share/livefollowmode) | Follow specific users, present to everyone in the session, and start or end suspensions. |

- console.log("A user presence changed:")

-Each `LivePresenceUser` and `LivePresenceConnection` instance has a `state` property, which can be either `online`, `offline`, or `away`. An `presenceChanged` event is emitted when a user's state changes. For example, if a user leaves a meeting, their state changes to `offline`.

-> It can take up to 20 seconds for an `LivePresenceUser`'s `state` to update to `offline` after leaving a meeting.

-The `LiveState` class enables synchronizing simple application state for everyone in a meeting. `LiveState` synchronizes a single `state` value, allowing you to synchronize any JSON serializable value, such as a `string`, `number`, or `object`.

- const [planet, setPlanet] = useLiveState(MY_UNIQUE_KEY, planets[0]);

- // Render UI

- return (

- <div>

- {`Current planet: ${planet}`}

- {'Select a planet below:'}

- {planets.map((planet) => (

- <button key={planet} onClick={() => {

- setPlanet(planet);

- }}>

- {planet}

- </button>

- ))}

- </div>

- );

-}

-`LiveEvent` is a great way to send simple events to other clients in a meeting that are only needed at the time of delivery. It's useful for scenarios like sending session notifications or implementing custom reactions.

-const emojis = [

- "❤️",

- "😂",

- "👍",

- "👎",

-];

- const {

- latestEvent,

- sendEvent,

- } = useLiveEvent(MY_UNIQUE_KEY);

- // Render UI

- return (

- <div>

- {`Latest event: ${latestEvent?.value}, from local user: ${latestEvent?.local}`}

- {'Select a planet below:'}

- {emojis.map((emoji) => (

- <button key={emoji} onClick={() => {

- sendEvent(emoji);

- }}>

- {emoji}

- </button>

- ))}

- </div>

- );

-}

-`LiveTimer` provides a simple countdown timer that is synchronized for all participants in a meeting. ItΓÇÖs useful for scenarios that have a time limit, such as a group meditation timer or a round timer for a game. You can also use it to schedule tasks for everyone in the session, such as displaying a reminder prompt.

- const { milliRemaining, timerConfig, start, pause, play } = useLiveTimer("TIMER-ID");

- { timerConfig === undefined ? "Start" : "Reset" }

- { timerConfig !== undefined && (

- {timerConfig.running ? "Pause" : "Play" }

- { milliRemaining !== undefined && (

- { `${Math.round(milliRemaining / 1000)} / ${Math.round(timerConfig.duration) / 1000}` }

-> [!NOTE]

-> `LiveFollowMode` is in Beta and provided as a preview only. Don't use this API in a production environment.

- console.log("- count of other users also following user", state.otherUsersCount);

- console.log("- state.value references local user's stateValue", state.isLocalValue);

- // Update app to reflect that the user is not currently following anyone and there is no presenter.

- infoText.innerHTML = "";

- // Show a "Start presenting" button in your app.

- button.innerHTML = "Start presenting";

- button.onclick = followMode.startPresenting;

- // Note: state.isLocalValue will be true.

- break;

- // Update app to reflect that the local user is being followed by other users.

- infoText.innerHTML = `${state.otherUsersCount} users are following you`;

- // Does not mean that the local user is presenting to everyone, so you can still show the "Start presenting" button.

- button.innerHTML = "Present to all";

- button.onclick = followMode.startPresenting;

- // Note: state.isLocalValue will be true.

- break;

- // Update app to reflect that the local user is actively presenting to everyone.

- infoText.innerHTML = `You are actively presenting to everyone`;

- // Show a "Stop presenting" button in your app.

- button.innerHTML = "Stop presenting";

- button.onclick = followMode.stopPresenting;

- // Note: state.isLocalValue will be true.

- break;

- // The local user is following a remote presenter.

- infoText.innerHTML = `${followingUser?.displayName} is presenting to everyone`;

- // Show a "Take control" button in your app.

- button.innerHTML = "Take control";

- button.onclick = followMode.startPresenting;

- // Note: state.isLocalValue will be false.

- break;

- // The local user is following a remote presenter but has an active suspension.

- infoText.innerHTML = `${followingUser?.displayName} is presenting to everyone`;

- // Show a "Sync to presenter" button in your app.

- button.innerHTML = "Sync to presenter";

- button.onclick = followMode.endSuspension;

- // Note: state.isLocalValue will be true.

- break;

- // The local user is following a specific remote user.

- infoText.innerHTML = `You are following ${followingUser?.displayName}`;

- // Show a "Stop following" button in your app.

- button.innerHTML = "Stop following";

- button.onclick = followMode.stopFollowing;

- // Note: state.isLocalValue will be false.

- break;

- // The local user is following a specific remote user but has an active suspension.

- infoText.innerHTML = `You were following ${followingUser?.displayName}`;

- // Show a "Resume following" button in your app.

- button.innerHTML = "Resume following";

- button.onclick = followMode.endSuspension;

- // Note: state.isLocalValue will be true.

- break;

- break;

- // Broadcast change to other users so that they have their latest camera position

- followMode.update(position);

- // If the local user changed the position while following another user, we want to suspend.

- // Note: helps to distinguish changes initiated by the local user (e.g., drag mouse) separately from other change events.

- if (!isUserAction) return;

- switch (state.type) {

- case FollowModeType.followPresenter:

- case FollowModeType.followUser: {

- // This will trigger a "stateChanged" event update for the local user only.

- followMode.beginSuspension();

- break;

- }

- default: {

- // No need to suspend for other types

- break;

- }

- const {

- state,

- localUser,

- otherUsers,

- allUsers,

- liveFollowMode,

- update,

- startPresenting,

- stopPresenting,

- beginSuspension,

- endSuspension,

- followUser,

- stopFollowing,

- } = useLiveFollowMode(MY_UNIQUE_KEY, startingCameraPosition);

- // Example of an event listener for a camera position changed event.

- // For something like a camera change event, you should use a debounce function to prevent sending updates too frequently.

- // Note: it helps to distinguish changes initiated by the local user (e.g., drag mouse) separately from other change events.

- function onCameraPositionChanged(position, isUserAction) {

- // Broadcast change to other users so that they have their latest camera position

- update(position);

- // If the local user changed the position while following another user, we want to suspend.

- // Note: helps to distinguish changes initiated by the local user (e.g., drag mouse) separately from other change events.

- if (!isUserAction) return;

- switch (state.type) {

- case FollowModeType.followPresenter:

- case FollowModeType.followUser: {

- // This will trigger a "stateChanged" event update for the local user only.

- followMode.beginSuspension();

- break;

- }

- default: {

- // No need to suspend for other types

- break;

- }

- }

- // Can optionally get the relevant user's presence object

- const followingUser = liveFollowMode?.getUser(state.followingUserId);

- // Render UI

- return (

- {state.type === FollowModeType.local && (

- <div>

- <p>{""}</p>

- <button onClick={startPresenting}>

- {"Start presenting"}

- </button>

- </div>

- )}

- {state.type === FollowModeType.activeFollowers && (

- <div>

- <p>{`${state.otherUsersCount} users are following you`}</p>

- <button onClick={startPresenting}>

- {"Present to all"}

- </button>

- </div>

- )}

- {state.type === FollowModeType.activePresenter && (

- <div>

- <p>{`You are actively presenting to everyone`}</p>

- <button onClick={stopPresenting}>

- {"Stop presenting"}

- </button>

- </div>

- )}

- {state.type === FollowModeType.followPresenter && (

- <div>

- <p>{`${followingUser?.displayName} is presenting to everyone`}</p>

- <button onClick={startPresenting}>

- {"Take control"}

- </button>

- </div>

- )}

- {state.type === FollowModeType.suspendFollowPresenter && (

- <div>

- <p>{`${followingUser?.displayName} is presenting to everyone`}</p>

- <button onClick={endSuspension}>

- {"Sync to presenter"}

- </button>

- </div>

- )}

- {state.type === FollowModeType.followUser && (

- <div>

- <p>{`You are following ${followingUser?.displayName}`}</p>

- <button onClick={stopFollowing}>

- {"Stop following"}

- </button>

- </div>

- )}

- {state.type === FollowModeType.suspendFollowUser && (

- <div>

- <p>{`You were following ${followingUser?.displayName}`}</p>

- <button onClick={stopFollowing}>

- {"Resume following"}

- </button>

- </div>

- )}

- <div>

- <p>{"Follow a specific user:"}</p>

- {otherUsers.map((user) => (

- <button onClick={() => {

- followUser(user.userId);

- }} key={user.userId}>

- {user.displayName}

- </button>

- ))}

- </div>

- <Example3DModelViewer

- cameraPosition={state.value}

- onCameraPositionChanged={onCameraPositionChanged}

- />

- );

- const [state, setState] = useLiveState(MY_UNIQUE_KEY, INITIAL_STATE, ALLOWED_ROLES);

- const onTakeControl = async () => {

- try {

- await setState({

- ...state,

- presentingUserId: "<LOCAL_USER_ID>",

- });

- } catch (error) {

- console.error(error);

- }

- };

- // Render UI

- return (

- <div>

- {`Current document: ${state.documentId}`}

- {`Current presenter: ${state.presentingUserId}`}

- <button onClick={onTakeControl}>

- Take control

- </button>

- </div>

- );

-}

-Unlike the `LiveDataObject` classes mentioned in this article, Fluid data structures don't reset after your application is closed. This is ideal for scenarios such as the meeting side panel, where users frequently close and reopen your app while using other tabs in the meeting, such as chat.

-| [SharedString](https://fluidframework.com/docs/data-structures/string/) | A distributed-string sequence optimized for editing the text of documents or text areas. |

-const UNIQUE_KEY = "CUSTOM-MAP-ID"

- <div key={video.id}>

- {video.title}

- </div>

-import { LiveShareClient, TestLiveShareHost, LiveState } from "@microsoft/live-share";

-const host = inTeams

- ? LiveShareHost.create()

- : TestLiveShareHost.create();

-import { LiveShareProvider, useLiveShareContext } from "@microsoft/live-share-react";

- // Create the host as React state so that it doesn't get reset on mount

- const [host] = useState(

- inTeams ? LiveShareHost.create() : TestLiveShareHost.create()

- );

- // Live Share for React does not require that you define a custom Fluid schema

- return (

- <LiveShareProvider host={host} joinOnLoad>

- <LiveShareLoading />

- </LiveShareProvider>

- );

-}

- // Any live-share-react hook (e.g., useLiveShareContext, useLiveState, etc.) must be a child of <LiveShareProvider>

- const { joined } = useLiveShareContext();

- if (joined) {

- return <p>{"Loading..."}</p>;

- }

- return <p>{"Your app here..."}</p>;

-}

- "scripts": {

- "start": "start-server-and-test start:server 7070 start:client",

- "start:client": "{YOUR START CLIENT COMMAND HERE}",

- "start:server": "npx tinylicious@latest"

- },

- "devDependencies": {

- "@fluidframework/test-client-utils": "^1.3.6",

- "start-server-and-test": "^2.0.0"

- }

-| Sample name | Description | JavaScript | TypeScript |

-| -- | | - | - |

-| Dice Roller | Enable all connected clients to roll a die and view the result. | [View](https://aka.ms/liveshare-diceroller) | [View](https://aka.ms/liveshare-diceroller-ts) |

-| Agile Poker | Enable all connected clients to play Agile Poker. | [View](https://aka.ms/liveshare-agilepoker) | NA |

-| 3D Model | Enable all connected clients to view a 3D model together. | NA | [View](https://aka.ms/liveshare-3dviewer-ts) |

-| Timer | Enable all connected clients to view a countdown timer. | NA | [View](https://aka.ms/liveshare-timer-ts) |

-| Presence avatars | Display presence avatars for all connected clients. | NA | [View](https://aka.ms/liveshare-presence-ts) |

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

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

-No. Teams currently 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).

-* Use our experimental [Live Share Turbo](https://aka.ms/liveshareturbo) or [Live Share for React](https://aka.ms/livesharereact) packages.

-* 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`.

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

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

-* [Apps for Teams meetings](teams-apps-in-meetings.md)

-* [GitHub repository](https://github.com/microsoft/live-share-sdk)

-* [Live Share SDK reference docs](/javascript/api/@microsoft/live-share/)

-* [Live Share Media SDK reference docs](/javascript/api/@microsoft/live-share-media/)

-* [Use Fluid with Teams](../tabs/how-to/using-fluid-msteam.md)

-Live Share is an SDK designed to transform Teams apps into collaborative multi-user experiences without writing any dedicated back-end code. With Live Share, your users can co-watch, co-create, and co-edit during meetings.

-Live Share enables connecting to a special Fluid Container associated with each meeting in a few lines of code. In addition to the data structures provided by Fluid Framework, Live Share also supports a new set of DDS classes to simplify synchronizing app state in meetings.

-When collaborating in meetings, it's essential for users to be able to point out and emphasize content on the screen. Live Share canvas makes it easy to add inking, laser pointers, and cursors to your app for seamless collaboration.

-Live Share provides a turn-key Azure Fluid Relay service backed by the security of Microsoft Teams meetings. Live Share containers are restricted to meeting participants, maintain tenant residency requirements, and can be accessed in a few lines of client code.

-| A financial advisor reviews PDF documents with clients before signing. | The financial advisor shares the PDF contract to the meeting stage. All attendees can see each other's cursors and highlighted text in the PDF, after which both parties sign the agreement. |

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

-Get started with Teams AI library using the Chef bot sample, which is designed to to help you cook apps using the Teams AI Library. The bot uses the gpt-3.5-turbo model to chat with Teams users and respond in a polite and respectful manner, staying within the scope of the conversation.

-| &nbsp; | &nbsp; |

-| [Visual Studio Code](https://code.visualstudio.com/download) or [Visual Studio](https://visualstudio.microsoft.com/downloads/) | JavaScript, TypeScript, or CSharp build environments. Use the latest version. |

-| [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call-all in one place.|

-| [OpenAI](https://openai.com/api/) or [Azure OpenAI](https://oai.azure.com/portal)| First create your OpenAI API key to use OpenAI's GPT. If you want to host your app or access resources in Azure, you must create an Azure OpenAI service.|

-If you ran the samples before or encounter a runtime error, follow these steps to start fresh:

-* If you donΓÇÖt want Teams Toolkit to generate the appId and password, update the `MicrosoftAppId` and `MicrosoftAppPassword` in the `.env` file with your own values.

-Teams Toolkit automatically provisions`MicrosoftAppId` and `MicrosoftAppPassword` resources. If you want to use your own resources, you need to manually add them to the `.env` file. Teams Toolkit doesn't auto-generate the following resources:

-Get started with Teams AI library using the **ChefBot** sample. It enables your computerΓÇÖs localhost to quickly execute a Teams AI library-based sample.

-1. Run the following command to clone the repository.

-1. In the terminal window, run the following command to go to the **JS** folder:

-1. Go to **teams-ai > js > samples> 04.ai.a.teamsChefBot** and select **Select Folder**. All the files for the chef bot sample are listed under the **EXPLORER** section in Visual Studio Code.

-1. Under **EXPLORER**, duplicate the `sample.env` file and update the duplicate file to `.env`.

-1. In the sample folder, update the following code in the `.env` configuration file:

- ```text

- OPENAI_KEY=<your OpenAI key>

- ```

-1. Under **ACCOUNTS**, sign in to the following:

- :::image type="content" source="../../../assets/images/bots/Conversation-AI-sample-app-add.png" alt-text="Screenshot shows the option to add the app in Teams web client.":::

- :::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 GPT turbo 3.5 model to chat with Teams users and respond in a polite and respectful manner, staying within the scope of the conversation.

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

-1. Go to the [sample](https://github.com/microsoft/teams-ai/tree/main/js/samples).

-1. Go to the folder where you cloned the repository and select **04.ai.a.teamsChefBot**.

-1. Select **TeamsChefBot.sln**. The solution opens in Visual Studio.

- "OpenAI": {

- "ApiKey": "<your-openai-api-key>"

-1. Select the Account to use to create the tunnel. Azure, Microsoft Account (MSA), and GitHub are the account types that are supported. Update the following options:

-1. Right-click the menu and select **Teams Toolkit** > **Prepare Teams App Dependencies**.

- :::image type="content" source="../../../assets/images/bots/dotnet-ai-library-prepare-teams-app.png" alt-text="Screenshot shows an example of the Prepare Teams app Dependencies option under Teams Toolkit section in Visual Studio.":::

- If prompted, sign in to your Microsoft 365 account. You'll receive a message that Teams app is successfully prepared.

- :::image type="content" source="../../../assets/images/bots/dotnet-ai-library-add-app.png" alt-text="Screenshot shows the add option to add the app to Microsoft Teams.":::

- :::image type="content" source="../../../assets/images/bots/dotnet-ai-library-invoke-chef-bot.png" alt-text="Screenshot shows an example of a chat window and a message from the chef bot as a reply to users message.":::

-1. Right-click the menu and select **Teams Toolkit** > **Provision in the Cloud**. Toolkit provisions your sample to Azure.

-1. Right-click the menu and select **Teams Toolkit** > **Deploy to the Cloud**.

-1. **Teams Toolkit CLI**: You can use the Teams Toolkit CLI to create and manage Microsoft Teams apps from the command line. For more information, see [Teams Toolkit CLI set up instructions](https://github.com/microsoft/teams-ai/blob/main/getting-started/OTHER/TEAMS-TOOLKIT-CLI.md).

-1. **Bot Framework Emulator**: The [Bot Framework Emulator](https://github.com/microsoft/BotFramework-Emulator) is a desktop application that allows you to test and debug your bot locally. You can connect to your bot by entering the botΓÇÖs endpoint URL and Microsoft App ID and password. You can then send messages to your bot and see its responses in real-time. For more information, see [Bot Framework Emulator set up instructions](https://github.com/microsoft/teams-ai/blob/main/getting-started/OTHER/BOTFRAMEWORK-EMULATOR.md).

-Teams AI library provides abstractions for you to build robust applications that utilize OpenAI large language model (LLM)s.

-No, you need to have your large language model (LLM)s, hosted in Azure OpenAI or elsewhere.

-Yes, it's possible to use Teams AI library with other large language model (LLM)s.

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

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

-* [Code sample](https://github.com/microsoft/teams-ai/tree/main/python/samples/04.ai.b.messageExtensions.AI-ME)

-* [Sample code reference](https://github.com/microsoft/teams-ai/blob/main/python/samples/04.ai.b.messageExtensions.AI-ME/src/bot.py#L75)

-# Implement Message Extension logic

-@app.message_extensions.fetch_task("CreatePost")

-async def create_post(context: TurnContext, _state: AppTurnState) -> TaskModuleTaskInfo:

- # Return card as a TaskInfo object

- card = create_initial_view()

- return create_task_info(card)

-[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/python/packages/ai/teams/adaptive_cards/adaptive_cards.py#L129C1-L136C67)

-# Use this method as a decorator

-@app.adaptive_cards.action_submit("submit")

-async def execute_submit(context: TurnContext, state: TurnState, data: Any):

- print(f"Execute with data: {data}")

-# Pass a function to this method

-app.adaptive_cards.action_submit("submit")(execute_submit)

-[Sample code reference](https://github.com/microsoft/teams-ai/blob/main/python/packages/ai/teams/message_extensions/message_extensions.py#L68C1-L75C55)

-```python

-# Use this method as a decorator

-@app.message_extensions.query("test")

-async def on_query(context: TurnContext, state: TurnState, url: str):

- return MessagingExtensionResult()

-# Pass a function to this method

-app.message_extensions.query("test")(on_query)

-Teams AI library is a Teams-centric interface to GPT-based common language models and user intent engines which, 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).

-| Search command message extension | This sample shows how to incorporate a basic Message Extension app into a Microsoft Teams application using Bot Framework and the Teams AI library. | [View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/02.messageExtensions.a.searchCommand) | [View](https://github.com/microsoft/teams-ai/tree/main/js/samples/02.teams-features/a.messageExtensions.searchCommand) |

-| Typeahead bot | This sample shows how to incorporate the typeahead search functionality in Adaptive Cards into a Microsoft Teams application using Bot Framework and the Teams AI library. | [View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/03.adaptiveCards.a.typeAheadBot) | [View](https://github.com/microsoft/teams-ai/tree/main/js/samples/02.teams-features/b.adaptiveCards.typeAheadBot) |

-| List bot | This sample shows how to incorporate a basic conversational bot behavior in Microsoft Teams. The bot harnesses the power of AI to simplify your workflow and bring order to your daily tasks and showcases the action chaining capabilities. | [View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/04.ai.d.chainedActions.listBot) | [View](https://github.com/microsoft/teams-ai/tree/main/js/samples/03.ai-concepts/d.chainedActions-listBot) |

-| DevOps bot | This sample shows how to incorporate a basic conversational bot behavior in Microsoft Teams. The bot uses the gpt-3.5-turbo model to chat with Teams users and perform DevOps action such as create, update, triage and summarize work items. | [View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/04.ai.e.chainedActions.devOpsBot) | [View](https://github.com/microsoft/teams-ai/tree/main/js/samples/04.ai-apps/b.devOpsBot) |

-| Twenty questions | This sample shows showcases the incredible capabilities of language models and the concept of user intent. Challenge your skills as the human player and try to guess a secret within 20 questions, while the AI-powered bot answers your queries about the secret. | [View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/04.e.twentyQuestions) | [View](https://github.com/microsoft/teams-ai/tree/main/js/samples/03.ai-concepts/a.twentyQuestions) |

-| Math tutor assistant | This example shows how to create a basic conversational experience using OpenAI's Assistants APIs. It uses OpenAI's Code Interpreter tool to create an assistant that's an expert on math. | [View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/06.assistants.a.mathBot) | [View](https://github.com/microsoft/teams-ai/tree/main/js/samples/04.ai-apps/d.assistants-mathBot) |

-| Food ordering assistant | This example shows how to create a conversational assistant that uses tools to call actions in your bots code. It's a food ordering assistant for a fictional restaurant called The Pub and is capable of complex interactions with the user as it takes their order. | [View](https://github.com/microsoft/teams-ai/tree/main/dotnet/samples/06.assistants.b.orderBot) | [View](https://github.com/microsoft/teams-ai/tree/main/js/samples/04.ai-apps/e.assistants-orderBot) |

-> [!div class="nextstepaction"]

-> If you close your command window and restart, a new URL is generated and you need to update your bot endpoint address to use it.

-When a user installs your app in Teams, they install an app package that contains only a configuration file (also known as an app manifest) and your app's icons. The app's logic and data storage are hosted elsewhere, such as on localhost during development and Azure Web Services. Teams accesses these resources via HTTPS.

-| [Teams AI library](../../bots/how-to/Teams%20conversational%20AI/teams-conversation-ai-overview.md) | Teams AI library is a Teams-centric interface to GPT-based common language models and user intent engines. This reduces the requirement for you to handle on complex and expensive tasks of writing and maintaining conversational bot logic to integrate with large language models (LLMs). | :::image type="icon" source="../../assets/icons/blue-dot.png" border="false"::: Depends on **Bot Framework SDK**. </br> :::image type="icon" source="../../assets/icons/grey-dot.png" border="false"::: Based on **Azure OpenAI**. |

-| [Copilot](../messaging-extensions/build-bot-based-plugin.md)|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. |

-| [Teams AI library](../bots/how-to/Teams%20conversational%20AI/teams-conversation-ai-overview.md) | A Teams-centric interface to GPT-based common language models and user intent engines. You can take on complex and expensive tasks of writing and maintaining conversational bot logic to integrate with large language models (LLMs).|

-|`semanticDescription`|Semantic description of the command for consumption by the large language model.|No|1.17|

-|`parameter.semanticDescription`|Semantic description of the parameter for consumption by the large language model.|No|1.17|

-Microsoft Copilot for Microsoft 365, powered by an advanced processing and orchestration engine, integrates Microsoft 365 apps, Microsoft Graph, and large language models (LLMs) to transform your words into a potent productivity tool. Although Copilot for Microsoft 365 can utilize apps and data within the Microsoft 365 ecosystem, many users rely on various external tools and services for work management and collaboration. By extending your message extension as a plugin in Copilot for Microsoft 365, you can enable users to interact with third-party tools and services, therefore empowering them to achieve more with Copilot for Microsoft 365. You can achieve this extension by developing a plugin or connecting to an external data source.

-Your contact information that is used by customers to contact you through Teams chat or email. Customers may need extra information when evaluating your app or if they have any queries about your app when it doesn't work. Customers can contact you using Teams chat, so request your IT admins to [enable external communications](/microsoftteams/communicate-with-users-from-other-organizations) in your organization. For more information, see [developer provided app and contact information](/MicrosoftTeams/manage-apps#developer-provided-app-information-support-and-documentation).

-We recommend triaging your customer queries in a timely manner and route those internally within your organization based on the queries shared by the customers. It helps improve app adoption, developer trust, and revenue if you monetize your app.

-| Name | Type | Maximum size | Required | Description |

-|||--|-|-|

-|`defaultsupport`|Object||✔️| The default contact information for your app.|

-|`defaultsupport.userEmailsForChatSupport`|Array|10|✔️|Email address to receive customer queries using Teams chat. While the app manifest allows up to 10 email addresses, only the first email is considered for routing. The object is an array with all elements of the type string. The maximum length of email is 80 characters. |

-|`semanticDescription`|String|5000 characters||Semantic description of the command for consumption by Copilot using large language model (LLM).|

-|`parameter.semanticDescription`|String|2000 characters||Semantic description of the parameter for consumption by the large language model.|

-|`semanticDescription`|String|5000 characters||Semantic description of the command for consumption by Copilot using large language model (LLM).|

-|`parameter.semanticDescription`|String|2000 characters||Semantic description of the parameter for consumption by Copilot using large language model (LLM).|

-1. Upload and deploy your Teams app package to your SharePoint App Catalog by visiting `https://YOUR_TENANT_NAME.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx`. For example, `https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx`.

-Teams AI library provides abstractions for you to build robust applications that utilize OpenAI large language model (LLM)s.

-No, you need to have your large language model (LLM)s, hosted in Azure OpenAI or elsewhere.

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

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

-**2024 April**

-* ***April 12, 2024***: [Implement authentication in API-based search message extensions to provide secure and seamless access to your app.](messaging-extensions/build-api-based-message-extension.md#authentication)

-* ***April 12, 2024***: [Introducing app manifest v1.17 with semanticDescription, samplePrompts, and dashboardCards](resources/schem).

-* ***April 12, 2024***: [Outlook extensions specifies Outlook Add-ins within an app manifest and simplify the distribution and acquisition across the Microsoft 365 ecosystem](resources/schem#extensionsrequirements).

-* ***April 12, 2024***: [Create Dashboardcards that can be pinned to a dashboard such as Microsoft Viva Connections to provide a summarized view of app information](resources/schem#dashboardcards).

-* ***April 12, 2024***: [Share code snippets as richly formatted Adaptive Cards in Teams chats, channels, and meetings with the CodeBlock element.](task-modules-and-cards/cards/cards-format.md#codeblock-in-adaptive-cards)

-* ***April 12, 2024***: [Introduced bot configuration experience that helps you to enable the bot settings for users to configure their bot during installation and reconfigure the bot.](bots/how-to/bot-configuration-experience.md)

-* ***April 12, 2024***: [Use sample prompts to guide users on how to use the various plugins within Copilot.](messaging-extensions/high-quality-message-extension.md#sample-prompts)

-* ***April 10, 2024***: [Define and deploy Outlook Add-ins in version 1.17 and later of the app manifest schema.](m365-apps/overview.md#outlook-add-ins)

-* ***April 04, 2024***: [Added support for python in Teams AI library.](bots/how-to/Teams%20conversational%20AI/teams-conversation-ai-overview.md)

-* ***April 04, 2024***: [Stageview API with the openmode property allows you to open your app content in different Stageview experience.](tabs/open-content-in-stageview.md)

-* ***April 03, 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)