Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 27 additions & 40 deletions msteams-platform/bots/how-to/teams-conversational-ai/ai-ux.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ ms.date: 09/27/2024

[!INCLUDE [teams-ai-lib-v2-rec](../../../includes/teams-ai-lib-v2-rec.md)]

An agent transforms system interactions. For developers, creating an exceptional user experience is crucial. This article details the steps, principles, and considerations for designing intuitive, user-centered interfaces that seamlessly integrate AI capabilities. The main goals are to simplify complex tasks, enhance productivity, and offer personalized experiences through adaptive learning. An agent includes features that enhance its functionality and integration within the Teams environment:
An agent transforms system interactions. Developers create exceptional user experiences by following these guidelines. This article describes steps, principles, and considerations to design intuitive, user-centered interfaces that integrate AI capabilities. Goals include simplifying complex tasks, enhancing productivity, and offering personalized experiences through adaptive learning. An agent includes features that enhance functionality and integration within Teams environment:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes in this para are not necessary, and changes the meaning. Please revert to original.

<!--the Microsoft ecosystem-->

- **Generative AI integration**: Uses advanced AI models for natural language processing and interaction.
Expand Down Expand Up @@ -67,14 +67,14 @@ Here's an example for updating the app manifest. You must add the `botID` proper

### Stream the agent response to the user

An agent uses LLM for complex user requests, which may delay responses. To prevent noticeable delays, the agent streams its responses, making them appear fast.
An agent uses LLM for complex user requests, which may delay responses. To prevent noticeable delays, stream responses to the user so they appear quickly.

:::image type="content" source="../../../assets/images/bots/ai-streaming-ux.gif" alt-text="Graphical representation shows streaming agent messages" border="false":::

Use the following types of updates while streaming responses:

- Informative updates: Send information on the sub-steps as the agent generates the response before it sends the final response.
- Response streaming: Send the intermediate states of the final response while the LLM creates its full response.
- Informative updates: Send information on sub-steps as the agent generates the response before sending the final output.
- Response streaming: Send intermediate states of the final response while the LLM creates its full reply.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

response to reply change is not necessary.


Use [Teams SDK](/microsoftteams/platform/teams-ai-library/) to add streaming to the agent.

Expand All @@ -84,7 +84,7 @@ Use [Teams SDK](/microsoftteams/platform/teams-ai-library/) to add streaming to

### Ensure the agent response contains citations

Users must know the sources an agent uses to generate its final response. Identifying these resources allows users to validate and trust the agent's responses.
Users must know the sources an agent uses to generate its final response. Identifying these resources allows users to validate and trust the responses.

:::image type="content" source="../../../assets/images/bots/ai-citation.png" alt-text="Image shows an example of citations in agents." border="false":::

Expand All @@ -96,7 +96,7 @@ Use [Teams SDK](/microsoftteams/platform/teams-ai-library/) to add streaming to

### Ensure the agent response contains an AI label

An agent must identify that it uses AI. Informing users that a response is AI-generated helps build trust in the agent's capabilities. To ensure this, an agent must include a flag in each AI-generated response to indicate it was generated by AI. This flag automatically adds an AI label next to the response.
An agent must identify that it uses AI. Indicating that a response is AI-generated helps build trust in its capabilities. To ensure this, include a flag in each AI-generated response to denote that it was generated by AI. This flag automatically adds an AI label next to the response.

Examples of AI label:

Expand All @@ -112,39 +112,28 @@ Use [Teams SDK](/microsoftteams/platform/teams-ai-library/) to add streaming to

### Ensure that the agent maintains intelligent conversation

An agent must track a conversation's context and history to provide an intelligent interaction. The agent must meet the user's expectation by being aware of the conversation's context and allowing them to refer to previous messages and responses.
An agent tracks conversation context and history to provide intelligent interactions. It meets user expectations by maintaining awareness of the conversation and allowing references to previous messages and responses.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert the change, intended action is getting changed.


Use Teams SDK to ensure intelligent context-based conversation and to manage and pass conversational history and context to the LLM. Teams SDK enables you to:

