Debug your AI chat bot using Microsoft 365 Agents Playground

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.

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, learn:

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

Create your bot project workspace

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

1. Open Visual Studio Code.

2. Select the Microsoft 365 Agents Toolkit icon in the Visual Studio Code Activity Bar.

3. Select Create a New Agent/App.

   

4. Select Agents for Teams > Azure OpenAI > enter an input in Input Azure API service key now

   

5. Select Basic Agents for Teams. If you need a different functionality for your bot, select the required option.

   

6. Select the programming language as JavaScript.

   

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

Back to top

Create Open AI key and endpoint for your AI chat bot

1. Go to Azure portal.

2. Select Create a resource and search for Azure Open AI.

3. Select Azure Open AI and select Create.

   

4. Fill the required details and select Next.

   

5. Select All networks, including the internet, can access this resource and then select Next.

   

6. Fill the required details and select Next.

   

7. Select Create.

   

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

Get Azure Open AI keys and endpoint

1. Select Go to resources.

   

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

3. Select Model deployments from the left pane and select Manage Deployments.

   

   The Azure Open AI Studio window appears.

4. Select Deployments from the left pane and select + Create new deployments.

   

5. Select the following details:

6. Select gpt-35-turbo from the Select a model dropdown list.

   Note

   Only gpt-35-turbo model is supported for the AI chat bot.

7. Select 0301 (Default) from the Model version dropdown list.

8. Enter Deployment name and select Create.

   

9. Copy and save the Deployment name for further use.

   

Update Azure Open AI key and endpoints

1. Open your project in Visual Studio Code.

2. Under EXPLORER, go to env > .env.playground.user file.

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

4. Go to src > app.js file.

5. Comment the OpenAI code and uncomment the Azure OpenAI code.

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

1. From the left pane, select RUN and DEBUG (Ctrl+Shift+D), and then select Debug in Agents Playground from the dropdown list.

   

2. Agents Playground opens your AI chat bot in a webpage.

   

Back to top

There are two types of activity triggers:

1. Predefined activity triggers
2. 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.

To mock an Add user activity, follow these steps:

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

   

   A dialog appears to preview the activity handler.

2. 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. Agents Playground automatically populates the required properties of the activity. You can also modify the activity type and add more properties.

1. Select Mock an Activity > Custom activity.

   

2. Add messageReaction to customize the activity under the type property:

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

3. Select Send activity.

   

   Bot sends an onReactionsAdded handler in response.

   

Back to top

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