Integrated latest changes at 09-27-2025 10:30:20 AM

Author: SyncfusionBuild

ej2-javascript-toc.html

@@ -172,7 +172,7 @@
                 <a href="/ej2-javascript/ai-assistview/ai-integrations/gemini-integration">Integration with Google Gemini</a>
             </li>
             <li>
-                <a href="/ej2-javascript/ai-assistview/ai-integrations/openai-integration">Integration with Open AI</a>
+                <a href="/ej2-javascript/ai-assistview/ai-integrations/openai-integration">Integration with Azure Open AI</a>
             </li>
         </ul>
     </li>

ej2-javascript/ai-assistview/ai-integrations/openai-integration.md

@@ -1,28 +1,28 @@
 ---
 layout: post
-title: Open AI in ##Platform_Name## AI AssistView control | Syncfusion
-description: Checkout and learn about Integration of ChatGPT Open AI with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
+title: Azure Open AI in ##Platform_Name## AI AssistView control | Syncfusion
+description: Checkout and learn about Integration of Azure Open AI with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
 control: AI AssistView 
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Integration of Open AI With ##Platform_Name## AI AssistView control 
+# Integration of Azure Open AI With ##Platform_Name## AI AssistView control 
 
-The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your React applications.
+The Syncfusion AI AssistView supports integration with [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai), enabling advanced conversational AI features in your applications.
 
 ## Getting Started with the ##Platform_Name## AI AssistView control
 