<!--
- Use Bot Framework SDK to:
-->
- **Manage context and conversation history**: Ensure that the agent can track the context and conversation history.
- **Identify conversation location**: Ensure the agent is aware of the platform on which the conversation is ongoing, such as on Teams, copilot.com, in a meeting side panel, or a group chat.
- **Store and pass conversation history**: Determine the means of storage and pass some of the conversation history to the agent.
- **Understand user references**: Ensure that when a user sends a message, the agent must understand what the user is referring to. You can build this understanding in the agent using LLM and the recent conversation history. The agent mustn't need the user to reestablish context with every message.
- **Manage context and conversation history**: Ensure that the agent can track context and conversation history.
- **Identify conversation location**: Ensure the agent is aware of the platform where the conversation is occurring, such as on Teams, copilot.com, in a meeting side panel, or a group chat.
- **Store and pass conversation history**: Determine how to store and pass part of the conversation history to the agent.
- **Understand user references**: Ensure that when a user sends a message, the agent understands what the user is referring to. Build this understanding using LLM and recent conversation history. The agent mustn't require users to reestablish context with every message.

### Ensure that the agent offers prompt starters or a welcome card

An agent must assist users by offering prompt suggestions on how to best utilize the agent. This helps users overcome challenges during both initial and subsequent interactions with the agent.
An agent assists users by offering prompt suggestions that help them utilize its features effectively. This approach helps users overcome challenges during both initial and subsequent interactions.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert change, intention is getting altered.


:::image type="content" source="../../../assets/images/bots/ai-zero-prompts.png" alt-text="Image shows an example of prompt starters." border="false":::

- **Prompt starters**: Prompt starters are the initial prompts users see when an agent is added to a new conversation, whether it's a one-on-one chat, a new session, or a group chat. These prompts must be tailored to the user's context and the specific conversation thread.
- **Contextual prompts**: Contextual prompts are dynamic recommendations from an agent during user interactions. These prompts appear via contextual flyouts, such as **View Prompts** in one-on-one chats and @mention flyouts in group chats. These suggestions are updated to stay relevant to the ongoing conversation.
- **Suggested action**: Suggested actions are prompts that appear as pills above the compose box in one-on-one chats and as action buttons in group chats. They are suggestions for actions a user might take in response to the agent's message and must be customized to match the response.

<!--
## Compound utterance guidelines for agents

