Microsoft 365 Agents Playground for Visual Studio

Microsoft 365 Agents Playground (previously known as Teams App Test Tool) makes debugging bot-based apps effortless. You can chat with your bot and see its messages and Adaptive Cards as they appear in Microsoft Teams. You don’t need a Microsoft 365 developer account, tunneling, or Teams app and bot registration to use Agents Playground.

The following image shows a sample app displaying a response in Agents Playground:

The following are the advantages of Agents Playground:

• Sandbox environment: The sandbox environment of Agents Playground emulates the behavior, look, and user experience of Teams.

• Tunneling: An external tunnel service isn't necessary as Agents Playground runs on a local server that your bot can communicate with.

• Reduce account dependencies: Microsoft 365 Developer tenant and the app uploading permissions aren't necessary to debug the bot.

• Rapid inner-loop iterations: Optimizes the process of making changes to the app design and bot logic without having to redeploy the bot to the cloud.

• Mock data and activities: Agents Playground makes it easy to test complex scenarios such as, sending a welcome message when a new member joins the channel and using mock data and activity triggers.

• Reliable: Agents Playground is reliable as the bot's Adaptive Card utilizes the same rendering technology as in Teams.

• Integration with existing Teams bot applications: Agents Playground integrates effortlessly with existing Teams bot applications built with Bot Framework SDK.

• Support for different scopes: Agents Playground supports testing in personal, team, and group chat scopes.

Prerequisites

Ensure you install the following tools for building and deploying your bot in Agents Playground:

Agents Playground experience in Visual Studio

Agents Playground offers a faster debug experience for bot applications when compared to the Teams client. Agents Playground provides support for all bot app features. In this scenario, we're using AI Chat Bot as an example. To debug your bot in Agents Playground, follow these steps:

1. Open Visual Studio.

2. Select Create a new project.

   

3. In the search box, enter Microsoft Teams. From the search results, select Microsoft Teams App.

4. Select Next.

   

5. Enter Project name and select Create.

   

6. Select AI Chat Bot > Create.

   Note

   • OpenAI or Azure OpenAI are the prerequisite to debug AI Chat Bot app.

   

   A GettingStarted window appears.

   

7. The appsettings.Playground.json file helps to configure Agents Playground by updating few parameters. To update appsettings.Playground.json file, follow either OpenAI or Azure OpenAI steps:

   • OpenAI
   • Azure OpenAI

   Update OpenAI ApiKey in the appsettings.Playground.json file.

   

8. In the debug dropdown list, select Microsoft 365 Agents Playground (browser).

   

   Agents Playground opens the bot in a webpage.

   

Activity triggers

You can mock an activity in Agents Playground using activity triggers. There are two types of activity triggers:

• Predefined activity triggers
• Custom activity triggers

Predefined activity triggers

Agents Playground provides predefined activity triggers to test the functionalities of your bot.

Predefined activity triggers are available in the Mock an Activity menu in Agents Playground. In this scenario, we're using Add user activity trigger as an example. To mock an Add user activity, follow these steps:

1. In Visual Studio Code, go to Solution Explorer.

2. Select the Program.cs file.

3. In the Program.cs file, under builder.Services.AddTransient<IBot>(sp => add the following code:

   app.OnConversationUpdate("membersAdded", async (context, state, cancellationToken) =>
   {
      await context.SendActivityAsync($"new member added", cancellationToken: cancellationToken);
   });
   

   The OnConversationUpdate handler recognizes the members who join the conversation as described by the Add user activity.

   

4. In Agents Playground, go to Mock an Activity and select Add user.

   

   A pop-up dialog appears to preview the activity handler.

5. Select Send activity.

   

   Bot sends a response.

   

Custom activity triggers

You can use Custom activity to customize activity trigger reactionsAdded, to fit the requirements of your bot app. Agents Playground automatically populates the required properties of the activity. You can also modify the activity type and add more properties such as, MembersAdded, membersremoved, and reactionsremoved.

1. In Visual Studio Code, go to Solution Explorer.

2. Select the Program.cs file.

3. In the Program.cs file, under builder.Services.AddTransient<IBot>(sp => add the following code:

   app.OnMessageReactionsAdded(async (context, state, cancellationToken) =>
   {
      await context.SendActivityAsync($"reaction added.", cancellationToken: cancellationToken);
   });
   

   The OnMessageReactionsAdded handler identifies the reaction to append by using the ReplyToId property of the earlier conversation.

   

4. Go to Agents Playground webpage and select the latest response from Log Panel to copy replyToId.

   

5. Select Mock an Activity > Custom activity.

   

6. To customize the activity, add messageReaction under the type property.

7. Replace with the latest replyToId.

   {
     "type": "messageReaction",
     "reactionsAdded": [
       {
         "type": "like"
       }
     ],
     "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
   }
   

8. Select Send activity.

   

   Bot sends an onReactionsAdded handler in response.

   

Limitations

• Bot features enabled through app manifest aren't available, as Agents Playground doesn't process it.

• Agents Playground doesn't support all types of cards except Adaptive Cards.

• Agents Playground doesn't support the following Adaptive Card features:

  • Typeahead
  • User mention
  • Stageview
  • Full width Adaptive Card

• Agents Playground doesn't support the following experiences:

  • Mobile
  • Meeting

See also

• Microsoft 365 Agents Toolkit Overview
• Build bots for Teams
• Adaptive Card
• Bot Framework SDK