diff --git a/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/00 Google Dialogflow.md b/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/00 Google Dialogflow.md
new file mode 100644
index 0000000000..4d4537c434
--- /dev/null
+++ b/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/00 Google Dialogflow.md
@@ -0,0 +1,5 @@
+This help topic describes how to integrate Chat with [Google Dialogflow](https://cloud.google.com/dialogflow/docs). You can find the full example code in the following GitHub repository:
+
+#include btn-open-github with {
+ href: "https://github.com/DevExpress-Examples/devextreme-chat-google-dialogflow"
+}
\ No newline at end of file
diff --git a/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/05 Prerequisites and Installation.md b/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/05 Prerequisites and Installation.md
new file mode 100644
index 0000000000..94d158bc5c
--- /dev/null
+++ b/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/05 Prerequisites and Installation.md
@@ -0,0 +1,36 @@
+First, obtain an [API key](https://platform.openai.com/api-keys). Next, install OpenAI SDK:
+
+---
+
+##### jQuery
+
+
+
+
+
+
+
+[note] Ensure DevExtreme is [installed](/concepts/58%20jQuery%20Components/05%20Add%20DevExtreme%20to%20a%20jQuery%20Application/00%20Add%20DevExtreme%20to%20a%20jQuery%20Application.md '/Documentation/Guide/jQuery_Components/Add_DevExtreme_to_a_jQuery_Application/') in your project.
+
+##### Angular
+
+ npm install openai
+
+[note] Ensure DevExtreme is [installed](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/') in your project.
+
+##### Vue
+
+ npm install openai
+
+[note] Ensure DevExtreme is [installed](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/00%20Add%20DevExtreme%20to%20a%20Vue%20Application.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/') in your project.
+
+##### React
+
+ npm install openai
+
+[note] Ensure DevExtreme is [installed](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') in your project.
+
+---
+
diff --git a/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/10 AI Configuration.md b/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/10 AI Configuration.md
new file mode 100644
index 0000000000..4f2f40fc27
--- /dev/null
+++ b/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/10 AI Configuration.md
@@ -0,0 +1,124 @@
+Create an instance of OpenAI:
+
+---
+
+##### jQuery
+
+ const chatService = new OpenAI({
+ dangerouslyAllowBrowser: true,
+ apiKey: "OPENAI_API_KEY", // insert your OpenAI API key
+ });
+
+##### Angular
+
+
+ import { OpenAI } from "openai";
+
+ export class AppService {
+ chatService: OpenAI;
+ OpenAIConfig = {
+ dangerouslyAllowBrowser: true,
+ apiKey: "OPENAI_API_KEY", // insert your OpenAI API key
+ };
+ constructor() {
+ this.chatService = new OpenAI(this.OpenAIConfig);
+ }
+ }
+
+##### Vue
+
+
+ import { OpenAI } from 'openai';
+
+ const OpenAIConfig = {
+ dangerouslyAllowBrowser: true,
+ apiKey: 'OPEN_AI_KEY', // insert your OpenAI API key
+ };
+
+ const chatService = new OpenAI(OpenAIConfig);
+
+##### React
+
+
+ import { OpenAI } from "openai";
+
+ class AppService {
+ chatService: OpenAI;
+ OpenAIConfig = {
+ dangerouslyAllowBrowser: true,
+ apiKey: "OPENAI_API_KEY", // insert your OpenAI API key
+ };
+ constructor() {
+ this.chatService = new OpenAI(this.OpenAIConfig);
+ }
+ }
+
+---
+
+[important] `dangerouslyAllowBrowser: true` enables browser-side requests. This exposes the API key. For production, route requests through your backend.
+
+Implement a `getAIResponse(messages)` function to call the OpenAI API for responses. Here, the incoming argument `messages` is an array of `{ role: "user" | "assistant" | "system"; content: string }` objects.
+
+---
+
+##### jQuery
+
+ async function getAIResponse(messages) {
+ const params = {
+ messages,
+ model: 'gpt-4o-mini',
+ };
+ const response = await chatService.chat.completions.create(params);
+ return response.choices[0].message?.content;
+ }
+
+##### Angular
+
+
+ async getAIResponse(messages: Array<{ role: "user" | "assistant" | "system"; content: string }>) {
+ const params = {
+ messages: messages.map(msg => ({
+ role: msg.role,
+ content: msg.content
+ })),
+ model: 'gpt-4o-mini',
+ };
+ const response = await this.chatService.chat.completions.create(params);
+ const data = { choices: response.choices };
+ return data.choices[0].message?.content;
+ }
+
+##### Vue
+
+
+ const getAIResponse = async(messages: Array<{ role: 'user' | 'assistant' | 'system'; content: string }>) => {
+ const params = {
+ messages: messages.map(msg => ({
+ role: msg.role,
+ content: msg.content
+ })),
+ model: 'gpt-4o-mini'
+ };
+
+ const response = await chatService.chat.completions.create(params);
+ return response.choices[0].message?.content;
+ };
+
+##### React
+
+
+ async getAIResponse(messages: { role: 'user' | 'assistant' | 'system'; content: string }[]): Promise {
+ const params = {
+ messages: messages.map((msg) => ({
+ role: msg.role,
+ content: msg.content,
+ })),
+ model: 'gpt-4o-mini',
+ };
+
+ const response = await this.chatService.chat.completions.create(params);
+ const data = { choices: response.choices };
+ return data.choices[0].message?.content;
+ }
+
+---
diff --git a/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/15 Chat Configuration.md b/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/15 Chat Configuration.md
new file mode 100644
index 0000000000..efd8a71ce1
--- /dev/null
+++ b/concepts/05 UI Components/Chat/15 Integrate with AI Service/10 Google Dialogflow/15 Chat Configuration.md
@@ -0,0 +1,157 @@
+To synchronize Chat and OpenAI, declare the `processMessageSending()` function. This function configures [typingUsers](/api-reference/10%20UI%20Components/dxChat/1%20Configuration/typingUsers.md '/Documentation/ApiReference/UI_Components/dxChat/Configuration/#typingUsers'), pushes the assistant message to the store, and renders the message.
+
+---
+
+##### jQuery
+
+
+ async function processMessageSending() {
+ toggleDisabledState(true);
+ instance.option({ typingUsers: [assistant] });
+ try {
+ const aiResponse = await getAIResponse(messages);
+ setTimeout(() => {
+ instance.option({ typingUsers: [] });
+ messages.push({ role: 'assistant', content: aiResponse });
+ renderMessage(aiResponse);
+ }, 200);
+ } catch {
+ instance.option({ typingUsers: [] });
+ alertLimitReached();
+ } finally {
+ toggleDisabledState(false);
+ }
+ }
+
+##### Angular
+
+
+ async processMessageSending() {
+ this.toggleDisabledState(true);
+ this.typingUsersSubject.next([this.assistant]);
+ try {
+ const aiResponse = await this.getAIResponse(this.messages);
+ setTimeout(() => {
+ this.typingUsersSubject.next([]);
+ this.messages.push({ role: "assistant", content: aiResponse ?? "" });
+ this.renderAssistantMessage(aiResponse ?? "");
+ }, 200);
+ } catch {
+ this.typingUsersSubject.next([]);
+ this.alertLimitReached();
+ } finally {
+ this.toggleDisabledState(false);
+ }
+ }
+
+##### Vue
+
+
+ const processMessageSending = async() => {
+ toggleDisabledState(true);
+ typingUsers.value = [assistant];
+ try {
+ const aiResponse = await getAIResponse(messages.value);
+ setTimeout(() => {
+ typingUsers.value = [];
+ messages.value.push({ role: 'assistant', content: aiResponse ?? '' });
+ renderAssistantMessage(aiResponse ?? '');
+ }, 200);
+ } catch {
+ typingUsers.value = [];
+ alertLimitReached();
+ } finally {
+ toggleDisabledState(false);
+ }
+ };
+
+##### React
+
+
+ async processMessageSending(): Promise {
+ this.toggleDisabledState(true);
+ this.typingUsersSubject.next([this.assistant]);
+ try {
+ const aiResponse = await this.getAIResponse(this.messages);
+ setTimeout(() => {
+ this.typingUsersSubject.next([]);
+ this.messages.push({ role: 'assistant', content: aiResponse ?? '' });
+ this.renderAssistantMessage(aiResponse ?? '');
+ }, 200);
+ } catch {
+ this.typingUsersSubject.next([]);
+ this.alertLimitReached();
+ } finally {
+ this.toggleDisabledState(false);
+ }
+ }
+
+---
+
+Call `processMessageSending()` after a user message is sent in the [onMessageEntered](/api-reference/10%20UI%20Components/dxChat/1%20Configuration/onMessageEntered.md '/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered') event handler:
+
+---
+
+##### jQuery
+
+
+ const instance = $('#dx-ai-chat').dxChat({
+ // ...
+ dataSource: customStore,
+ reloadOnChange: false,
+ onMessageEntered: (e) => {
+ const { message } = e;
+ customStore.push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
+ messages.push({ role: 'user', content: message.text });
+ processMessageSending();
+ }
+ }).dxChat('instance');
+
+##### Angular
+
+
+ async onMessageEntered({ message, event }: MessageEnteredEvent) {
+ this.dataSource
+ ?.store()
+ .push([{ type: "insert", data: { id: Date.now(), ...message } }]);
+
+ this.messages.push({ role: "user", content: message?.text ?? "" });
+ this.processMessageSending();
+ }
+
+##### Vue
+
+
+ const onMessageEntered = async(e: MessageEnteredEvent) => {
+ let { message } = e;
+ dataSource.value?.store().push([{
+ type: 'insert',
+ data: { id: Date.now(), ...message }
+ }]);
+
+ messages.value.push({ role: 'user', content: message?.text ?? '' });
+ await processMessageSending();
+ };
+
+##### React
+
+
+ onMessageEntered({ message }: MessageEnteredEvent): void {
+ this.dataSource
+ ?.store()
+ .push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
+
+ this.messages.push({ role: 'user', content: message?.text ?? '' });
+ void this.processMessageSending();
+ }
+
+---
+
+You can also implement additional UI capabilities to further improve user experience:
+
+- Add a Markdown converter for assistant outputs. For more information, refer to the [Markdown Support](/concepts/05%20UI%20Components/Chat/13%20Markdown%20Support.md '/Documentation/Guide/UI_Components/Chat/Markdown_Support/') help topic.
+- Define a [messageTemplate](/api-reference/10%20UI%20Components/dxChat/1%20Configuration/messageTemplate.md '/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTemplate') for the assistant’s responses and add two buttons: copy and regenerate response. See the example code in the GitHub repository:
+
+#include btn-open-github with {
+ href: "https://github.com/DevExpress-Examples/devextreme-chat-google-dialogflow"
+}
\ No newline at end of file