Agents must support at least three unique compound utterances by handling three or more parameters. Guidelines for agents provide detailed information on [parameter description](../../../messaging-extensions/dev-guidelines-agents.md#parameter-description) and ways to [enhance message extension to retrieve information through compound utterances](../../../messaging-extensions/dev-guidelines-agents.md#enhance-message-extension-to-retrieve-information-through-compound-utterances).

:::image type="content" source="../../../assets/images/Copilot/high-quaity-me-pass-multi-parameters.png" alt-text="Screenshot shows an example of a pass scenario where the Northwind app returns a response for a seafood and in stock parameters.":::
-->
- **Prompt starters**: Display initial prompt suggestions when an agent is added to a new conversation, whether in a one-on-one chat, a new session, or a group chat. These prompts must be tailored to the user's context and to the specific conversation thread.
- **Contextual prompts**: Present dynamic recommendations during user interactions. These prompts appear via contextual flyouts, such as **View Prompts** in one-on-one chats and @mention flyouts in group chats. They update to remain relevant to the ongoing conversation.
- **Suggested action**: Show prompts as pills above the compose box in one-on-one chats and as action buttons in group chats. These suggestions must be customized to match the agent's response.

## Best practices for agents in Teams

The following best practices can help enhance the overall effectiveness of an agent:
The following best practices help enhance the overall effectiveness of an agent:

- [Ensure that agent's response contains feedback button](#ensure-that-agents-response-contains-feedback-button).
- [Enable Teams Azure AD single sign-on](#enable-teams-azure-ad-single-sign-on).
Expand All @@ -154,52 +143,50 @@ The following best practices can help enhance the overall effectiveness of an ag

### Ensure that agent's response contains feedback button

Develop the capability in the agent to receive user feedback. This could enable the collection of valuable insights from users, which can be analyzed to identify areas for improvement. By incorporating this feedback, the bot's responses can be continuously refined and enhanced, leading to a more effective and user-friendly interaction experience.
Develop capability in the agent to receive user feedback. This functionality collects valuable insights that identify areas for improvement. Incorporate feedback to continuously refine and enhance bot responses, leading to more effective and user-friendly interactions.

:::image type="content" source="../../../assets/images/bots/ai-feedback-loop.png" alt-text="Image shows an example of feedback loop." border="false":::

To collect the user feedback, you must:
To collect user feedback, you must:

- Provide feedback buttons with every response.
- Provide the feedback received from the user to the agent.
- Use the feedback to improve the quality of agent's responses.
- Use the feedback to improve the quality of the agent's responses.

Use Teams SDK to add the feedback button property to the AI module. This property adds a feedback button to each AI-generated message automatically.
Use Teams SDK to add the feedback button property to the AI module. This property automatically adds a feedback button to each AI-generated message.

> [!NOTE]
> Customizable feedback forms are available in [public developer preview](../../../resources/dev-preview/developer-preview-intro.md).

### Enable Teams Azure AD single sign-on

You can add single sign-on (SSO) authentication to your agent. For more information, see [enable SSO for your app](../authentication/bot-sso-overview.md).
Add single sign-on (SSO) authentication to your agent. For more information, see [enable SSO for your app](../authentication/bot-sso-overview.md).

### Enable the agent to understand conversational history and context

You can design your agent to understand and refer to conversational history and context. It helps to ensure that every interaction is relevant and tailored to the user's specific needs. The agent can refer to the context and offer responses that are accurate and contextually appropriate.

<!--For more information, see [messages in bot conversations](../conversations/conversation-messages.md).-->
Design your agent to reference conversational history and context. This approach ensures that every interaction remains relevant and tailored to the user's specific needs. The agent references context and offers responses that are accurate and appropriate.

### Offer dynamic and contextual suggestion prompts

Enhance your agent's user experience with intelligent and context-aware prompts. The agent can offer context-relevant prompts dynamically.
Enhance your agent's user experience with intelligent and context-aware prompts. The agent dynamically offers relevant suggestions based on conversation context and history.

:::image type="content" source="../../../assets/images/bots/ai-suggested-prompts.png" alt-text="Image shows an example of suggested prompts." border="false":::

To achieve this, the agent must leverage the conversation context and history, and prompt suggestions can be timely and fit for the query.
To achieve this, the agent leverages conversation context and history so that prompt suggestions remain timely and fit for the query.

### Enable app profile card

> [!NOTE]
> Enable app profile card is available in [public developer preview](../../../resources/dev-preview/developer-preview-intro.md) for Teams apps.

You can now add hovercard experience for all agents and bots. Hovercards can provide valuable and relevant information to educate users about the app and its features.
Add hovercard experience for all agents and bots to provide valuable and relevant information that educates users about the app and its features.

:::image type="content" source="../../../assets/images/bots/contoso-app-profile-card.png" alt-text="Image shows app profile card." border="false" lightbox="../../../assets/images/bots/contoso-app-profile-card.png":::

To enable app profile card to your agents or bots, you must add the `features` field under the `description` field in the app manifest. For more information, see [public developer preview for Teams](/microsoft-365/extensibility/schema/root-description?view=m365-app-prev&tabs=syntax&preserve-view=true).
To enable app profile card for your agents or bots, add the `features` field under the `description` field in the app manifest. For more information, see [public developer preview for Teams](/microsoft-365/extensibility/schema/root-description?view=m365-app-prev&tabs=syntax&preserve-view=true).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Features and Description should not be code tagged, they are screen elements and have to be in bold.


## See also

- [Teams SDK](teams-conversation-ai-overview.md)
- [Stream bot messages](../../streaming-ux.md)
- [Enhance AI-generated bot messages](../bot-messages-ai-generated-content.md)
- [Enhance AI-generated bot messages](../bot-messages-ai-generated-content.md)