Skip to content

Commit 3a1b6ac

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 10-04-2025 10:30:06 AM
1 parent db44d1f commit 3a1b6ac

File tree

16 files changed

+281
-418
lines changed

16 files changed

+281
-418
lines changed

‎ej2-javascript-toc.html‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -169,10 +169,10 @@
169169
<li>AI Integrations
170170
<ul>
171171
<li>
172-
<a href="/ej2-javascript/ai-assistview/ai-integrations/gemini-integration">Integration with Google Gemini</a>
172+
<a href="/ej2-javascript/ai-assistview/ai-integrations/es5-gemini-integration">Google Gemini</a>
173173
</li>
174174
<li>
175-
<a href="/ej2-javascript/ai-assistview/ai-integrations/openai-integration">Integration with Azure Open AI</a>
175+
<a href="/ej2-javascript/ai-assistview/ai-integrations/es5-openai-integration">Azure Open AI</a>
176176
</li>
177177
</ul>
178178
</li>
@@ -539,16 +539,6 @@
539539
</li>
540540
</ul>
541541
</li>
542-
<li>AI Integrations
543-
<ul>
544-
<li>
545-
<a href="/ej2-javascript/chat-ui/ai-integrations/gemini-integration">Integration with Google Gemini</a>
546-
</li>
547-
<li>
548-
<a href="/ej2-javascript/chat-ui/ai-integrations/openai-integration">Integration with Azure Open AI</a>
549-
</li>
550-
</ul>
551-
</li>
552542
<li><a href="/ej2-javascript/chat-ui/timebreak">Time break</a></li>
553543
<li><a href="/ej2-javascript/chat-ui/timestamp">Timestamp</a></li>
554544
<li><a href="/ej2-javascript/chat-ui/typing-indicator">Typing indicator</a></li>

