Get started with Microsoft Graph Toolkit

  • Article

Microsoft Graph Toolkit components can easily be added to your web application, SharePoint web part, or Microsoft Teams tabs. The components are based on web standards and can be used in both plain JavaScript projects or with popular web frameworks such as Reach, Angular, and Vue.js.

Watch this short video to get started using the toolkit.

For a step-by-step tutorial, see the Get started with Microsoft Graph Toolkit module.

Set up your Microsoft 365 tenant

To use Microsoft Graph Toolkit to develop an app, you need access to a Microsoft 365 tenant. If you don't have a Microsoft 365 tenant, you might qualify for one through the Microsoft 365 Developer Program; for details, see the FAQ. Alternatively, you can sign up for a 1-month free trial or purchase a Microsoft 365 plan.

Set up your development environment

To develop with the toolkit, you need:

  • A text editor or IDE. You can use the editor or IDE of your choice, or you can install and use Visual Studio Code for free.
  • A modern web browser such as Microsoft Edge, Google Chrome, or Firefox.
  • An LTS version of Node.js, which you can install from nodejs.org.

Use Microsoft Graph Toolkit

You can use Microsoft Graph Toolkit in your application by installing the npm packages or referencing the loader directly (via unpkg).

Using the toolkit via ES6 modules gives you full control of the bundling process and allows you to bundle only the code that you need for your application. To use the ES6 modules, add the @microsoft/mgt-element, @microsoft/mgt-components, and @microsoft/mgt-msal2-provider packages to your project:

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider

To use the components as a custom element in HTML, they must be registered. To use the components in your code, import and run the necessary component registration function. The following example shows how to do that for the agenda and login components:

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtLoginComponent, registerMgtAgendaComponent } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
  registerMgtAgendaComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

As a shortcut, if you want to register all the components from @microsoft/mgt-components, you can use the registerMgtComponents() helper method. Declarative usage of providers still requires that the appropriate provider is registered separately because they are sourced from different packages.

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtComponents();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

Important

When working with a tree-shaking supporting bundler such as Webpack or Rollup, you will want to import and register the individual components. This ensures that any unused components are tree-shaken out of your builds.

You can also configure the provider imperatively, as shown in the following example:

<script type="module">
  import { Providers } from 'node_modules/@microsoft/mgt-element/dist/es6/index.js';
  import { Msal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  Providers.globalProvider = new Msal2Provider({clientId: '<YOUR_CLIENT_ID>'});
  registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>