DevExpress · vladaskorohodova · Dec 8, 2025
diff --git a/.../Chat/15 Integrate with AI Service/10 Google Dialogflow/00 Google Dialogflow.md b/.../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"
+}
diff --git a/...grate with AI Service/10 Google Dialogflow/05 Prerequisites and Installation.md b/...grate 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
+
+    <!-- tab: index.html -->
+    <head>
+        <!-- ... -->
+        <script type="module">
+            import OpenAI from "https://esm.sh/[email protected]";
+        </script>
+    </hea>
+
+[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/...s/Chat/15 Integrate with AI Service/10 Google Dialogflow/10 AI Configuration.md b/...s/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
+
+    <!--TypeScript-->
+    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
+
+    <!--TypeScript-->
+    import { OpenAI } from 'openai';
+
+    const OpenAIConfig = {
+        dangerouslyAllowBrowser: true,
+        apiKey: 'OPEN_AI_KEY', // insert your OpenAI API key
+    };
+
+    const chatService = new OpenAI(OpenAIConfig);
+
+##### React
+
+     <!--TypeScript-->
+    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
+
+    <!--TypeScript-->
+    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
+
+    <!--TypeScript-->
+    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
+
+    <!--TypeScript-->
+    async getAIResponse(messages: { role: 'user' | 'assistant' | 'system'; content: string }[]): Promise<any> {
+        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/...Chat/15 Integrate with AI Service/10 Google Dialogflow/15 Chat Configuration.md b/...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
+
+    <!-- tab: index.js -->
+    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
+
+    <!--TypeScript-->
+    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
+
+    <!--TypeScript-->
+    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
+
+    <!--TypeScript-->
+     async processMessageSending(): Promise<void> {
+        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
+
+    <!-- tab: index.js -->
+    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
+
+    <!--TypeScript-->
+     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
+
+    <!--TypeScript-->
+    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
+
+    <!--TypeScript-->
+    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"
+}