UI Library Overview

Important

This feature of Azure Communication Services is currently in public preview. Preview APIs and SDKs are provided without a service-level agreement, and are not recommended for production workloads. Certain features might not be supported or might have constrained capabilities. For more information, see Supplemental Terms of Use for Microsoft Azure Previews.

Note

For detailed documentation on the UI Library visit the UI Library Storybook . There you will find additional conceptual documentation, quickstarts and examples.

Azure Communication Services - UI Library makes it easy for you to build modern communications user experiences using Azure Communication Services. It gives you a library of production-ready UI components that you can drop into your applications:

  • Composites - These components are turn-key solutions that implement common communication scenarios. You can quickly add video calling or chat experiences to your applications. Composites are open-source higher order components built using UI components.

  • UI Components - These components are open-source building blocks that let you build custom communications experience. Components are offered for both calling and chat capabilities that can be combined to build experiences.

These UI client libraries all use Microsoft's Fluent design language and assets. Fluent UI provides a foundational layer for the UI Library and is actively used across Microsoft products.

In conjunction to the UI components, the UI Library exposes a stateful client library for calling and chat. This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context. This stateful client library can be used with the UI Components to pass props and methods for the UI Components to render data. For more information, see Stateful Client Overview.

Installing UI Library

Stateful clients are found as part of the @azure/communication-react package.

npm i --save @azure/communication-react

Composites overview

Composites are higher-level components composed of UI components that deliver turn-key solutions for common communication scenarios using Azure Communication Services. Developers can easily instantiate the Composite using an Azure Communication Services access token and the required configuration attributed for call or chat.

Composite Use Cases
CallComposite Calling experience that allows users to start or join a call. Inside the experience users can configure their devices, participate in the call with video, and see other participants, including those participants with video turn on. For Teams Interop is includes lobby functionality for user to wait to be admitted.
ChatComposite Chat experience where user can send and receive messages. Thread events like typing, reads, participants entering and leaving are displayed to the user as part of the chat thread.

UI Component overview

Pure UI Components that can be used by developers to compose communication experiences, from stitching video tiles into a grid to showcase remote participants, to organizing components to fit your applications specifications. UI Components support customization to give the components the right feel and look to match an applications branding and style.

Area Component Description
Calling Grid Layout Grid component to organize Video Tiles into an NxN grid
Video Tile Component that displays video stream when available and a default static component when not
Control Bar Container to organize DefaultButtons to hook up to specific call actions like mute or share screen
VideoGallery Turn-key video gallery component which dynamically changes as participants are added
Chat Message Thread Container that renders chat messages, system messages, and custom messages
Send Box Text input component with a discrete send button
Message Status Indicator Multi-state read receipt component to show state of sent message
Typing indicator Text component to render the participants who are actively typing on a thread
Common Participant Item Common component to render a call or chat participant including avatar and display name
Participant List Common component to render a call or chat participant list including avatar and display name

What UI artifact is best for my project?

Understanding these requirements will help you choose the right client library:

  • How much customization do you desire? Azure Communication core client libraries don't have a UX and are designed so you can build whatever UX you want. UI Library components provide UI assets at the cost of reduced customization.
  • What platforms are you targeting? Different platforms have different capabilities.

Details about feature availability in the UI Library is available here, but key trade-offs are summarized below.

Client library / SDK Implementation Complexity Customization Ability Calling Chat Teams Interop
Composite Components Low Low
Base Components Medium Medium
Core client libraries High High