Message Extension with Vector Search (Azure Cognitive Search) and Azure OpenAI

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, Outlook for Windows desktop and web experiences.

Get started with the template

Prerequisites

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

Node.js, supported versions: 16, 18

A Microsoft 365 account for development

Set up your dev environment for extending Teams apps across Microsoft 365 Please note that after you enrolled your developer tenant in Office 365 Target Release, it may take couple days for the enrollment to take effect.

Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or Teams Toolkit CLI

Azure Subscription

Setup and vectorization

Create Azure OpenAI service on Azure with text-embeddings-ada-002 deployment model: Create and deploy an Azure OpenAI Service resource
Create Azure Cognitive Search on Azure: (Create an Azure Cognitive Search service in the portal)[https://learn.microsoft.com/en-us/azure/search/search-create-service-portal]

Go to src > embeddings-setup.js file in the project and replace the following environment variables with your Azure OpenAI and Cognitive Search variables:

//Set Azure Cognitive Search parameters from environment variables
const searchServiceEndpoint = "<your-azure-search-service-endpoint>";
const searchServiceApiKey = "<your-azure-search-service-api-key>";
const searchIndexName = "<your-azure-search-index-name>";
// Set Azure OpenAI API parameters from environment variables
const apiKey = "<your-azure-openai-api-key>";
const apiBase = `<your-azure-openai-api-endpoint>`;
const apiVersion = "2023-05-15";
const deploymentName = "<your-azure-openai-deployment-name>";

Run the following statement in the command line to generate embeddings for a documents payload for indexing and also generate an embedding for a vector query:
```
node src/embeddings-setup.js
```

Debug message extension on Teams

Go to env folder in your project root and rename .env.local.user.sample to .env.local.user. Also rename .env.local.sample to .env.local and replace the the following environment variables with your Azure OpenAI and Cognitive Search variables:
```
AZURE_OPENAI_SERVICE_NAME=
AZURE_OPENAI_DEPLOYMENT_NAME=
AZURE_OPENAI_API_VERSION=
AZURE_OPENAI_API_KEY=
AZURE_SEARCH_ENDPOINT=
AZURE_SEARCH_ADMIN_KEY=
AZURE_SEARCH_INDEX_NAME=
```
Select the Teams Toolkit icon on the left in the VS Code toolbar.
In the Account section, sign in with your Microsoft 365 account if you haven't already.
Press F5 to start debugging which launches your app in Teams using a web browser. Select Debug (Edge) or Debug (Chrome).
When Teams launches in the browser, select the Add button in the dialog to install your app to Teams.
To trigger the Message Extension, you can search for "tools for software development" or search in another language, this search should work multilingual.
To test out the filter capability with vector search, go to src > searchApp.js and replace doPureVectorSearch in line 15 with doVectorSearchWithFilter. Search for the same query as above and observe more refined answer in response.
To test out Hybrid search with vector and semantic, go to src > searchApp.js and replace doPureVectorSearch in line 15 with doSemanticHybridSearch. Search for "Scalable storage solutions" and observe refined answer in response.

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

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.js`	Handles the business logic for this app template to query npm registry and return result list.
`src/index.js`	`index.js` is used to setup and configure the Message Extension.
`src/cogSearch.js`	Handles Vector Search functions to retreive response from Azure Cognitive Search.
`src/embeddings-setup.js`	`embeddings-setup` is used to setup and configure embeddings for Vector Search in Azure Cognitive Search.

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