Skip to content
[Preview] Collection of web components for the Microsoft Graph πŸ¦’
Branch: master
Clone or download
Latest commit c28741d May 23, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update issue templates Apr 10, 2019
.vscode Normalize all the line endings and added the .gitattributes. (#73) May 4, 2019
assets added Graff Apr 30, 2019
docs Removed Teams dependency and simplified Teams sample (#90) May 23, 2019
samples Removed Teams dependency and simplified Teams sample (#90) May 23, 2019
src published 0.1.1 May 23, 2019
tests/providers Updated tests. (#74) May 5, 2019
.editorconfig Updated formatting on component files; updated .gitignore to include … Mar 8, 2019
.gitattributes Normalize all the line endings and added the .gitattributes. (#73) May 4, 2019
.gitignore Normalize all the line endings and added the .gitattributes. (#73) May 4, 2019
.npmrc removed package-lock.json Mar 5, 2019
.prettierignore Normalize all the line endings and added the .gitattributes. (#73) May 4, 2019 updated sharepoint and teams demos May 6, 2019
LICENSE added, pull request template, and updated readme Mar 24, 2019
azure-pipelines.yml Building browser bundle (#48) Apr 7, 2019
gulpfile.js Add license header May 5, 2019
index.html cleaned up index file May 6, 2019
jest.config.js Updated tests. (#74) May 5, 2019
launch.json added chrome debugging config Jan 25, 2019
package.json published 0.1.1 May 23, 2019 Add list of components to readme May 6, 2019
rollup.config.js Normalize all the line endings and added the .gitattributes. (#73) May 4, 2019
tsconfig.bundle.json Building browser bundle (#48) Apr 7, 2019
tsconfig.json Normalize all the line endings and added the .gitattributes. (#73) May 4, 2019
tsconfig.test.json Updated tests. (#74) May 5, 2019

Microsoft Graph Toolkit (Preview)

NPM Licence code style: prettier stackoverflow Build Status

The Microsoft Graph Toolkit is a collection of web components powered by the Microsoft Graph.

Components are functional and work automatically with the Microsoft Graph

Components work with any web framework and on all all modern browsers. IE 11 is also supported

Here is a quick jsfiddle

This library is in Preview

This library is in preview and is in early development. Based on feedback from the community, all components and APIs are expected to change and improve.

Components & Documentation

The toolkit currently includes the following components:

And the following providers:

View the full documentation

Getting Started

Watch the Getting Started Video

You can use the components by referencing the loader directly (via unpkg), or installing the npm package

Use via mgt-loader:

<script src=""></script>

You can then start using the components in your html page. Here is a full working example with the Msal provider:

<script src=""></script>
<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>

<!-- <script>
    // alternatively, you can set the provider in code and provide more options
    mgt.Providers.globalProvider = new mgt.MsalProvider({clientId: '[CLIENT-ID]'});
</script> -->

NOTE: MSAL requires the page to be hosted in a web server for the authentication redirects. If you are just getting started and want to play around, the quickest way is to use something like live server in vscode.

Use via NPM:

The benefits of using MGT through NPM is that you have full control of the bundling process and you can bundle only the code you need for your site. First, add the npm package:

npm install @microsoft/mgt

Now you can reference all components at the page you are using:

<script src="node_modules/@microsoft/mgt/dist/es6/components.js"></script>

Or, just reference the component you need and avoid loading everything else:

<script src="node_modules/@microsoft/mgt/dist/es6/components/mgt-login/mgt-login.js"></script>

Similarly, to add a provider, you can add it as a component:

<script src="node_modules/@microsoft/mgt/dist/es6/components/providers/mgt-msal-provider.js"></script>

<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>

or, add it in your code:

<script type="module">
  import { Providers, MsalProvider } from '@microsoft/mgt';

  Providers.globalProvider = new MsalProvider({ clientId: '[CLIENT-ID]' });


The components work best when used with a provider. The provider exposes authentication and Microsoft Graph apis used by the components to call into the Microsoft Graph.

The toolkit contains providers for MSAL, SharePoint, Teams, and Office Add-ins (coming soon). You can also create your own providers by extending the [IProvider] abstract class.


We enthusiastically welcome contributions and feedback. Please read the contributing guide before you begin.

Feedback and Requests

For general questions and support, please use Stack Overflow where questions should be tagged with microsoft-graph-toolkit

Please use GitHub Issues for bug reports and feature requests. We highly recommend you browse existing issues before opening new issues.


Copyright (c) Microsoft and Contributors. All right reserved. Licensed under the MIT License

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact with any additional questions or comments.

You can’t perform that action at this time.