Enabling an existing app, new features in Teams Toolkit for Copilot plugins

Introduction

This post will focus on adjusting your app configuration to take advantage of the Copilot licensed tenant enabling features in the Teams Toolkit that seamlessly integrate with the Copilot plugins.

For this post I have used a Pre-release: v5.7.2024032007 onwards to explore these capabilities.

Note: You will need a tenant with a Copilot license activated and Plugins enabled, with Teams App Side Loading enabled. Additionally, I found that adding these settings hasn’t yet surfaced in Copilot, thinking this might be consumed in a later build.

Enable in existing app

Firstly, to enable the plugin features, within the settings.json file add the following line:

"fx-extension.developCopilotPlugin": true

This will turn on these new features, you may have to restart Visual Studio Code to see the effects.

Teams Toolkit Enable Copilot Features

An example of new checks added to Microsoft 365 Tenant Account within Teams Toolkit extension:

Showing an example of the change this enables

Adding “Debug in Copilot” to an existing project

New debug options are available within the Toolkit, to enable these, modify the following files below:

Launch.json

Within launch.json within these sections, make the following changes:

{
    "version": "0.2.0",
    "configurations": [
      ...
    ],
    "compounds": [
      ...
    ]
}

Under configurations array, add the following block:

{
    "name": "Launch Remote in Copilot (Edge)",
    "type": "msedge",
    "request": "launch",
    "url": "https://teams.microsoft.com?${account-hint}",
    "presentation": {
        "group": "group 2: Copilot",
        "order": 3
    },
    "internalConsoleOptions": "neverOpen"
},
{
    "name": "Launch Remote in Copilot (Chrome)",
    "type": "chrome",
    "request": "launch",
    "url": "https://teams.microsoft.com?${account-hint}",
    "presentation": {
        "group": "group 2: Copilot",
        "order": 3
    },
    "internalConsoleOptions": "neverOpen"
},

{
    "name": "Launch App in Copilot (Edge)",
    "type": "msedge",
    "request": "launch",
    "url": "https://teams.microsoft.com?${account-hint}",
    "cascadeTerminateToConfigurations": [
        "Attach to Local Service"
    ],
    "presentation": {
        "group": "all",
        "hidden": true
    },
    "internalConsoleOptions": "neverOpen"
},
{
    "name": "Launch App in Copilot (Chrome)",
    "type": "chrome",
    "request": "launch",
    "url": "https://teams.microsoft.com?${account-hint}",
    "cascadeTerminateToConfigurations": [
        "Attach to Local Service"
    ],
    "presentation": {
        "group": "all",
        "hidden": true
    },
    "internalConsoleOptions": "neverOpen"
},

Tip: If you want In-Private for Edge then add after “internalConsoleOptions” line, the following line:

"runtimeArgs": ["--inprivate"]

In compound array add the following block:


{
    "name": "Debug in Copilot (Edge)",
    "configurations": [
        "Launch App in Copilot (Edge)",
        "Attach to Local Service"
    ],
    "preLaunchTask": "Start Teams App Locally (Copilot)",
    "presentation": {
        "group": "group 2: Copilot",
        "order": 1
    },
    "stopAll": true
},
{
    "name": "Debug in Copilot (Chrome)",
    "configurations": [
        "Launch App in Copilot (Chrome)",
        "Attach to Local Service"
    ],
    "preLaunchTask": "Start Teams App Locally (Copilot)",
    "presentation": {
        "group": "group 2: Copilot",
        "order": 2
    },
    "stopAll": true
}

Update Tasks.json

Within tasks.json within these sections, make the following changes:

{
    "version": "2.0.0",
    "tasks": [
      ...
    ]
}

Add:

{
    "label": "Start Teams App Locally (Copilot)",
    "dependsOn": [
        "Validate prerequisites",
        "Validate Copilot access",
        "Start local tunnel",
        "Provision",
        "Deploy",
        "Start application"
    ],
    "dependsOrder": "sequence"
},

{
    // Check Copilot access.
    // See https://aka.ms/teamsfx-tasks/check-prerequisites to know the details and how to customize the args.
    "label": "Validate Copilot access",
    "type": "teamsfx",
    "command": "debug-check-prerequisites",
    "args": {
        "prerequisites": [
            "copilotAccess" // Validate if the account has Copilot access.
        ]
    }
},

To validate this worked, you should now see new options in your debug menu options.

Teams Toolkit Debug Options

What is the result of these changes?

The changes made to the project files are to enable the new features of the Copilot plugin in the Teams Toolkit. These changes allow you to debug your app in Copilot, and launch your app in Copilot.

Teams Toolkit Change Result

What Can I do if this does not work

Install a pre-release of the Teams Toolkit Visual Studio Code extension, enable the Copilot features, and generate a boilerplate project to see the changes made to the project files, then compare to an existing project, the changes made by the toolkit.

It is worth noting that some of the capabilities at the time of writing did not appear to be active and may not yet appear in the public release of Copilot.

Conclusion

In this post, I covered technical setup of enabling the Copilot related capabilities within Teams Toolkit, although I wouldnt be surprised that the Teams Toolkit will handle transitions from older configuration to the new versions. Not all these capabilities are fully documented, but it’s good to be prepared for when they are, to help your Copilot development journey. In fairness, I am playing with the preview versions where they might be ahead of any documentation.

Resources

Here are more resources to learn this and related topics further:

Transparency Notice: Content within this post was assisted with AI to speed up the writing process and experimentation on my part, accuracy has been checked and adjusted where needed.

Enjoy!