Name	Name	Last commit message	Last commit date
parent directory ..
.vscode	.vscode
Images	Images
appManifest	appManifest
assets	assets
bots	bots
env	env
infra	infra
.env	.env
.eslintrc.js	.eslintrc.js
.gitignore	.gitignore
README.md	README.md
aad.manifest.json	aad.manifest.json
build.js	build.js
index.js	index.js
m365agents.local.yml	m365agents.local.yml
m365agents.yml	m365agents.yml
package-lock.json	package-lock.json
package.json	package.json

page_type

sample

description

This sample app can be use to streaming scenarios in Teams using Azure Open AI and Bot Framework v4 for personal scope.

products

office-teams

languages

nodejs

extensions

contentType	createdDate
samples	11/18/2024

urlFragment

officedev-microsoft-teams-samples-bot-streaming-nodejs

Teams Streaming Bot Sample

This bot has been created using Bot Framework and Azure Open AI as a secondary/alternative option to using Teams AI SDK.

Its main purpose is to demonstrate how to build a bot connected to an LLM and send messages through Teams.

Included Features

Bots
Azure Open AI
Streaming
Custom Engine Agent - Copilot

Important

This bot doesn't save any context calls. Therefore, each interaction is individual and unique.

Interaction with bot

Prerequisites

Microsoft Teams is installed and you have an account
NodeJS
dev tunnel or ngrok latest version or equivalent tunnelling solution
Microsoft 365 Agents Toolkit for VS Code or TeamsFx CLI

Run the app (Using Microsoft 365 Agents Toolkit for Visual Studio Code)

The simplest way to run this sample in Teams is to use Microsoft 365 Agents Toolkit for Visual Studio Code.

Ensure you have downloaded and installed Visual Studio Code
Install the Microsoft 365 Agents Toolkit extension
Select File > Open Folder in VS Code and choose this samples directory from the repo
Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps
Select Debug > Start Debugging or F5 to run the app in a Teams web client.
In the browser that launches, select the Add button to install the app to Teams.

If you do not have permission to upload custom apps (uploading), Microsoft 365 Agents Toolkit will recommend creating and using a Microsoft 365 Developer Program account - a free program to get your own dev environment sandbox that includes Teams.

Create an Azure Open AI service

In Azure portal, create an Azure Open AI service.
Deploy Azure Open AI model: Deploy the gpt-35-turbo model in your created Azure Open AI service for the application to perform translation.
Collect AzureOpenAIEndpoint, AzureOpenAIKey, AzureOpenAIDeployment values and save these values to update in .env file later.

Register your app with Azure AD.

Register a new application in the Microsoft Entra ID – App Registrations portal.
Select New Registration and on the register an application page, set following values:
- Set name to your app name.
- Choose the supported account types (any account type will work)
- Leave Redirect URI empty.
- Choose Register.
On the overview page, copy and save the Application (client) ID, Directory (tenant) ID. You'll need those later when updating your Teams application manifest and in the appsettings.json.
Navigate to API Permissions, and make sure to add the following permissions: Select Add a permission
- Select Add a permission
- Select Microsoft Graph -> Delegated permissions.
- User.Read (enabled by default)
- Click on Add permissions. Please make sure to grant the admin consent for the required permissions.

Setup for Bot

In Azure portal, create a Azure Bot resource. - For bot handle, make up a name. - Select "Use existing app registration" (Create the app registration in Microsoft Entra ID beforehand.) - If you don't have an Azure account create an Azure free account here

In the new Azure Bot resource in the Portal, - Ensure that you've enabled the Teams Channel - In Settings/Configuration/Messaging endpoint, enter the current https URL you were given by running the tunneling application. Append with the path /api/messages

Setup

Note these instructions are for running the sample on your local machine, the tunnelling solution is required because the Teams service needs to call into the bot.

Run ngrok - point to port 3978
```
ngrok http 3978 --host-header="localhost:3978"
```
Alternatively, you can also use the dev tunnels. Please follow Create and host a dev tunnel and host the tunnel with anonymous user access command as shown below:
```
devtunnel host -p 3978 --allow-anonymous
```

Clone the repository

git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

In a terminal, navigate to samples/bot-streaming/nodejs
Install modules
```
npm install
```
Update the .env configuration for the bot to use the Microsoft App Id and App Password from the Bot Framework registration. (Note the App Password is referred to as the "client secret" in the azure portal and you can always create a new client secret anytime.) MicrosoftAppTenantId will be the id for the tenant where application is registered.

Also, set MicrosoftAppType in the .env. (Allowed values are: MultiTenant(default), SingleTenant, UserAssignedMSI)

Run your bot at the command line:
```
npm start
```
This step is specific to Teams.
- Zip up the contents of the appPackage folder to create a manifest.zip (Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)
- Upload the manifest.zip to Teams (In Teams Apps/Manage your apps click "Upload an app". Browse to and Open the .zip file. At the next dialog, click the Add button.)
- Add the app to personal scope (Supported scopes)