Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Microsoft Graph Toolkit is a collection of reusable, framework-agnostic components and authentication providers for accessing and working with Microsoft Graph. The components are fully functional right of out of the box, with built-in providers that authenticate with and fetch data from Microsoft Graph.
Microsoft Graph Toolkit makes it easy to use Microsoft Graph in your application. In the following example, a signed-in user and their calendar events are displayed with just two lines of code by using the Login and Agenda components.
Microsoft Graph Toolkit enables you to quickly and easily integrate common experiences powered by Microsoft Graph into your own application. The toolkit:
Cuts development time. The work to connect to Microsoft Graph APIs and render the data in a UI that looks and feels like a Microsoft 365 experience is done for you, with no customization required.
Works everywhere. All components are based on web standards and work seamlessly with any modern browser and web framework (such as React, Angular, or Vue).
Is beautiful but flexible. The components are designed to look and feel like Microsoft 365 experiences but are also customizable by using CSS custom properties and templating.
Microsoft Graph Toolkit is great for developers of all experience levels that want to develop an app that connects to and accesses data from Microsoft Graph, such as a:
Microsoft Graph Toolkit includes a collection of web components for the most commonly built experiences powered by Microsoft Graph APIs.
The components are also available as React components.
Component | Description |
---|---|
Agenda | Displays events in a user's or group's calendar. |
Chat (preview) | Displays a 1:1 or a group conversation from Microsoft Teams |
File | Represents a file or folder with an icon, a file name, an author, and more. |
File list | Displays a list of multiple files or folders. |
Get | Lets you make a GET query to any Microsoft Graph API directly in your HTML. |
Login | A button and a flyout control to authenticate a user with the Microsoft Identity platform and display the user's profile information when they sign in. |
New chat (preview) | A form to create a new 1:1 or group conversation in Microsoft Teams |
People | Displays a group of people or contacts by their photos or initials. |
People picker | Search for people and renders the list of results. |
Person | Displays a person or contact by their photo, name, and/or email address. |
Person card | A flyout used on the person component to display more profile information about a user. |
Picker | Renders a dropdown control that allows a selection of a single resource from an array of resources. |
Planner tasks | Displays and enables adding, removing, completing, or editing of tasks from Microsoft Planner or Microsoft To Do. |
Search box | Search for Microsoft Teams channels to select a channel from a rendered list of results. |
Search results | Lets you make a query to the search endpoint of Microsoft Graph directly in your HTML. |
Taxonomy picker | Use the taxonomy picker component to query the Microsoft Graph API for Taxonomy and render a dropdown control with terms. |
Teams Channel picker | Search for Microsoft Teams channels to select a channel from a rendered list of results. |
To Do | Displays and enables adding, removing, completing, or editing of tasks from Microsoft To Do. |
Providers enable authentication, provide the implementation for acquiring access tokens on various platforms, and expose a Microsoft Graph client for calling the Microsoft Graph APIs. The components work best when used with a provider, but the providers can be used on their own.
Providers | Description |
---|---|
Custom | Creates a custom provider to enable authentication and access to Microsoft Graph by using your application's existing authentication code. |
Electron | Authenticates and provides Microsoft Graph access to components inside of Electron apps. |
MSAL2 | Uses msal-browser to sign in users and acquire tokens to use with Microsoft Graph. |
Proxy | Allows the use of backend authentication by routing all calls to Microsoft Graph through your backend. |
SharePoint | Authenticates and provides Microsoft Graph access to components inside of SharePoint web parts. |
TeamsFx | Use the TeamsFx provider inside your Microsoft Teams applications to provide Microsoft Graph Toolkit components access to Microsoft Graph. |
Microsoft Graph Toolkit is supported in the following browsers:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Edge | Firefox | Chrome | Safari | Opera | Samsung |
Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowTraining
Module
Get started with Microsoft Graph Toolkit - Training
Learn how to use Microsoft Graph Toolkit, a set of web components and authentication providers to connect your web app to Microsoft Graph and load data from Microsoft 365. You can use Microsoft Graph Toolkit in any JavaScript framework.
Certification
Microsoft Certified: Power Platform Developer Associate - Certifications
Demonstrate how to simplify, automate, and transform business tasks and processes using Microsoft Power Platform Developer.
Documentation
Use Graph Explorer to try Microsoft Graph APIs - Microsoft Graph
Try Microsoft Graph APIs on the default sample tenant to explore capabilities, or sign in to your tenant and use it as a prototyping tool to fulfill your app scenarios.
Permissions in Microsoft Graph Toolkit - Microsoft Graph
Get an overview of how Microsoft Graph Toolkit manages permissions.
Microsoft Graph tutorials - Microsoft Graph
Create a basic application that accesses data via Microsoft Graph in 30 minutes by using a step-by-step Microsoft Graph tutorial.