From aa9332261d4b645602b2f584dc01249a92751936 Mon Sep 17 00:00:00 2001 From: Corina <14900841+corinagum@users.noreply.github.com> Date: Fri, 7 Feb 2025 13:08:25 -0800 Subject: [PATCH] [JS] chore: Add clarity to chef bot README's (#2300) ## Linked issues closes: #2299 ## Details - Minor cleanup of streaming `index.ts` - Changed likely embedding deployment name in `VectraDataSource` - Add note to change embeddings settings in `VectraDataSource` in the README.md - Other minor cleanup of README.md ## Attestation Checklist - [x] My code follows the style guidelines of this project - I have checked for/fixed spelling, linting, and other errors - I have commented my code for clarity - I have made corresponding changes to the documentation (updating the doc strings in the code is sufficient) - My changes generate no new warnings - I have added tests that validates my changes, and provides sufficient test coverage. I have tested with: - Local testing - E2E testing in Teams - New and existing unit tests pass locally with my changes --------- Co-authored-by: Corina Gum <> --- .../i.teamsChefBot-streaming/README.md | 71 +++++++++++++------ .../src/VectraDataSource.ts | 2 +- .../i.teamsChefBot-streaming/src/index.ts | 3 +- 3 files changed, 50 insertions(+), 26 deletions(-) diff --git a/js/samples/04.ai-apps/i.teamsChefBot-streaming/README.md b/js/samples/04.ai-apps/i.teamsChefBot-streaming/README.md index 7d5d777f9a..5ad6ce5802 100644 --- a/js/samples/04.ai-apps/i.teamsChefBot-streaming/README.md +++ b/js/samples/04.ai-apps/i.teamsChefBot-streaming/README.md @@ -1,17 +1,21 @@ -# Microsoft Teams Conversational Bot with AI: Teams Chef +# Microsoft Teams Conversational Streaming Bot with AI: Teams Chef This is a conversational streaming bot for Microsoft Teams that thinks it's a Chef to help you cook apps using the Teams AI Library. The bot uses the `gpt-4o` model to chat with Teams users and respond in a polite and respectful manner, staying within the scope of the conversation. +> **PLEASE NOTE**, while you can use Teams Toolkit to help provision your bot, streaming is not currently available in Teams in the browser. To test, you will need to use the Teams client. + -- [Microsoft Teams Conversational Bot with AI: Teams Chef](#microsoft-teams-conversational-bot-with-ai-teams-chef) - - [Summary](#summary) - - [Setting up the sample](#setting-up-the-sample) - - [Testing the sample](#testing-the-sample) - - [Using Teams Toolkit for Visual Studio Code](#using-teams-toolkit-for-visual-studio-code) - - [Using Teams App test tool](#using-teams-app-test-tool) +- [Microsoft Teams Conversational Streaming Bot with AI: Teams Chef](#microsoft-teams-conversational-streaming-bot-with-ai-teams-chef) + - [Summary](#summary) + - [Streaming](#streaming) + - [Setting up the sample](#setting-up-the-sample) + - [Setting up AI keys](#setting-up-ai-keys) + - [Testing the sample](#testing-the-sample) + - [Using Teams Toolkit for Visual Studio Code](#using-teams-toolkit-for-visual-studio-code) + - [Using Teams App test tool](#using-teams-app-test-tool) @@ -27,17 +31,17 @@ In addition, the sample illustrates our streaming feature. The following configurations are needed: -- Use the `DefaultAugmentation` class -- Set `stream: true` in the `OpenAIModel` declaration +- Use the `DefaultAugmentation` class +- Set `stream: true` in the `OpenAIModel` declaration Optional additions: -- Set the informative message in the `ActionPlanner` declaration via the `startStreamingMessage` config. +- Set the informative message in the `ActionPlanner` declaration via the `startStreamingMessage` config. -- Set attachments in the final chunk via the `endStreamHandler` in the `ActionPlanner` declaration. - - Useful methods include - - `streamer.setAttachments([...attachments])` - - `streamer.getMessage()` +- Set attachments in the final chunk via the `endStreamHandler` in the `ActionPlanner` declaration. + - Useful methods include + - `streamer.setAttachments([...attachments])` + - `streamer.getMessage()` ```js const model = new OpenAIModel({ @@ -74,17 +78,21 @@ git clone https://github.com/Microsoft/teams-ai.git > If you opened this sample from the Sample Gallery in Teams Toolkit, you can skip to step 2. ```bash -cd path/to/04.ai-apps/a.teamsChefBot +cd path/to/04.ai-apps/i.teamsChefBot code . ``` +## Setting up AI keys + +1. Please note that you will need to update several files with your OpenAI key or Azure OpenAI key and endpoint values depending on which you plan to use. + 2. Add your OpenAI key to the `SECRET_OPENAI_KEY` variable in the `./env/.env.local.user` file and comment out lines 90-93 in `./src/index.ts` file. If you are using Azure OpenAI then follow these steps: -- Comment the `SECRET_OPENAI_KEY` variable in the `./env/.env.local.user` file. -- Add your Azure OpenAI key and endpoint values to the `SECRET_AZURE_OPENAI_KEY` and `SECRET_AZURE_OPENAI_ENDPOINT` variables. -- Open the `teamsapp.local.yml` file and modify the last step to use Azure OpenAI variables instead: +- Comment the `SECRET_OPENAI_KEY` variable in the `./env/.env.local.user` file. +- Add your Azure OpenAI key and endpoint values to the `SECRET_AZURE_OPENAI_KEY` and `SECRET_AZURE_OPENAI_ENDPOINT` variables. +- Open the `teamsapp.local.yml` file and modify the last step to use Azure OpenAI variables instead: ```yml - uses: file/createOrUpdateEnvironmentFile @@ -98,8 +106,23 @@ If you are using Azure OpenAI then follow these steps: AZURE_OPENAI_ENDPOINT: ${{SECRET_AZURE_OPENAI_ENDPOINT}} ``` -- Open `./infra/azure.bicep` and comment out lines 72-75 and uncomment lines 76-83. -- Open `./infra/azure.parameters.json` and replace lines 20-22 with: +Comment out whichever API you are not using in the `./src/VectraDataSource.ts` file. + +```ts +// If you are using Azure OpenAI. +const embeddings = new OpenAIEmbeddings({ + // model: 'text-embedding-ada-002', + // apiKey: options.apiKey, + + // Azure OpenAI Support + azureApiKey: options.azureApiKey, + azureDeployment: 'text-embedding-ada-002', + azureEndpoint: options.azureEndpoint +}); +``` + +- Open `./infra/azure.bicep` and comment out lines 72-75 and uncomment lines 76-83. +- Open `./infra/azure.parameters.json` and replace lines 20-22 with: ```json "azureOpenAIKey": { @@ -114,6 +137,8 @@ If you are using Azure OpenAI then follow these steps: 3. Update `./src/prompts/chat/config.json` and `./src/index.ts` with your model deployment name. +4. Update `./src/VectraDataSource.ts` with your embedding model/deployment name. + ## Testing the sample The easiest and fastest way to get up and running is with Teams Toolkit as your development guide. To use Teams Toolkit to automate setup and debugging, please [continue below](#using-teams-toolkit-for-visual-studio-code). @@ -140,9 +165,9 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual If you are using Azure OpenAI then follow these steps: -- Comment the `SECRET_OPENAI_KEY` variable in the `./env/.env.testtool` file. -- Add your Azure OpenAI key and endpoint values to the `SECRET_AZURE_OPENAI_KEY` and `SECRET_AZURE_OPENAI_ENDPOINT` variables -- Open the `teamsapp.testtool.yml` file and modify the last step to use Azure OpenAI variables instead: +- Comment the `SECRET_OPENAI_KEY` variable in the `./env/.env.testtool` file. +- Add your Azure OpenAI key and endpoint values to the `SECRET_AZURE_OPENAI_KEY` and `SECRET_AZURE_OPENAI_ENDPOINT` variables +- Open the `teamsapp.testtool.yml` file and modify the last step to use Azure OpenAI variables instead: ```yml - uses: file/createOrUpdateEnvironmentFile diff --git a/js/samples/04.ai-apps/i.teamsChefBot-streaming/src/VectraDataSource.ts b/js/samples/04.ai-apps/i.teamsChefBot-streaming/src/VectraDataSource.ts index 2ad54d7417..06e7519af0 100644 --- a/js/samples/04.ai-apps/i.teamsChefBot-streaming/src/VectraDataSource.ts +++ b/js/samples/04.ai-apps/i.teamsChefBot-streaming/src/VectraDataSource.ts @@ -82,7 +82,7 @@ export class VectraDataSource implements DataSource { // Azure OpenAI Support azureApiKey: options.azureApiKey, - azureDeployment: 'embedding', + azureDeployment: 'text-embedding-ada-002', azureEndpoint: options.azureEndpoint }); diff --git a/js/samples/04.ai-apps/i.teamsChefBot-streaming/src/index.ts b/js/samples/04.ai-apps/i.teamsChefBot-streaming/src/index.ts index 0139657e4f..d05a510495 100644 --- a/js/samples/04.ai-apps/i.teamsChefBot-streaming/src/index.ts +++ b/js/samples/04.ai-apps/i.teamsChefBot-streaming/src/index.ts @@ -18,8 +18,7 @@ import { PromptManager, TurnState, TeamsAdapter, - PromptCompletionModelResponseReceivedEvent, - StreamingResponse + PromptCompletionModelResponseReceivedEvent } from '@microsoft/teams-ai'; import { addResponseFormatter } from './responseFormatter';