diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
new file mode 100644
index 000000000000..e634e0f45061
--- /dev/null
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { AzureOpenAI, OpenAI } from 'openai';
+import { type AIResponse } from 'devextreme-angular/common/ai-integration';
+
+export type AIMessage = (
+  OpenAI.ChatCompletionUserMessageParam
+  | OpenAI.ChatCompletionSystemMessageParam
+  | OpenAI.ChatCompletionAssistantMessageParam) & {
+    content: string;
+  };
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+@Injectable()
+export class AiService {
+  chatService: AzureOpenAI;
+
+  constructor() {
+    this.chatService = new AzureOpenAI(AzureOpenAIConfig);
+  }
+
+  async getAIResponse(messages: AIMessage[]): Promise<AIResponse> {
+    const params = {
+      messages,
+      model: AzureOpenAIConfig.deployment,
+      max_tokens: 1000,
+      temperature: 0.7,
+    };
+
+    const response = await this.chatService.chat.completions.create(params);
+    const data = { choices: response.choices };
+
+    return data.choices[0].message?.content;
+  }
+}
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
index beff93d55d76..40236d268098 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts
@@ -7,6 +7,7 @@ import { Observable } from 'rxjs';
 import { loadMessages } from 'devextreme-angular/common/core/localization';
 import { DataSource } from 'devextreme-angular/common/data';
 import { AppService } from './app.service';
+import { AiService } from './ai/ai.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -107,5 +108,6 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     AppService,
+    AiService,
   ],
 });
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
index b3ee9fe224d7..29b7fdf00957 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { Observable, BehaviorSubject } from 'rxjs';
-import { AzureOpenAI } from 'openai';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
@@ -8,21 +7,14 @@ import rehypeStringify from 'rehype-stringify';
 import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
 import { type DxChatTypes } from 'devextreme-angular/ui/chat';
 import { DataSource, CustomStore } from 'devextreme-angular/common/data';
