diff --git a/packages/devextreme-angular/src/ui/chat/index.ts b/packages/devextreme-angular/src/ui/chat/index.ts
index dbe53ce063b7..a66163fb4c9c 100644
--- a/packages/devextreme-angular/src/ui/chat/index.ts
+++ b/packages/devextreme-angular/src/ui/chat/index.ts
@@ -238,6 +238,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.messageTemplate]
+    
+     */
+    @Input()
+    get messageTemplate(): null {
+        return this._getOption('messageTemplate');
+    }
+    set messageTemplate(value: null) {
+        this._setOption('messageTemplate', value);
+    }
+
+
     /**
      * [descr:dxChatOptions.messageTimestampFormat]
     
@@ -512,6 +525,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() itemsChange: EventEmitter<Array<Message>>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() messageTemplateChange: EventEmitter<null>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -681,6 +701,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'hintChange' },
             { emit: 'hoverStateEnabledChange' },
             { emit: 'itemsChange' },
+            { emit: 'messageTemplateChange' },
             { emit: 'messageTimestampFormatChange' },
             { emit: 'reloadOnChangeChange' },
             { emit: 'rtlEnabledChange' },
diff --git a/packages/devextreme-vue/src/chat.ts b/packages/devextreme-vue/src/chat.ts
index f61b37ff402b..9a1327a01adc 100644
--- a/packages/devextreme-vue/src/chat.ts
+++ b/packages/devextreme-vue/src/chat.ts
@@ -16,6 +16,7 @@ type AccessibleOptions = Pick<Properties,
   "hint" |
   "hoverStateEnabled" |
   "items" |
+  "messageTemplate" |
   "messageTimestampFormat" |
   "onDisposing" |
   "onInitialized" |
@@ -53,6 +54,7 @@ const componentConfig = {
     hint: String,
     hoverStateEnabled: Boolean,
     items: Array,
+    messageTemplate: {},
     messageTimestampFormat: {},
     onDisposing: Function,
     onInitialized: Function,
@@ -86,6 +88,7 @@ const componentConfig = {
     "update:hint": null,
     "update:hoverStateEnabled": null,
     "update:items": null,
+    "update:messageTemplate": null,
     "update:messageTimestampFormat": null,
     "update:onDisposing": null,
     "update:onInitialized": null,
diff --git a/packages/devextreme/js/ui/chat.d.ts b/packages/devextreme/js/ui/chat.d.ts
index cc08b0a13db9..c32a1d419e6c 100644
--- a/packages/devextreme/js/ui/chat.d.ts
+++ b/packages/devextreme/js/ui/chat.d.ts
@@ -233,6 +233,7 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
      */
     alerts?: Array<Alert>;
     /**
+     * @docid
      * @default null
      * @type_function_return string|Element|jQuery
      * @public
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index ac7c53f6d122..42f92b81325d 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -9594,6 +9594,9 @@ declare module DevExpress.ui {
      * [descr:dxChatOptions.alerts]
      */
     alerts?: Array<DevExpress.ui.dxChat.Alert>;
+    /**
+     * [descr:dxChatOptions.messageTemplate]
+     */
     messageTemplate?:
       | ((
           data: DevExpress.ui.dxChat.MessageTemplateData,