Debug your AI chat bot using Teams App Test Tool

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

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 Test Tool using activity triggers.

Note

Teams App Test Tool is available only in Teams Toolkit v5.4.0.
Teams App Test Tool is supported only for desktop and web clients.

This step-by-step guide helps you to build an AI chat bot using Teams 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.
Teams Toolkit	Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use Teams Toolkit v5.4.0. For more information, see install Teams 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 Teams Toolkit icon in the Visual Studio Code Activity Bar.
Select Create a new app.
Select Bot.
Select AI Chat Bot. If you need a different functionality for your bot, select the required option.
Select 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.

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.testtool`	The configuration file with environment variables that can be committed to Git.
`env/.env.testtool.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.
`teamsapp.yml`	This is the main Teams Toolkit project file. The project file defines two primary things: Properties and configuration and stage definitions.
`teamsapp.local.yml`	This overrides `teamsapp.yml` with actions that enable local execution and debugging.
`teamsapp.testtool.yml`	This overrides `teamsapp.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 Teams 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.

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.

Update Azure Open AI key and endpoints

Open your project in Visual Studio Code.
Under EXPLORER, go to env > .env.testtool.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 select Debug in Test Tool (Preview) from the dropdown list.
The Test Tool opens your AI chat bot in a webpage.

Activity triggers

3 minutes remaining

You can mock an activity in Test Tool using activity triggers. There are two types of activity triggers:

Predefined activity triggers
Custom activity triggers

Predefined activity triggers

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

To mock an Add user activity, follow these steps:

In Test Tool, go to Mock an Activity > Add user.

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

Bot sends the following response:

Custom activity triggers

You can use Custom activity to customize activity triggers, for example, reactionsAdded to meet the requirements of your bot app. The Test Tool 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.

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 Teams App Test Tool.