+import { AiService, type AIMessage } from './ai/ai.service';
 
 @Injectable({
   providedIn: 'root',
 })
 
 export class AppService {
-  chatService: AzureOpenAI;
-
-  AzureOpenAIConfig = {
-    dangerouslyAllowBrowser: true,
-    deployment: 'gpt-4o-mini',
-    apiVersion: '2024-02-01',
-    endpoint: 'https://public-api.devexpress.com/demo-openai',
-    apiKey: 'DEMO',
-  };
+  aiService: AiService;
 
   REGENERATION_TEXT = 'Regeneration...';
 
@@ -39,7 +31,7 @@ export class AppService {
 
   store: any[] = [];
 
-  messages: any[] = [];
+  messages: AIMessage[] = [];
 
   alerts: DxChatTypes.Alert[] = [];
 
@@ -51,8 +43,8 @@ export class AppService {
 
   alertsSubject: BehaviorSubject<DxChatTypes.Alert[]> = new BehaviorSubject([]);
 
-  constructor() {
-    this.chatService = new AzureOpenAI(this.AzureOpenAIConfig);
+  constructor(aiService: AiService) {
+    this.aiService = aiService;
     this.initDataSource();
     this.typingUsersSubject.next([]);
     this.alertsSubject.next([]);
@@ -98,21 +90,11 @@ export class AppService {
     });
   }
 
-  async getAIResponse(messages) {
-    const params = {
-      messages,
-      model: this.AzureOpenAIConfig.deployment,
-      max_tokens: 1000,
-      temperature: 0.7,
-    };
-
-    const response = await this.chatService.chat.completions.create(params);
-    const data = { choices: response.choices };
-
-    return data.choices[0].message?.content;
+  async getAIResponse(messages: AIMessage[]): Promise<string> {
+    return this.aiService.getAIResponse(messages) as Promise<string>;
   }
 
-  async processMessageSending(message) {
+  async processMessageSending(message: DxChatTypes.Message) {
     this.messages.push({ role: 'user', content: message.text });
     this.typingUsersSubject.next([this.assistant]);
 
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts
index d9a1a4edd8c1..9c7f55803aaa 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts
@@ -1,13 +1,5 @@
 import type { ChatTypes } from 'devextreme-react/chat';
 
-export const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
 export const REGENERATION_TEXT = 'Regeneration...';
 export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
new file mode 100644
index 000000000000..b668c1eb5e73
--- /dev/null
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts
@@ -0,0 +1,42 @@
+import { AzureOpenAI, OpenAI } from 'openai';
+import { type AIResponse } from 'devextreme-react/common/ai-integration';
+
+export type AIMessage = (
+  OpenAI.ChatCompletionUserMessageParam
+  | OpenAI.ChatCompletionSystemMessageParam
+  | OpenAI.ChatCompletionAssistantMessageParam) & {
+    content: string;
+  };
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+const chatService = new AzureOpenAI(AzureOpenAIConfig);
+
+const wait = (delay: number): Promise<void> =>
+  new Promise((resolve): void => {
+    setTimeout(resolve, delay);
+  });
+
+export async function getAIResponse(messages: AIMessage[], delay?: number): Promise<AIResponse> {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await chatService.chat.completions.create(params);
+  const data = { choices: response.choices };
+
+  if (delay) {
+    await wait(delay);
+  }
+
+  return data.choices[0].message?.content ?? '';
+}
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
index e6f4ff4d0261..03a20011b0db 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts
@@ -1,43 +1,13 @@
 import { useCallback, useState } from 'react';
-import { AzureOpenAI, OpenAI } from 'openai';
 import type { ChatTypes } from 'devextreme-react/chat';
 import { CustomStore, DataSource } from 'devextreme-react/common/data';
-import type { AIResponse } from 'devextreme/common/ai-integration';
 import {
   ALERT_TIMEOUT,
   assistant,
-  AzureOpenAIConfig,
   REGENERATION_TEXT,
 } from './data.ts';
-
-type Message = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionAssistantMessageParam) & {
-  content: string;
-};
-
-const chatService = new AzureOpenAI(AzureOpenAIConfig);
-
-const wait = (delay: number): Promise<void> =>
-  new Promise((resolve): void => {
-    setTimeout(resolve, delay);
-  });
-
-export async function getAIResponse(messages: Message[], delay?: number): Promise<AIResponse> {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-
-  const response = await chatService.chat.completions.create(params);
-  const data = { choices: response.choices };
-
-  if (delay) {
-    await wait(delay);
-  }
-
-  return data.choices[0].message?.content ?? '';
-}
+import { getAIResponse } from './service.ts';
+import type { AIMessage } from './service.ts';
 
 const store: ChatTypes.Message[] = [];
 
@@ -61,12 +31,12 @@ export const dataSource = new DataSource({
   paginate: false,
 });
 
-const dataItemToMessage = (item: ChatTypes.Message): Message => ({
-  role: item.author?.id as Message['role'],
+const dataItemToMessage = (item: ChatTypes.Message): AIMessage => ({
+  role: item.author?.id as AIMessage['role'],
   content: item.text,
 });
 
-const getMessageHistory = (): Message[] => [...dataSource.items()].map(dataItemToMessage);
+const getMessageHistory = (): AIMessage[] => [...dataSource.items()].map(dataItemToMessage);
 
 export const useApi = () => {
   const [alerts, setAlerts] = useState<ChatTypes.Alert[]>([]);
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js
index 87d1d12667b0..66a606df2258 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js
@@ -1,10 +1,3 @@
-export const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
 export const REGENERATION_TEXT = 'Regeneration...';
 export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js
new file mode 100644
index 000000000000..11528bfb03c6
--- /dev/null
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js
@@ -0,0 +1,28 @@
+import { AzureOpenAI } from 'openai';
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+const chatService = new AzureOpenAI(AzureOpenAIConfig);
+const wait = (delay) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+export async function getAIResponse(messages, delay) {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+  const response = await chatService.chat.completions.create(params);
+  const data = { choices: response.choices };
+  if (delay) {
+    await wait(delay);
+  }
+  return data.choices[0].message?.content ?? '';
+}
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
index b8fdc6bedf9f..7f88abd8f651 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js
@@ -1,29 +1,8 @@
 import { useCallback, useState } from 'react';
-import { AzureOpenAI } from 'openai';
 import { CustomStore, DataSource } from 'devextreme-react/common/data';
-import {
-  ALERT_TIMEOUT, assistant, AzureOpenAIConfig, REGENERATION_TEXT,
-} from './data.js';
+import { ALERT_TIMEOUT, assistant, REGENERATION_TEXT } from './data.js';
+import { getAIResponse } from './service.js';
 
-const chatService = new AzureOpenAI(AzureOpenAIConfig);
-const wait = (delay) =>
-  new Promise((resolve) => {
-    setTimeout(resolve, delay);
-  });
-export async function getAIResponse(messages, delay) {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-  const response = await chatService.chat.completions.create(params);
-  const data = { choices: response.choices };
-  if (delay) {
-    await wait(delay);
-  }
-  return data.choices[0].message?.content ?? '';
-}
 const store = [];
 const customStore = new CustomStore({
   key: 'id',
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
index b36dba52528a..ffd533ed4968 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
@@ -49,7 +49,6 @@
 
 <script setup lang="ts">
 import { ref, onBeforeMount } from 'vue';
-import { AzureOpenAI } from 'openai';
 import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
 import DxButton from 'devextreme-vue/button';
 import { loadMessages } from 'devextreme-vue/common/core/localization';
@@ -62,12 +61,10 @@ import {
   assistant,
   dataSource,
   convertToHtml,
-  AzureOpenAIConfig,
   REGENERATION_TEXT,
   ALERT_TIMEOUT,
 } from './data.ts';
-
-const chatService = new AzureOpenAI(AzureOpenAIConfig);
+import { getAIResponse } from './service.ts';
 
 const typingUsers = ref<{ id: string, name: string }[]>([]);
 const alerts = ref<{ message: string }[]>([]);
@@ -78,20 +75,6 @@ onBeforeMount(() => {
   loadMessages(dictionary);
 });
 
-async function getAIResponse(messages: DxChatTypes.Message[]): Promise<string> {
-  const params: Record<string, any> = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-
-  const response = await chatService.chat.completions.create(params as any);
-  const data = { choices: response.choices };
-
-  return data.choices[0].message?.content || '';
-}
-
 function toggleDisabledState(disabled: boolean, event?: Events.EventObject): void {
   isDisabled.value = disabled;
 
@@ -130,11 +113,11 @@ async function processMessageSending(
 ): Promise<void> {
   toggleDisabledState(true, event);
 
-  messages.push({ role: 'user', content: message.text });
+  messages.push({ role: 'user', content: message.text ?? '' });
   typingUsers.value = [assistant];
 
   try {
-    const aiResponse = await getAIResponse(messages);
+    const aiResponse = await getAIResponse(messages) as string;
 
     setTimeout(() => {
       typingUsers.value = [];
@@ -165,7 +148,7 @@ async function regenerate(): Promise<void> {
   const lastMessage = messages.at(-1);
 
   try {
-    const aiResponse = await getAIResponse(messages.slice(0, -1));
+    const aiResponse = await getAIResponse(messages.slice(0, -1)) as string;
 
     updateLastMessage(aiResponse);
 
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
index 5ca6309e72f0..ccee003c46e7 100644
--- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
@@ -5,6 +5,7 @@ import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import rehypeStringify from 'rehype-stringify';
 import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
+import { type AIMessage } from './service';
 
 export const dictionary = {
   en: {
@@ -14,14 +15,6 @@ export const dictionary = {
   },
 };
 
-export const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
 export const REGENERATION_TEXT = 'Regeneration...';
 export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
@@ -35,7 +28,8 @@ export const assistant = {
   name: 'Virtual Assistant',
 };
 
-export const messages: DxChatTypes.Message[] = [];
+export const messages: AIMessage[] = [];
+
 const store: DxChatTypes.Message[] = [];
 
 const customStore = new CustomStore<DxChatTypes.Message>({
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
new file mode 100644
index 000000000000..c2f8ae553ca3
--- /dev/null
+++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts
@@ -0,0 +1,33 @@
+import { AzureOpenAI, OpenAI } from 'openai';
+import { type AIResponse } from 'devextreme-vue/common/ai-integration';
+
+export type AIMessage = (
+  OpenAI.ChatCompletionUserMessageParam
+  | OpenAI.ChatCompletionSystemMessageParam
+  | OpenAI.ChatCompletionAssistantMessageParam) & {
+    content: string;
+  };
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+const chatService = new AzureOpenAI(AzureOpenAIConfig);
+
+export async function getAIResponse(messages: AIMessage[]): Promise<AIResponse> {
+  const params: Record<string, any> = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await chatService.chat.completions.create(params as any);
+  const data = { choices: response.choices };
+
+  return data.choices[0].message?.content || '';
+}
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai/ai.service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai/ai.service.ts
new file mode 100644
index 000000000000..01e1fa4561ea
--- /dev/null
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai/ai.service.ts
@@ -0,0 +1,64 @@
+import { AzureOpenAI, OpenAI } from 'openai';
+import { Injectable } from '@angular/core';
+import {
+  AIIntegration,
+  type RequestParams,
+  type Response,
+} from 'devextreme-angular/common/ai-integration';
+
+type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
+  content: string;
+};
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+
+async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await aiService.chat.completions.create(params, { signal });
+  const result = response.choices[0].message?.content;
+
+  return result;
+}
+
+const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }: RequestParams): Response {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const aiPrompt: AIMessage[] = [
+      { role: 'system', content: prompt.system },
+      { role: 'user', content: prompt.user },
+    ];
+    const promise = getAIResponse(aiPrompt, signal);
+
+    const result: Response = {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+
+    return result;
+  },
+});
+
+@Injectable()
+export class AiService {
+  getAiIntegration() {
+    return aiIntegration;
+  }
+}
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
index 98b7034a2bf3..c3df9af5fa05 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts
@@ -1,13 +1,9 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { DxHtmlEditorModule, type DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor';
-import {
-  AIIntegration,
-  RequestParams,
-  Response,
-} from 'devextreme-angular/common/ai-integration';
-import { AzureOpenAI, OpenAI } from 'openai';
+import type { AIIntegration } from 'devextreme-angular/common/ai-integration';
 import { Service } from './app.service';
+import { AiService } from './ai/ai.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -19,74 +15,27 @@ if (window && window.config?.packageConfigPaths) {
   modulePrefix = '/app';
 }
 
-type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
-  content: string;
-};
-
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
-  providers: [Service],
+  providers: [Service, AiService],
   imports: [
     DxHtmlEditorModule,
   ],
 })
 
 export class AppComponent {
-  azureOpenAIConfig: any;
-
-  aiService: AzureOpenAI;
-
   aiIntegration: AIIntegration;
 
   extractKeywordsPrompt: DxHtmlEditorTypes.AICustomCommand['prompt'];
 
   valueContent: string;
 
-  constructor(service: Service) {
-    this.azureOpenAIConfig = service.getAzureOpenAIConfig();
+  constructor(service: Service, aiService: AiService) {
     this.extractKeywordsPrompt = service.getPrompt();
     this.valueContent = service.getMarkup();
-
-    this.aiService = new AzureOpenAI(this.azureOpenAIConfig);
-    this.aiIntegration = new AIIntegration({
-      sendRequest: this.sendRequest.bind(this),
-    });
-  }
-
-  sendRequest({ prompt }: RequestParams): Response {
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-    const aiPrompt: AIMessage[] = [
-      { role: 'system', content: prompt.system },
-      { role: 'user', content: prompt.user },
-    ];
-    const promise = this.getAIResponse(aiPrompt, signal);
-
-    const result: Response = {
-      promise,
-      abort: () => {
-        controller.abort();
-      },
-    };
-
-    return result;
-  }
-
-  async getAIResponse(messages: AIMessage[], signal: AbortSignal) {
-    const params = {
-      messages,
-      model: this.azureOpenAIConfig.deployment,
-      max_tokens: 1000,
-      temperature: 0.7,
-    };
-
-    const response = await this.aiService.chat.completions.create(params, { signal });
-    const result = response.choices[0].message?.content;
-
-    return result;
+    this.aiIntegration = aiService.getAiIntegration();
   }
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
index 5d1cf9975165..f04866495dcc 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts
@@ -1,14 +1,6 @@
 import { Injectable } from '@angular/core';
 import { type DxHtmlEditorTypes } from 'devextreme-angular/ui/html_editor';
 
-const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
 const extractKeywordsPrompt: DxHtmlEditorTypes.AICustomCommand['prompt'] = () =>
   'Extract a list of keywords from the text and return it as a comma-separated string';
 
@@ -56,8 +48,4 @@ export class Service {
   getPrompt() {
     return extractKeywordsPrompt;
   }
-
-  getAzureOpenAIConfig() {
-    return AzureOpenAIConfig;
-  }
 }
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx b/apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx
index 9139ea28c982..7f4ec1f4ad57 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor';
-import { markup, extractKeywordsPrompt, aiIntegration } from './data.ts';
+import { markup, extractKeywordsPrompt } from './data.ts';
+import { aiIntegration } from './service.ts';
 
 export default function App() {
   return (
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
index 8bf5e56ccd39..a685e5a3d87f 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts
@@ -1,54 +1,4 @@
 import type { HtmlEditorTypes } from 'devextreme-react/html-editor';
-import { AIIntegration } from 'devextreme-react/common/ai-integration';
-import type { AIResponse, RequestParams, Response } from 'devextreme-react/common/ai-integration';
-import { AzureOpenAI, OpenAI } from 'openai';
-
-type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
-  content: string;
-};
-
-const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
-const aiService = new AzureOpenAI(AzureOpenAIConfig);
-
-async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-
-  const response = await aiService.chat.completions.create(params, { signal });
-  return response.choices[0].message?.content;
-}
-
-export const aiIntegration = new AIIntegration({
-  sendRequest({ prompt }: RequestParams): Response {
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-    const aiPrompt: AIMessage[] = [
-      { role: 'system', content: prompt.system ?? '' },
-      { role: 'user', content: prompt.user ?? '' },
-    ];
-
-    const promise = getAIResponse(aiPrompt, signal) as Promise<AIResponse>;
-
-    return {
-      promise,
-      abort: () => {
-        controller.abort();
-      },
-    };
-  },
-});
 
 export const markup = `
     <h2>
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts
new file mode 100644
index 000000000000..c9ddc84ed899
--- /dev/null
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts
@@ -0,0 +1,51 @@
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
+import type { AIResponse, RequestParams, Response } from 'devextreme-react/common/ai-integration';
+import { AzureOpenAI, OpenAI } from 'openai';
+
+type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
+  content: string;
+};
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+
+async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await aiService.chat.completions.create(params, { signal });
+
+  return response.choices[0].message?.content;
+}
+
+export const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }: RequestParams): Response {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const aiPrompt: AIMessage[] = [
+      { role: 'system', content: prompt.system ?? '' },
+      { role: 'user', content: prompt.user ?? '' },
+    ];
+
+    const promise = getAIResponse(aiPrompt, signal) as Promise<AIResponse>;
+
+    return {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+  },
+});
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js
index 982bbbbdf6ed..8a2545031306 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor';
-import { markup, extractKeywordsPrompt, aiIntegration } from './data.js';
+import { markup, extractKeywordsPrompt } from './data.js';
+import { aiIntegration } from './service.js';
 
 export default function App() {
   return (
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
index f7d79dab710f..160cecb3c1f8 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js
@@ -1,41 +1,3 @@
-import { AIIntegration } from 'devextreme-react/common/ai-integration';
-import { AzureOpenAI } from 'openai';
-
-const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-const aiService = new AzureOpenAI(AzureOpenAIConfig);
-async function getAIResponse(messages, signal) {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-  const response = await aiService.chat.completions.create(params, { signal });
-  return response.choices[0].message?.content;
-}
-export const aiIntegration = new AIIntegration({
-  sendRequest({ prompt }) {
-    const controller = new AbortController();
-    const signal = controller.signal;
-    const aiPrompt = [
-      { role: 'system', content: prompt.system ?? '' },
-      { role: 'user', content: prompt.user ?? '' },
-    ];
-    const promise = getAIResponse(aiPrompt, signal);
-    return {
-      promise,
-      abort: () => {
-        controller.abort();
-      },
-    };
-  },
-});
 export const markup = `
     <h2>
         <img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor">
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js
new file mode 100644
index 000000000000..bbbf44050c1c
--- /dev/null
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js
@@ -0,0 +1,38 @@
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
+import { AzureOpenAI } from 'openai';
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+async function getAIResponse(messages, signal) {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+  const response = await aiService.chat.completions.create(params, { signal });
+  return response.choices[0].message?.content;
+}
+export const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }) {
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const aiPrompt = [
+      { role: 'system', content: prompt.system ?? '' },
+      { role: 'user', content: prompt.user ?? '' },
+    ];
+    const promise = getAIResponse(aiPrompt, signal);
+    return {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+  },
+});
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue
index e8f1aba8f940..c428a5a4609e 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue
@@ -33,58 +33,11 @@ import {
   DxToolbarItem,
   DxCommand,
 } from 'devextreme-vue/html-editor';
-import { AIIntegration, type Response } from 'devextreme-vue/common/ai-integration';
-import { AzureOpenAI, OpenAI } from 'openai';
 import {
   markup,
-  AzureOpenAIConfig,
   extractKeywordsPrompt,
 } from './data.ts';
-
-type AIMessage = (
-  OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam
-) & {
-  content: string;
-};
-
-const aiService = new AzureOpenAI(AzureOpenAIConfig);
-
-async function getAIResponse(messages: AIMessage[], signal: AbortSignal): Promise<string> {
-  const params = {
-    messages,
-    model: AzureOpenAIConfig.deployment,
-    max_tokens: 1000,
-    temperature: 0.7,
-  };
-
-  const response = await aiService.chat.completions.create(params, { signal });
-  const result = response.choices[0].message?.content || '';
-
-  return result;
-}
-
-const aiIntegration = new AIIntegration({
-  sendRequest({ prompt }) {
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-    const aiPrompt: AIMessage[] = [
-      { role: 'system', content: prompt.system || '' },
-      { role: 'user', content: prompt.user || '' },
-    ];
-
-    const promise = getAIResponse(aiPrompt, signal);
-
-    const result: Response = {
-      promise,
-      abort: () => {
-        controller.abort();
-      },
-    };
-
-    return result;
-  },
-});
+import { aiIntegration } from './service.ts';
 
 </script>
 <style>
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts
index e7ff15066df9..df44a25972b6 100644
--- a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts
@@ -1,13 +1,5 @@
 import type { DxHtmlEditorTypes } from 'devextreme-vue/html-editor';
 
-export const AzureOpenAIConfig = {
-  dangerouslyAllowBrowser: true,
-  deployment: 'gpt-4o-mini',
-  apiVersion: '2024-02-01',
-  endpoint: 'https://public-api.devexpress.com/demo-openai',
-  apiKey: 'DEMO',
-};
-
 export const extractKeywordsPrompt: DxHtmlEditorTypes.AICustomCommand['prompt'] = () =>
   'Extract a list of keywords from the text and return it as a comma-separated string';
 
diff --git a/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts
new file mode 100644
index 000000000000..5518b1cf88db
--- /dev/null
+++ b/apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts
@@ -0,0 +1,59 @@
+import { AzureOpenAI, OpenAI } from 'openai';
+import {
+  AIIntegration,
+  type RequestParams,
+  type Response,
+} from 'devextreme-vue/common/ai-integration';
+
+type AIMessage = (
+  OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam
+) & {
+  content: string;
+};
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+
+async function getAIResponse(messages: AIMessage[], signal: AbortSignal): Promise<string> {
+  const params = {
+    messages,
+    model: AzureOpenAIConfig.deployment,
+    max_tokens: 1000,
+    temperature: 0.7,
+  };
+
+  const response = await aiService.chat.completions.create(params, { signal });
+  const result = response.choices[0].message?.content || '';
+
+  return result;
+}
+
+export const aiIntegration = new AIIntegration({
+  sendRequest({ prompt }: RequestParams): Response {
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    const aiPrompt: AIMessage[] = [
+      { role: 'system', content: prompt.system || '' },
+      { role: 'user', content: prompt.user || '' },
+    ];
+
+    const promise = getAIResponse(aiPrompt, signal);
+
+    const result: Response = {
+      promise,
+      abort: () => {
+        controller.abort();
+      },
+    };
+
+    return result;
+  },
+});