‎ej2-javascript/ai-assistview/ai-integrations/es5-gemini-integration.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
layout: post
3+
title: Gemini AI in ##Platform_Name## AI AssistView control | Syncfusion
4+
description: Checkout and learn about Integration of Gemini AI with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-javascript
6+
control: AI AssistView
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
domainurl: ##DomainURL##
10+
---
11+
12+
# Gemini AI With JavaScript AI AssistView control
13+
14+
The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your applications.
15+
16+
## Getting Started With the JavaScript AI AssistView control
17+
18+
Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your application:
19+
20+
[ JavaScript Getting Started Guide](../getting-started)
21+
22+
## Prerequisites
23+
24+
* Requires `Node.js` (v16 or higher) and `npm`.
25+
* Google account to generate API key on accessing [Gemini AI](https://ai.google.dev/gemini-api/docs).
26+
27+
## Generate API Key
28+
29+
1. Go to [Google AI Studio](https://aistudio.google.com/app/apikey) and sign in with your Google account. If you don’t have one, create a new account.
30+
31+
2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
32+
33+
3. Click the `Create API Key` button. You’ll be prompted to either select an existing Google Cloud project or create a new one. Choose the appropriate option and proceed.
34+
35+
4. After selecting or creating a project, your API key will be generated and displayed. Copy the key and store it securely, as it will only be shown once.
36+
37+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
38+
39+
## Configure Gemini AI with AI AssistView
40+
41+
Create JavaScript application to integrate the Open AI with AI AssistView component with the respective files
42+
43+
* Add your generated `API Key` at the line
44+
45+
```bash
46+
47+
var geminiApiKey = 'Place your API key here';
48+
49+
```
50+
51+
{% tabs %}
52+
{% highlight js tabtitle="index.js" %}
53+
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/index.js %}
54+
{% endhighlight %}
55+
{% highlight html tabtitle="index.html" %}
56+
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/index.html %}
57+
{% endhighlight %}
58+
{% endtabs %}
59+
60+
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/gemini-ai" %}
61+
62+
## Run and Test
63+
64+
Now, run the `index.html` in web browser, it will render the **Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript AI AssistView** control.
65+
66+
Open the hosted link to interact with your Gemini AI for dynamic response.

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
layout: post
3+
title: Azure Open AI in ##Platform_Name## AI AssistView control | Syncfusion
4+
description: Checkout and learn about Integration of Azure Open AI with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-javascript
6+
control: AI AssistView
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
domainurl: ##DomainURL##
10+
---
11+
12+
# Azure Open AI With JavaScript AI AssistView control
13+
14+
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.
15+
16+
## Getting Started with the JavaScript AI AssistView control
17+
18+
Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your app:
19+
20+
[JavaScript Getting Started Guide](../getting-started)
21+
22+
## Prerequisites
23+
24+
* Requires `Node.js` (v16 or higher) and `npm`.
25+
* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key.
26+
27+
## Generate Azure API Key
28+
29+
1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource.
30+
31+
2. Under Resource Management, select Keys and Endpoint to retrieve your API key and endpoint URL.
32+
33+
3. Copy the API key, endpoint, and deployment name (e.g., gpt-4o-mini). Ensure the API version matches your resource configuration.
34+
35+
4. Store these values securely, as they will be used in your application.
36+
37+
> `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.
38+
39+
## Configure Open AI with JavaScript AI AssistView control
40+
41+
Create JavaScript application to integrate the Open AI with AI AssistView component with the respective files:
42+
43+
* Update the following configuration values with your Azure Open AI details:
44+
45+
```bash
46+
47+
var azureOpenAIApiKey = 'Your_Azure_OpenAI_API_Key';
48+
var azureOpenAIEndpoint = 'Your_Azure_OpenAI_Endpoint';
49+
var azureOpenAIApiVersion = 'Your_Azure_OpenAI_API_Version';
50+
var azureDeploymentName = 'Your_Deployment_Name';
51+
52+
```
53+
54+
{% tabs %}
55+
{% highlight js tabtitle="index.js" %}
56+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.js %}
57+
{% endhighlight %}
58+
{% highlight html tabtitle="index.html" %}
59+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.html %}
60+
{% endhighlight %}
61+
{% endtabs %}
62+
63+
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/open-ai" %}
64+
65+
66+
## Run and Test
67+
68+
Now, run the `index.html` in web browser, it will render the **Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript AI AssistView** control.
69+
70+
Open the hosted link to interact with your Open AI for dynamic response.

‎ej2-javascript/ai-assistview/ai-integrations/gemini-integration.md‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ documentation: ug
99
domainurl: ##DomainURL##
1010
---
1111

12-
# Integration of Gemini AI With ##Platform_Name## AI AssistView control
12+
# Gemini AI With TypeScript AI AssistView control
1313

1414
The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs), enabling advanced conversational AI features in your applications.
1515

16-
## Getting Started With the ##Platform_Name## AI AssistView control
16+
## Getting Started With the TypeScript AI AssistView control
1717

1818
Before integrating Gemini AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your application:
1919

20-
[ ##Platform_Name## Getting Started Guide](../getting-started)
20+
[ TypeScript Getting Started Guide](../getting-started)
2121

2222
## Prerequisites
2323

2424
* Requires `Node.js` (v16 or higher) and `npm`.
25-
* Google account to generate API key on accessing `Gemini AI`
26-
* Syncfusion AI AssistView for ##Platform_Name## `@syncfusion/ej2-interactive-chat` installed in your project.
25+
* Google account to generate API key on accessing [Gemini AI](https://ai.google.dev/gemini-api/docs).
26+
* Syncfusion AI AssistView for TypeScript `@syncfusion/ej2-interactive-chat` installed in your project.
2727

2828
## Install Dependencies
2929

@@ -55,9 +55,9 @@ npm install @google/generative-ai
5555

5656
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
5757
58-
## Integration Gemini AI with AI AssistView
58+
## Configure Gemini AI with AI AssistView
5959

60-
Create ##Platform_Name## application to integrate the Open AI with AI AssistView component with the respective files
60+
Create TypeScript application to integrate the Gemini AI with AI AssistView component with the respective files
6161

6262
* Add your generated `API Key` at the line
6363

@@ -67,8 +67,6 @@ const geminiApiKey = 'Place your API key here';
6767

6868
```
6969

70-
{% if page.publishingplatform == "typescript" %}
71-
7270
{% tabs %}
7371
{% highlight ts tabtitle="index.ts" %}
7472
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/index.ts %}
@@ -80,19 +78,6 @@ const geminiApiKey = 'Place your API key here';
8078

8179
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/gemini-ai" %}
8280

83-
{% elsif page.publishingplatform == "javascript" %}
84-
85-
{% tabs %}
86-
{% highlight js tabtitle="index.js" %}
87-
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/index.js %}
88-
{% endhighlight %}
89-
{% highlight html tabtitle="index.html" %}
90-
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/index.html %}
91-
{% endhighlight %}
92-
{% endtabs %}
93-
94-
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/gemini-ai" %}
95-
{% endif %}
9681

9782
## Run and Test
9883

@@ -104,4 +89,4 @@ npm start
10489

10590
```
10691

107-
Open `http://localhost:3000` to interact with your Gemini AI for dynamic response.
92+
Open the hosted link to interact with your Gemini AI for dynamic response.

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

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ documentation: ug
99
domainurl: ##DomainURL##
1010
---
1111

12-
# Integration of Azure Open AI With ##Platform_Name## AI AssistView control
12+
# Azure Open AI With TypeScript AI AssistView control
1313

1414
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.
1515

16-
## Getting Started with the ##Platform_Name## AI AssistView control
16+
## Getting Started with the TypeScript AI AssistView control
1717

1818
Before integrating Azure Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your app:
1919

20-
[##Platform_Name## Getting Started Guide](../getting-started)
20+
[TypeScript Getting Started Guide](../getting-started)
2121

2222
## Prerequisites
2323

2424
* Requires `Node.js` (v16 or higher) and `npm`.
25-
* An Azure account with access to `Azure Open AI` services and a generated API key.
26-
* Syncfusion AI AssistView for ##Platform_Name## `@syncfusion/ej2-interactive-chat` installed in your project.
25+
* An Azure account with access to [Azure Open AI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key.
26+
* Syncfusion AI AssistView for TypeScript `@syncfusion/ej2-interactive-chat` installed in your project.
2727

2828
## Install Dependencies
2929

@@ -35,7 +35,7 @@ npm install @syncfusion/ej2-interactive-chat --save
3535

3636
```
3737

38-
## Generate API Key
38+
## Generate Azure API Key
3939

4040
1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure Open AI resource.
4141

@@ -47,9 +47,9 @@ npm install @syncfusion/ej2-interactive-chat --save
4747

4848
> `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.
4949
50-
## Integration Open AI with ##Platform_Name## AI AssistView control
50+
## Configure Open AI with TypeScript AI AssistView control
5151

52-
Create ##Platform_Name## application to integrate the Open AI with AI AssistView component with the respective files:
52+
Create TypeScript application to integrate the Open AI with AI AssistView component with the respective files:
5353

5454
* Update the following configuration values with your Azure Open AI details:
5555

@@ -62,8 +62,6 @@ const azureDeploymentName = 'Your_Deployment_Name';
6262

6363
```
6464

65-
{% if page.publishingplatform == "typescript" %}
66-
6765
{% tabs %}
6866
{% highlight ts tabtitle="index.ts" %}
6967
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.ts %}
@@ -75,20 +73,6 @@ const azureDeploymentName = 'Your_Deployment_Name';
7573

7674
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/open-ai" %}
7775

78-
{% elsif page.publishingplatform == "javascript" %}
79-
80-
{% tabs %}
81-
{% highlight js tabtitle="index.js" %}
82-
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.js %}
83-
{% endhighlight %}
84-
{% highlight html tabtitle="index.html" %}
85-
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.html %}
86-
{% endhighlight %}
87-
{% endtabs %}
88-
89-
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/open-ai" %}
90-
{% endif %}
91-
9276
## Run and Test
9377

9478
Run the application in the browser using the following command.
@@ -99,4 +83,4 @@ npm start
9983

10084
```
10185

102-
Open `http://localhost:3000` to interact with your Azure Open AI for dynamic response.
86+
Open the hosted link to interact with your Azure Open AI for dynamic response.

0 commit comments

Comments
 (0)