/sp-products-sso-me

sp-products-sso-me

Primary LanguageTypeScript

Overview of Custom Search Results template

This app template is a search-based message extension that allows users to search an external system and share results through the compose message area of the Microsoft Teams client. You can now build and run your search-based message extensions in Teams, Copilot for Windows desktop and web experiences.

Get started with the template

Prerequisites

To run the template in your local dev machine, you will need:

  1. First, select the Teams Toolkit icon on the left in the VS Code toolbar.
  2. In the Account section, sign in with your Microsoft 365 account if you haven't already.
  3. To directly trigger the Message Extension in Teams, you can:
    1. Press F5 to start debugging which launches your app in Teams using a web browser. Select Debug in Teams (Edge) or Debug in Teams (Chrome).
    2. When Teams launches in the browser, select the Add button in the dialog to install your app to Teams.
    3. @mention Your message extension from the search box area, @mention your message extension from the compose message area or click the ... under compose message area to find your message extension.
  4. To trigger the Message Extension through Copilot, you can:
    1. Select Debug in Copilot (Edge) or Debug in Copilot (Chrome) from the launch configuration dropdown.
    2. When Teams launches in the browser, click the Apps icon from Teams client left rail to open Teams app store and search for Copilot.
    3. Open the Copilot app and send a prompt to trigger your plugin.
    4. Send a message to Copilot to find an NPM package information. For example: Find the npm package info on teamsfx-react.

      Note: This prompt may not always make Copilot include a response from your message extension. If it happens, try some other prompts or leave a feedback to us by thumbing down the Copilot response and leave a message tagged with [MessageExtension].

Congratulations! You are running an application that can now search npm registries in Teams and Copilot.

Search ME Copilot

What's included in the template

Folder Contents
.vscode/ VSCode files for debugging
appPackage/ Templates for the Teams application manifest
env/ Environment files
infra/ Templates for provisioning Azure resources
src/ The source code for the search application

The following files can be customized and demonstrate an example implementation to get you started.

File Contents
src/searchApp.ts Handles the business logic for this app template to query npm registry and return result list.
src/index.ts index.ts is used to setup and configure the Message Extension.

The following are Teams Toolkit specific project files. You can visit a complete guide on Github to understand how Teams Toolkit works.

File Contents
teamsapp.yml This is the main Teams Toolkit project file. The project file defines two primary things: Properties and configuration Stage definitions.
teamsapp.local.yml This overrides teamsapp.yml with actions that enable local execution and debugging.

Extend the template

Following documentation will help you to extend the template.