-Before integrating Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your React app:
+Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your app:
 
 [##Platform_Name## Getting Started Guide](../getting-started)
 
 ## Prerequisites
 
 * Requires `Node.js` (v16 or higher) and `npm`.
-* OpenAI account to generate an API key for accessing the `OpenAI` API
+* An Azure account with access to `Azure Open AI` services and a generated API key.
 * Syncfusion AI AssistView for ##Platform_Name## `@syncfusion/ej2-interactive-chat` installed in your project.
 
 ## Install Dependencies
@@ -37,25 +37,28 @@ npm install @syncfusion/ej2-react-interactive-chat --save
 
 ## Generate API Key
 
-1. Go to [Open AI](https://platform.openai.com/docs/overview) and sign in with your Google account. If you don’t have one, create a new account. 
+1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource. 
 
-2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu.  
+2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL.  
 
-3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key. 
+3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version (e.g., 2024-07-01-preview) matches your resource configuration.
 
-4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again.
+4. Store these values securely, as they will be used in your application.
 
-> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
+> `Security Note`: Never expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely.
 
 ##  Integration Open AI with ##Platform_Name## AI AssistView control
 
-Create ##Platform_Name## application to integrate the Open AI with AI AssistView component with the respective files
+Create ##Platform_Name## application to integrate the Open AI with AI AssistView component with the respective files:
 
-* Add your generated `API Key` at the line 
+* Update the following configuration values with your Azure Open AI details:
 
 ```bash
 
-const openaiApiKey = 'Place your API key here'; 
+const azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key';
+const azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint';
+const azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version';
+const azureDeploymentName = 'Your_Deployment_Name';
 
 ```
 
@@ -96,4 +99,4 @@ npm start
 
 ```
 
-Open `http://localhost:3000` to interact with your Open AI for dynamic response.
+Open `http://localhost:3000` to interact with your Azure Open AI for dynamic response.

ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.js

@@ -57,7 +57,6 @@ import { AIAssistView } from '@syncfusion/ej2-interactive-chat';
          stopStreaming = false;
          await streamResponse(response);
      } catch (error) {
-         console.error('Error fetching Gemini response:', error);
          aiAssistView.addPromptResponse(
              '⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'
          );

ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/index.ts

@@ -60,7 +60,6 @@ async function onPromptRequest(args: any) {
         stopStreaming = false;
         await streamResponse(response);
     } catch (error) {
-        console.error('Error fetching Gemini response:', error);
         aiAssistView.addPromptResponse(
             '⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'
         );

ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/index.js

@@ -1,8 +1,10 @@
 import { AIAssistView } from '@syncfusion/ej2-interactive-chat';
 import marked from 'marked';
 
-// Initialize Gemini API (using OpenAI API in this case)
-let openaiApiKey = ''; // Replace with your actual API key
+const azureOpenAIApiKey = ''; // replace your key
+const azureOpenAIEndpoint = ''; // replace your endpoint
+const azureOpenAIApiVersion = ''; // replace to match your resource
+const azureDeploymentName = ''; // your Azure OpenAI deployment name
 let stopStreaming = false;
 let suggestions = [
     'What are the best tools for organizing my tasks?',
@@ -48,11 +50,16 @@ async function streamResponse(response) {
 }
 
 function onPromptRequest(args) {
-    fetch('https://api.openai.com/v1/chat/completions', {
+        const url =
+        azureOpenAIEndpoint.replace(/\/$/, '') +
+        `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` +
+        `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`;
+
+        fetch(url, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${openaiApiKey}`,
+            Authorization: azureOpenAIApiKey,
         },
         body: JSON.stringify({
             model: 'gpt-4o-mini',
@@ -68,8 +75,8 @@ function onPromptRequest(args) {
         streamResponse(responseText);
     })
     .catch(error => {
-        aiAssistView.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.');
-        stopStreaming = true; // Ensure streaming is stopped
+        aiAssistView.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true);
+        stopStreaming = true;
     });
 }
 

ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/index.ts

@@ -2,7 +2,10 @@ import { AIAssistView } from '@syncfusion/ej2-interactive-chat';
 import marked from 'marked';
 
 // Initialize Gemini API (using OpenAI API in this case)
-let openaiApiKey = ''; // Replace with your actual API key
+const azureOpenAIApiKey = ''; // replace your key
+const azureOpenAIEndpoint = ''; // replace your endpoint
+const azureOpenAIApiVersion = ''; // replace to match your resource
+const azureDeploymentName = ''; // your Azure OpenAI deployment name
 let stopStreaming = false;
 let suggestions = [
     'What are the best tools for organizing my tasks?',
@@ -48,11 +51,16 @@ async function streamResponse(response: string) {
 }
 
 function onPromptRequest(args:any) {
-    fetch('https://api.openai.com/v1/chat/completions', {
+        const url =
+        azureOpenAIEndpoint.replace(/\/$/, '') +
+        `/openai/deployments/${encodeURIComponent(azureDeploymentName)}/chat/completions` +
+        `?api-version=${encodeURIComponent(azureOpenAIApiVersion)}`;
+
+        fetch(url, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${openaiApiKey}`,
+            Authorization: azureOpenAIApiKey,
         },
         body: JSON.stringify({
             model: 'gpt-4o-mini',
@@ -67,9 +75,9 @@ function onPromptRequest(args:any) {
         stopStreaming = false;
         streamResponse(responseText);
     })
-    .catch(error => {
-        aiAssistView.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.');
-        stopStreaming = true; // Ensure streaming is stopped
+    .catch((error: unknown) => {
+        aiAssistView.addPromptResponse('⚠️ Something went wrong while connecting to the AI service. Please check your API key, Deployment model, endpoint or try again later.', true);
+        stopStreaming = true;
     });
 }
 

ej2-typescript-toc.html

@@ -177,7 +177,7 @@
                 <a href="/ej2-typescript/ai-assistview/ai-integrations/gemini-integration">Integration with Google Gemini</a>
             </li>
             <li>
-                <a href="/ej2-typescript/ai-assistview/ai-integrations/openai-integration">Integration with Open AI</a>
+                <a href="/ej2-typescript/ai-assistview/ai-integrations/openai-integration">Integration with Azure Open AI</a>
             </li>
         </ul>
     </li>