Edit

Share via

Debug in Teams desktop client

  • Article

Microsoft Teams Toolkit helps you to debug and preview your Microsoft Teams app in desktop client. During the debug process, Teams Toolkit automatically starts app services, opens debuggers, and uploads Teams app. You can preview your Teams app in Teams desktop client after debugging.

The following are the advantages of Teams desktop client:

  • Improves performance.
  • Reduces time-to-F5.
  • Improves coverage of debug targets.

Capabilities of Teams desktop client

Teams desktop client incorporates debugging capabilities in the following app templates scaffolded by the Teams Toolkit:

  • Bot.
  • Agent.
  • Custom engine agent.
  • Message extension.

Prerequisites

Ensure you install the following tools for building and deploying your app in Teams desktop client:

  Install For using...
  Teams Toolkit A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest prerelease version.
  Node.js Back-end JavaScript runtime environment. For more information, see node.js version compatibility table for project type.
  Visual Studio Code JavaScript, TypeScript, or SharePoint Framework (SPFx) build environments. Use the latest version.
  Microsoft 365 developer account Access to Teams account with the appropriate permissions to install an app.

Debug in Teams desktop client

To debug your custom engine agent app in Teams desktop client

  1. Open Visual Studio Code (VS Code) and log into your Microsoft 365 account through Teams Toolkit.

  2. Select the Teams Toolkit icon in the VS Code Activity Bar and then select Create a New App.

    Screenshot shows the location of the Create New Project link in the Teams Toolkit sidebar.

  3. Select Custom Engine Agent.

    Screenshot shows the Teams Toolkit app templates.

  4. Select Basic AI Chatbot.

    Screenshot shows the app capabilities to add to your new app.

  5. Select JavaScript.

    Screenshot shows the option to select the programming language.

  6. Select OpenAI.

    Screenshot shows LLM in Visual Studio Code.

  7. Enter the OpenAI service key.

    Screenshot shows to enter openai service key in Visual Studio Code.

  8. Select Default folder.

    Screenshot shows the selection of default location.

    To change the default location, follow these steps:

    1. Select Browse.

      Screenshot shows the option to browse and select the location.

    2. Select the location for the project workspace.

    3. Select Select Folder.

      Screenshot shows the folder to select.

  9. Enter a suitable name for your app and then select the Enter key.

    Screenshot shows where to enter the app name.

  10. From the left pane, select Run and Debug (Ctrl+Shift+D) and select Debug in Teams (Desktop) from the dropdown list.

    Screenshot shows the option to select debug in Teams (Desktop).

  11. Ensure your Teams desktop login matches your Microsoft 365 account used in Teams Toolkit and then select Continue.

    Screenshot shows the desktop login.

    Teams desktop client requests to add your app.

  12. Select Add.

    Screenshot shows the add button to add the app to Teams desktop client.

    A chat window opens.

  13. From the message compose area, send a message to invoke the bot.

    Screenshot shows the app added to Teams desktop client.

    Note

    The system level notification for account matching appears only once per project. In subsequent debug sessions, Teams Toolkit sends reminders about the account through VS Code notifications.

    Screenshot shows the subsequent desktop login notification in vs code.

  14. You can add breakpoints and hot reload your changes. In the following example, the breakpoint is highlighted with the red dot next to the row number.

    Screenshot shows an example of the breakpoints in app.

    Screenshot shows an example after hot reload of an app.

You can continue to debug your custom engine agent app in Teams desktop client.

See also