Message Markup Language Overview
Confused about "Message Markup Language Overview"?
Let us know how we can improve our documentation:
Message Markup Language (MML) enables you to build interactive messaging experiences. See below for an example message using MML:

MML supports adding buttons to your messages and simple forms with optimized UI for mobile. Date Scheduling, Basic images, icons, and tables are also supported.
The goal for MML is to have a standardized way to handle the most common use cases for message interactivity. If you need something more complex, you can always write a custom message/attachment layout.
MML on React
Copied!Confused about "MML on React"?
Let us know how we can improve our documentation:
MML comes baked into our Chat SDK for React. For more information on how this works, you can check out the docs for mml-react. But if you wish to write your own message component that handles MML you can use our mml-react library. It’s as simple as this:
Examples
Copied!Confused about "Examples"?
Let us know how we can improve our documentation:
As a first example, let's render a simple button:
A Simple MML Example
Copied!Confused about "A Simple MML Example"?
Let us know how we can improve our documentation:
MML an attachment type in Stream Chat. You can send a message with MML like this:
Scheduling an Appointment
Copied!Confused about "Scheduling an Appointment"?
Let us know how we can improve our documentation:

MML supports a <scheduler>
tag and a <add_to_calendar>
tag. This makes it easy to schedule an appointment without ever leaving your chat interface.
Here's how you can render a scheduler interface. Note how the interface takes availability into account using an iCal calendar. The UI is optimized for scheduling a date in the near future:
After the user schedules an appointment, you'll want to show an add to calendar widget:
A Carousel Interface
Copied!Confused about "A Carousel Interface"?
Let us know how we can improve our documentation:

For many customer support and e-commerce use-cases, you'll want to render a carousel. This type of layout makes it easy to select from a short list of options and show some additional information:
Button List Example
Copied!Confused about "Button List Example"?
Let us know how we can improve our documentation:

The button list is a convenient way to show a small list of options to a user:
Number Input
Copied!Confused about "Number Input"?
Let us know how we can improve our documentation:

Chat is typically rendered on a mobile device, which inherently has a small interface to work with. The data elements are optimized for mobile input. For example, here is how you can input a number: