Microsoft 365 Agents Playground to Debug AI Chatbot - Teams

Start Microsoft Teams app development with your Teams AI chat bot app and debug with Microsoft 365 Agents Playground (previously known as Teams App Test Tool). Agents Playground makes debugging bot-based apps effortless. You don't need a Microsoft 365 developer account, tunneling, or Teams app and bot registration to use Agents Playground.

You can chat with your bot and view the messages and Adaptive Cards as they appear in Teams. You can also mock an activity in Agents Playground using activity triggers.

Note

Agents Playground is available only in v5.4.0 of Microsoft 365 Agents Toolkit (previously known as Teams Toolkit).
Agents Playground is supported only for desktop and web clients.

This step-by-step guide helps you to build an AI chat bot using Agents Toolkit and debug with the Test Tool. You'll see the following output after you've completed this guide, where the user can access and use the AI chat bot:

Prerequisites

6 minutes remaining

Ensure you install the following tools for building and deploying your apps.

Install	For using...
Visual Studio Code or Visual Studio	JavaScript, TypeScript, or C# build environments. Use the latest version.
Microsoft 365 Agents Toolkit	Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use Agents Toolkit v5.4.0. For more information, see install Agents Toolkit.
Node.js	Back-end JavaScript runtime environment. For more information, see Node.js version compatibility table for project type.
OpenAI or Azure OpenAI	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.
Microsoft Edge (recommended) or Google Chrome	A browser with developer tools.

Create project workspace for your AI chat bot app

5 minutes remaining

Let's create your AI chat bot app.

The bot capability of a Teams app creates a chatbot or a conversational bot. It communicates with a web service, facilitating the use of its services. The bot can execute simple, automated tasks such as delivering customer service. You can get weather forecast, make reservations, or any other service offered using a conversational bot.

Screenshot shows you the app with three features. Bot is highlighted.

As you've already prepared for creating these apps, you can set up a new Teams project for creating the AI chat bot app. In this tutorial, you'll learn:

Create your bot project workspace.
Take a tour of the bot app source code.

Create your bot project workspace

If the prerequisites are in place, let's begin!

Open Visual Studio Code.
Select the Microsoft 365 Agents Toolkit icon in the Visual Studio Code Activity Bar.
Select Create a New Agent/App.
Select Agents for Teams > Azure OpenAI > enter an input in Input Azure API service key now
Select Basic Agents for Teams. If you need a different functionality for your bot, select the required option.
Select the programming language as JavaScript.
Select Default folder.

To change the default location, follow these steps:
1. Select Browse.
2. Select the location for the project workspace.
3. Select Select Folder.
4. Enter a suitable name for your app and then select the Enter key.
  
  A dialog appears, where you need to choose yes or no to trust the authors of the files in this folder.
  
  Now, you've successfully created your AI chat bot project workspace.

I ran into an issue

Take a tour of the bot app source code

After you finish scaffolding, explore the project directories and files in the EXPLORER section of the Visual Studio Code.

Screenshot shows the Teams Toolkit sample bot folder Structure.

Folder or file name	Contents
`env/.env.playground`	The configuration file with environment variables that can be committed to Git.
`env/.env.playground.user`	The configuration file with environment variables, including credentials, which aren't committed to Git by default.
`appPackage`	App manifest template files and app icons (color.png and outline.png).
`appPackage/manifest.json`	App manifest for running the app in local and remote environment.
`src/app.js`	Handles business logics for the AI chat bot.
`m365agents.yml`	This is the main Agents Toolkit project file. The project file defines two primary things: Properties and configuration and stage definitions.
`m365agents.local.yml`	This overrides `m365agents.yml` with actions that enable local execution and debugging.
`m365agents.playground.yml`	This overrides `m365agents.yml` with actions that enable local execution and debugging in Test Tool.

Build and run your AI chat bot app

4 minutes remaining

After you set up your project workspace with Agents Toolkit, build your AI chat bot project.

Create Open AI key and endpoint for your AI chat bot

Go to Azure portal.
Select Create a resource and search for Azure Open AI.
Select Azure Open AI and select Create.
Fill the required details and select Next.
Select All networks, including the internet, can access this resource and then select Next.
Fill the required details and select Next.
Select Create.

