{"id":16365,"date":"2023-11-14T08:20:21","date_gmt":"2023-11-14T16:20:21","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=16365"},"modified":"2023-11-14T12:25:27","modified_gmt":"2023-11-14T20:25:27","slug":"introducing-new-chat-components-with-the-microsoft-graph-toolkit","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/introducing-new-chat-components-with-the-microsoft-graph-toolkit\/","title":{"rendered":"Introducing new chat components with the Microsoft Graph Toolkit"},"content":{"rendered":"<p>One of the most common requests we receive is to enable embedding Microsoft Teams conversation into third-party apps. Developers want to build apps to let users collaborate seamlessly, without having to constantly switch between multiple tools. We are pleased to announce the public preview of the Microsoft Teams chat controls for Microsoft Graph, powered by <a href=\"https:\/\/aka.ms\/mgt\">Microsoft Graph Toolkit<\/a> and the <a href=\"https:\/\/azure.github.io\/communication-ui-library\">Azure Communication Services UI Library<\/a>.<\/p>\n<p>Chat components enable developers to add collaboration quickly and easily to their apps without thinking about writing complex integration code.<\/p>\n<p><div style=\"width: 1920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16365-1\" width=\"1920\" height=\"1080\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/Build-2023-Graph-Chat-Scenarios.mp4?_=1\" \/><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/Build-2023-Graph-Chat-Scenarios.mp4\">https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/Build-2023-Graph-Chat-Scenarios.mp4<\/a><\/video><\/div><\/p>\n<h2>Embed your Teams conversations in any web application<\/h2>\n<p>The controls provided by the UI Library support core chat capabilities for Teams chat. They display a single chat thread that the user can interact with to communicate with a Teams user or a group of users on the other side. The client supports rich chat capabilities like rich text rendering, images, GIFs, emojis and more. These controls respect the policies set for your Teams tenant. The conversations you have can always be resumed in the full Teams client so you can pick up right where you left off.<\/p>\n<p><img decoding=\"async\" width=\"783\" height=\"737\" class=\"wp-image-16366 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-chat-description-automatically.png\" alt=\"A screenshot of a chat Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-chat-description-automatically.png 783w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-chat-description-automatically-300x282.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-chat-description-automatically-768x723.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-chat-description-automatically-24x24.png 24w\" sizes=\"(max-width: 783px) 100vw, 783px\" \/><\/p>\n<h2>Create new chats and provide context<\/h2>\n<p>Developers can build an experience allowing users to create new one-on-one and group conversations. When initiating new chats, you provide additional context for the conversation (see below).<\/p>\n<p><img decoding=\"async\" width=\"589\" height=\"384\" class=\"wp-image-16367 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-chat-description-automatically-1.png\" alt=\"A screenshot of a chat Description automatically generated\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-chat-description-automatically-1.png 589w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/11\/a-screenshot-of-a-chat-description-automatically-1-300x196.png 300w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/p>\n<p>We&#8217;ve heard your feedback and pulled together multiple products and services to deliver this solution:<\/p>\n<ul>\n<li><a href=\"https:\/\/aka.ms\/mgt\">Microsoft Graph Toolkit<\/a> is providing the authentication, connectivity to Microsoft Graph and the overall user experience to deliver the outside-in messaging scenarios<\/li>\n<li><a href=\"https:\/\/azure.github.io\/communication-ui-library\/?path=\/story\/quickstarts-uicomponents--page\">Azure Communicaton Services Web UI Library<\/a> is providing the chat UI controls and components for a seamless look and feel<\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/graph\/api\/resources\/chatmessage?view=graph-rest-1.0\">Microsoft Graph APIs<\/a> for all chat operations<\/li>\n<\/ul>\n<h2>Delivering developers, users, and admins value<\/h2>\n<p>Not only are the components complete and allow for complex collaboration scenarios, but they are easy to integrate. You can access this capability via <a href=\"https:\/\/www.npmjs.com\/package\/@microsoft\/mgt-chat\">a new package<\/a> delivering the components as React standalone components. Any app that can leverage React can take advantage of our components to increase the collaboration for users of Microsoft 365.<\/p>\n<p>The components are fully built on top of Microsoft Graph, reusing the same permission model administrators are used to and built on the data that lives within Microsoft 365, offering the same level of security, compliance, performance, and scalability for apps leveraging our components.<\/p>\n<p>This feature takes advantage of real-time endpoints, high-capacity APIs and is subject to the same billing model described in the <a href=\"https:\/\/learn.microsoft.com\/graph\/teams-licenses\">payment models and licensing requirements for Microsoft Teams APIs<\/a>.<\/p>\n<h2>Get started<\/h2>\n<p>If you would like to get access to this set of capabilities, please visit our <a href=\"https:\/\/learn.microsoft.com\/graph\/toolkit\/get-started\/use-toolkit-with-react?pivots=mgt-react-chat\">getting started guide<\/a>. This preview will evolve and might require code changes as we move towards the general availability of the components. Your feedback is very welcome, and we would love to <a href=\"https:\/\/aka.ms\/mgt\/issues\">hear from you<\/a>!<\/p>\n<h2>Additional resources<\/h2>\n<ul>\n<li>Share <a href=\"https:\/\/aka.ms\/mgt\/issues\">feedback and issues<\/a><\/li>\n<li>Learn more about the <a href=\"https:\/\/aka.ms\/mgt\">Microsoft Graph Toolkit<\/a> and <a href=\"https:\/\/azure.github.io\/communication-ui-library\/?path=\/story\/quickstarts-uicomponents--page\">Azure Communication Services UI Library<\/a><\/li>\n<li>Subscribe to our <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/\">Microsoft 365 Developer blog<\/a><\/li>\n<li>Follow us on X (Twitter) \/\u00a0<a href=\"https:\/\/twitter.com\/Microsoft365Dev\">@Microsoft365Dev<\/a><\/li>\n<\/ul>\n<p>Happy hacking!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Announcing the public preview of the Microsoft Teams chat controls for Microsoft Graph, powered by Microsoft Graph Toolkit and the Azure Communication Services UI Library.<\/p>\n","protected":false},"author":69087,"featured_media":16382,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,128],"tags":[119,249,34,223],"class_list":["post-16365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","category-microsoft-teams","tag-azure-communication-services","tag-microsoft-graph-teams-apis","tag-microsoft-graph-toolkit","tag-microsoft-teams"],"acf":[],"blog_post_summary":"<p>Announcing the public preview of the Microsoft Teams chat controls for Microsoft Graph, powered by Microsoft Graph Toolkit and the Azure Communication Services UI Library.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/16365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69087"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=16365"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/16365\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/16382"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=16365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=16365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=16365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}