Teams AI library quick start guide

Get started with Teams AI library using the Chef bot sample, which is designed to to help you cook apps using the Teams AI Library. The bot uses the gpt-3.5-turbo model to chat with Teams users and respond in a polite and respectful manner, staying within the scope of the conversation.

Prerequisites

To get started, ensure that you have the following tools:

Install For using...
   
Visual Studio Code or Visual Studio JavaScript, TypeScript, or CSharp build environments. Use the latest version.
Teams Toolkit Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version.
Git Git is a version control system that helps you manage different versions of code within a repository.
Node.js Back-end JavaScript runtime environment. For more information, see Node.js version compatibility table for project type.
Microsoft Teams Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call-all in one place.
OpenAI or Azure OpenAI First create your OpenAI API key to use OpenAI's GPT. If you want to host your app or access resources in Azure, you must create an Azure OpenAI service.
Microsoft Edge (recommended) or Google Chrome A browser with developer tools.
Microsoft 365 developer account Access to Teams account with the appropriate permissions to install an app and enable custom Teams apps and turn on custom app uploading.

If you ran the samples before or encounter a runtime error, follow these steps to start fresh:
  • Check all the .env and env/.env.*.* files in the sample and delete any automatically populated values to ensure that Teams Toolkit generates new resources for you.
  • If you don’t want Teams Toolkit to generate the appId and password, update the MicrosoftAppId and MicrosoftAppPassword in the .env file with your own values.
  • Remove values or leave the values blank for SECRET_BOT_PASSWORD and TEAMS_APP_UPDATE_TIME in the .env file to avoid conflicts.

Teams Toolkit automatically provisionsMicrosoftAppId and MicrosoftAppPassword resources. If you want to use your own resources, you need to manually add them to the .env file. Teams Toolkit doesn't auto-generate the following resources:

  • An Azure OpenAI or OpenAI key
  • A database or similar storage options

Build and run the sample app

Get started with Teams AI library using the ChefBot sample. It enables your computer’s localhost to quickly execute a Teams AI library-based sample.

  1. Go to the sample.

  2. Run the following command to clone the repository.

    git clone https://github.com/microsoft/teams-ai.git
    
  3. Go to Visual Studio Code.

  4. Select File > Open Folder.

  5. Go to the location where you cloned teams-ai repo and select the teams-ai folder.

  6. Select Select Folder.

    Screenshot shows the teams-ai folder and the Select Folder option.

  7. Select View > Terminal. A terminal window opens.

  8. In the terminal window, run the following command to go to the JS folder:

    cd .\js\
    
  9. Run the following command to install dependencies:

    yarn install
    
  10. Run the following command to build dependencies:

    yarn build
    
  11. After the dependencies are installed, select File > Open Folder.

  12. Go to teams-ai > js > samples> 04.ai.a.teamsChefBot and select Select Folder. All the files for the chef bot sample are listed under the EXPLORER section in Visual Studio Code.

  13. Under EXPLORER, duplicate the sample.env file and update the duplicate file to .env.

  14. In the sample folder, update the following code in the .env configuration file:

    OPENAI_KEY=<your OpenAI key>
    
    
  15. From the left pane, select Teams Toolkit.

  16. Under ACCOUNTS, sign in to the following:

    • Microsoft 365 account
    • Azure account
  17. To debug your app, select the F5 key.

    A browser tab opens a Teams web client requesting to add the bot to your tenant.

  18. Select Add.

    Screenshot shows the option to add the app in Teams web client.

    A chat window opens.

  19. In the message compose area, send a message to invoke the bot.

    Screenshot shows an example of conversation with Teams chef bot in Teams.

The bot uses the GPT turbo 3.5 model to chat with Teams users and respond in a polite and respectful manner, staying within the scope of the conversation.

Note

If you're building a bot for the first time, it's recommended to use Teams Toolkit extension for Visual Studio code to build a bot, see Build your first bot app using JavaScript.

Build and run the sample app

  1. Go to the sample.

  2. Clone the repository to test the sample app.

    git clone https://github.com/microsoft/teams-ai.git
    
  3. Go to the dotnet folder.

    cd teams-ai/dotnet
    
  4. Go to the folder where you cloned the repository and select 04.ai.a.teamsChefBot.

  5. Select TeamsChefBot.sln. The solution opens in Visual Studio.

  6. In Visual Studio, update your OpenAI related settings in the appsettings.Development.json file.

    "OpenAI": {
    "ApiKey": "<your-openai-api-key>"
    },
    
  7. In the debug dropdown menu, select Dev Tunnels > Create a Tunnel...

    Screenshot shows an example of the Dev Tunnel and Create a Tunnel option in Visual Studio.

  8. Select the Account to use to create the tunnel. Azure, Microsoft Account (MSA), and GitHub are the account types that are supported. Update the following options:

    1. Name: Enter a name for the tunnel.
    2. Tunnel Type: Select Persistent or Temporary.
    3. Access: Select Public.
    4. Select OK. Visual Studio displays a confirmation message that a tunnel is created.

    The tunnel you created is listed under Dev Tunnels > (name of the tunnel).

  9. Go to Solution Explorer and select your project.

  10. Right-click the menu and select Teams Toolkit > Prepare Teams App Dependencies.

    Screenshot shows an example of the Prepare Teams app Dependencies option under Teams Toolkit section in Visual Studio.

    If prompted, sign in to your Microsoft 365 account. You'll receive a message that Teams app is successfully prepared.

  11. Select OK.

  12. Select F5 or select Debug > Start.

  13. Select Add. The app is added to Teams and a chat window opens.

    Screenshot shows the add option to add the app to Microsoft Teams.

  14. In the message compose area, send a message to invoke the bot.

    Screenshot shows an example of a chat window and a message from the chef bot as a reply to users message.

You can also deploy the samples to Azure using Teams Toolkit. To deploy, follow these steps:

  1. In Visual Studio, go to Solution Explorer and select your project.
  2. Right-click the menu and select Teams Toolkit > Provision in the Cloud. Toolkit provisions your sample to Azure.
  3. Right-click the menu and select Teams Toolkit > Deploy to the Cloud.

Additional tools

You can also use the following tools to run and set up a sample:

  1. Teams Toolkit CLI: You can use the Teams Toolkit CLI to create and manage Microsoft Teams apps from the command line. For more information, see Teams Toolkit CLI set up instructions.

  2. Bot Framework Emulator: The Bot Framework Emulator is a desktop application that allows you to test and debug your bot locally. You can connect to your bot by entering the bot’s endpoint URL and Microsoft App ID and password. You can then send messages to your bot and see its responses in real-time. For more information, see Bot Framework Emulator set up instructions.

  3. Manual setup: If you prefer to set up your resources manually, you can do so by following the instructions provided by the respective services. For more information, see manual set up instructions.

Next step