diff --git a/packages/devextreme-angular/src/ui/chat/index.ts b/packages/devextreme-angular/src/ui/chat/index.ts
index 76c5db468900..c6545c97766c 100644
--- a/packages/devextreme-angular/src/ui/chat/index.ts
+++ b/packages/devextreme-angular/src/ui/chat/index.ts
@@ -22,6 +22,8 @@ import {
 } from '@angular/core';
 
 
+import { Store } from 'devextreme/data';
+import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
 import { DisposingEvent, InitializedEvent, Message, MessageSendEvent, OptionChangedEvent, User } from 'devextreme/ui/chat';
 
 import DxChat from 'devextreme/ui/chat';
@@ -88,6 +90,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.dataSource]
+    
+     */
+    @Input()
+    get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array<Message> {
+        return this._getOption('dataSource');
+    }
+    set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array<Message>) {
+        this._setOption('dataSource', value);
+    }
+
+
     /**
      * [descr:WidgetOptions.disabled]
     
@@ -289,6 +304,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() activeStateEnabledChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() dataSourceChange: EventEmitter<Store | DataSource | DataSourceOptions | null | string | Array<Message>>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -403,6 +425,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },
+            { emit: 'dataSourceChange' },
             { emit: 'disabledChange' },
             { emit: 'elementAttrChange' },
             { emit: 'focusStateEnabledChange' },
@@ -433,6 +456,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
 
     ngOnChanges(changes: SimpleChanges) {
         super.ngOnChanges(changes);
+        this.setupChanges('dataSource', changes);
         this.setupChanges('items', changes);
     }
 
@@ -443,6 +467,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
     ngDoCheck() {
+        this._idh.doCheck('dataSource');
         this._idh.doCheck('items');
         this._watcherHelper.checkWatchers();
         super.ngDoCheck();
diff --git a/packages/devextreme-vue/src/chat.ts b/packages/devextreme-vue/src/chat.ts
index 54a67dc1680e..2ffc0116a838 100644
--- a/packages/devextreme-vue/src/chat.ts
+++ b/packages/devextreme-vue/src/chat.ts
@@ -5,6 +5,7 @@ import { createConfigurationComponent } from "./core/index";
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
   "activeStateEnabled" |
+  "dataSource" |
   "disabled" |
   "elementAttr" |
   "focusStateEnabled" |
@@ -30,6 +31,7 @@ const DxChat = createComponent({
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
+    dataSource: {},
     disabled: Boolean,
     elementAttr: Object,
     focusStateEnabled: Boolean,
@@ -52,6 +54,7 @@ const DxChat = createComponent({
     "update:hoveredElement": null,
     "update:accessKey": null,
     "update:activeStateEnabled": null,
+    "update:dataSource": null,
     "update:disabled": null,
     "update:elementAttr": null,
     "update:focusStateEnabled": null,
diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index 7d277e4b4857..3030d8e103c9 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -30,6 +30,7 @@ class Chat extends Widget<Properties> {
       ...super._getDefaultOptions(),
       title: '',
       items: [],
+      dataSource: null,
       user: { id: new Guid().toString() },
       onMessageSend: undefined,
     };
diff --git a/packages/devextreme/js/ui/chat.d.ts b/packages/devextreme/js/ui/chat.d.ts
index 5ec786dbd800..bb480880c07d 100644
--- a/packages/devextreme/js/ui/chat.d.ts
+++ b/packages/devextreme/js/ui/chat.d.ts
@@ -5,6 +5,7 @@ import {
     InitializedEventInfo,
     ChangedOptionInfo,
 } from '../events/index';
+import DataSource, { DataSourceLike } from '../data/data_source';
 
 /**
  * @docid _ui_chat_DisposingEvent
@@ -108,6 +109,13 @@ export type Message = {
  * @docid
  */
 export interface dxChatOptions extends WidgetOptions<dxChat> {
+    /**
+     * @docid
+     * @type string | Array<Message> | Store | DataSource | DataSourceOptions | null
+     * @default null
+     * @public
+     */
+    dataSource?: DataSourceLike<Message> | null;
     /**
      * @docid
      * @default { id: new Guid().toString() }
@@ -122,6 +130,7 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
     title?: string;
     /**
      * @docid
+     * @type Array<Message>
      * @fires dxChatOptions.onOptionChanged
      * @public
      */
@@ -138,7 +147,7 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
 
 /**
  * @docid
- * @inherits Widget
+ * @inherits Widget, DataHelperMixin
  * @namespace DevExpress.ui
  * @public
  */
@@ -149,6 +158,8 @@ export default class dxChat extends Widget<Properties> {
      * @public
      */
     renderMessage(message: Message): void;
+
+    getDataSource(): DataSource<Message>;
 }
 
 /** @public */
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 80039db74b04..64ac3a9ff570 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -9420,6 +9420,8 @@ declare module DevExpress.ui {
      * [descr:dxChat.renderMessage(message)]
      */
     renderMessage(message: DevExpress.ui.dxChat.Message): void;
+
+    getDataSource(): DevExpress.data.DataSource<DevExpress.ui.dxChat.Message>;
   }
   module dxChat {
     /**
@@ -9461,6 +9463,10 @@ declare module DevExpress.ui {
    * @deprecated [depNote:dxChatOptions]
    */
   export interface dxChatOptions extends WidgetOptions<dxChat> {
+    /**
+     * [descr:dxChatOptions.dataSource]
+     */
+    dataSource?: DevExpress.data.DataSource.DataSourceLike<DevExpress.ui.dxChat.Message> | null;
     /**
      * [descr:dxChatOptions.user]
      */