You've successfully created key and endpoint for your AI chat bot.

Note

You can also get OpenAI API key to debug your AI chat bot. For more information, see setup your API key.

I ran into an issue

Get Azure Open AI keys and endpoint

Select Go to resources.
Select Keys and Endpoint from the left pane and copy the KEY and Endpoint. You can copy either KEY 1 or KEY 2.

Save the KEY and Endpoint for further use.
Select Model deployments from the left pane and select Manage Deployments.

The Azure Open AI Studio window appears.
Select Deployments from the left pane and select + Create new deployments.
Select the following details:
1. Select gpt-35-turbo from the Select a model dropdown list.
  
  Note
  
  Only gpt-35-turbo model is supported for the AI chat bot.
2. Select 0301 (Default) from the Model version dropdown list.
3. Enter Deployment name and select Create.
Copy and save the Deployment name for further use.

I ran into an issue

Update Azure Open AI key and endpoints

Open your project in Visual Studio Code.
Under EXPLORER, go to env > .env.playground.user file.

Enter your SECRET_AZURE_OPENAI_API_KEY and SECRET_AZURE_OPENAI_ENDPOINT.

...
SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>

Go to src > app.js file.
Comment the OpenAI code and uncomment the Azure OpenAI code.

Enter your Azure Open AI deployment name in azureDefaultDeployment.

...
// Use OpenAI
// apiKey: config.openAIKey,
// defaultModel: "gpt-3.5-turbo",

azureApiKey: config.azureOpenAIKey,
azureDefaultDeployment: "gpt-35-turbo",
azureEndpoint: config.azureOpenAIEndpoint,
...

Debug and run your AI chat bot app

From the left pane, select RUN and DEBUG (Ctrl+Shift+D), and then select Debug in Agents Playground from the dropdown list.
Agents Playground opens your AI chat bot in a webpage.

I ran into an issue

Activity triggers

3 minutes remaining

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.

Category	Activity	Handler
Trigger Installation Update Activity	Install bot Uninstall bot	`onInstallationUpdate` `onInstallationUpdateAdded` `onInstallationUpdate` `onInstallationUpdateRemove`
Trigger Conversation Update Activity	Add user Add bot Add channel	`onMembersAdded` `onTeamsMembersAddedEvent` `onMembersAdded` `onTeamsMembersAddedEvent` `onTeamsChannelCreatedEvent`
	Remove user Remove bot Remove channel Remove team	`onMembersRemoved` `onTeamsMembersRemovedEvent` `onMembersRemoved` `onTeamsMembersRemovedEvent` `onTeamsChannelDeletedEvent` `onTeamsTeamDeletedEvent`
	Rename channel Rename team	`onTeamsChannelRenamedEvent` `onTeamsTeamRenamedEvent`

Note

All types of activities aren't available in all scopes. For example, you can't add or remove a channel in a personal chat or a group chat.

Predefined activity triggers are available in the Mock an Activity menu in Agents Playground.

To mock an Add user activity, follow these steps:

In Agents Playground, go to Mock an Activity > Add user.

A dialog appears to preview the activity handler.
Select Send activity.

Bot sends the following response:

I ran into an issue

Custom activity triggers

You can use Custom activity to customize activity triggers, for example, reactionsAdded to meet 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.

Select Mock an Activity > Custom activity.

Add messageReaction to customize the activity under the type property:

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

Select Send activity.

Bot sends an onReactionsAdded handler in response.

I ran into an issue

Complete challenge

2 minutes remaining

Did you come up with output like this?

Congratulations!

100% complete!

You've successfully created an AI chat bot app. Now, you've learned to debug your AI chat bot app in Agents Playground.

Share via

Debug your AI chat bot using Microsoft 365 Agents Playground

Prerequisites

Create project workspace for your AI chat bot app

Create your bot project workspace

Take a tour of the bot app source code

Build and run your AI chat bot app

Create Open AI key and endpoint for your AI chat bot

Get Azure Open AI keys and endpoint

Update Azure Open AI key and endpoints

Debug and run your AI chat bot app

Activity triggers

Predefined activity triggers

Custom activity triggers

Complete challenge

Congratulations!