Skip to content


Repository files navigation

Microsoft 365 and Graph Code Sample - Meeting Moderator


This sample demonstrates usage of Microsoft Graph to implement small group breakouts in a large Microsoft Teams meeting.

The sample is a web application built with React and Microsoft Graph Toolkit. The app can run as a web app in the browser, a personal or group tab app in Microsoft Teams, or a Progressive Web app on most modern desktop and mobile operating systems.

Watch the live stream where we showed how the app was built


Run the sample

In a terminal:

git clone

cd meeting-moderator-sample

npm install

npm start

The app will launch in your browser at http://localhost:3000. Sign in with your tenant credentials and consent to the permissions (make sure the user has ability to Admin consent).

The app will load the current signed in user's calendar with the option to moderate individual events.

Note: Only Microsoft Teams online meetings will be available for moderation. All other events will be grayed out.

Create an Azure Active Directory (AAD) application

The sample already contains a client id for an AAD application to allow you to get started immediately. However, we recommend creating your own so you have full control of the application.

To create your own AAD app and client id, follow the instructions in this blog post, under Register your application.

This step is required for the next section. The client id is defined in src\index.tsx

Installing the sample as a Teams application

This sample is also a Microsoft Teams tab application and you can install it in your instance by following these instructions.

1. Run ngrok

To install it in your Teams environment, Microsoft Teams requires the app to be publicly accessible using HTTPS endpoint. To accomplish this, you can use ngrok, a tunneling software, which creates an externally addressable URL for a port you open locally on your machine:

  1. Install ngrok

    npm install -g ngrok
  2. Ensure the app is running locally on http://localhost:3000. Start ngrok and attach it to port 3000

    ngrok http 3000

    This will generate a public url (similar to that you can use to access the app. You will use this url in your Teams manifest.

2. Add ngrok url to your AAD application

Now that ngrok is running, you need to add this url to your AAD application redirect urls. If you have not created a new AAD application, make sure you do that first before continuing (see section above).

3. Update Teams manifest and install application

To update the manifest, you will need to install the Microsoft Team Extension in VS code. Once you've installed the extension, open .publish/Development.env and replace the baseUrl0 with your ngrok url. Save the file.

Once the file is saved, the package will be automatically updated. You can now use this package to install the application in Microsoft Teams:

  1. In Microsoft Teams, click on Apps in the lower left corner

  2. Click on Upload a custom app. This will open the file picker. Select to install the application.

Using the Moderator Bot

This sample also includes a helpful bot for helping the moderator keep track of questions from the attendees. See the bot branch for description and instructions on deploying and running the bot in your Azure Subscription.

Useful Links


No description or website provided.




Security policy





No releases published


No packages published

Contributors 4