Skip to content

Commit 569c980

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 09-24-2025 10:30:09 AM
1 parent 05b20d7 commit 569c980

File tree

16 files changed

+775
-0
lines changed

16 files changed

+775
-0
lines changed

‎ej2-javascript-toc.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,16 @@
166166
<ul>
167167
<li><a href="/ej2-javascript/ai-assistview/es5-getting-started">Getting Started</a></li>
168168
<li><a href="/ej2-javascript/ai-assistview/assist-view">Assist view</a></li>
169+
<li>AI Integrations
170+
<ul>
171+
<li>
172+
<a href="/ej2-javascript/ai-assistview/ai-integrations/gemini-integration">Integration with Google Gemini</a>
173+
</li>
174+
<li>
175+
<a href="/ej2-javascript/ai-assistview/ai-integrations/openai-integration">Integration with Open AI</a>
176+
</li>
177+
</ul>
178+
</li>
169179
<li><a href="/ej2-javascript/ai-assistview/toolbar-items">Toolbar items</a></li>
170180
<li><a href="/ej2-javascript/ai-assistview/custom-view">Custom views</a></li>
171181
<li><a href="/ej2-javascript/ai-assistview/file-attachments">File attachments</a></li>

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
# Integration of Gemini AI With ##Platform_Name## 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 ##Platform_Name## AI AssistView control
17+
18+
Before integrating Gemini AI, ensure that the Syncfusion Chat UI control is correctly rendered in your application:
19+
20+
[ ##Platform_Name## 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`
26+
* Syncfusion AI AssistView for ##Platform_Name## `@syncfusion/ej2-interactive-chat` installed in your project.
27+
28+
## Install Dependencies
29+
30+
Install the Syncfusion Chat UI in your project
31+
32+
```bash
33+
34+
npm install @syncfusion/ej2-interactive-chat --save
35+
36+
```
37+
38+
Install the Gemini AI dependencies
39+
40+
```bash
41+
42+
npm install @google/generative-ai
43+
44+
```
45+
46+
## Generate API Key
47+
48+
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.
49+
50+
2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
51+
52+
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.
53+
54+
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.
55+
56+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
57+
58+
## Integration Gemini AI with AI AssistView
59+
60+
Create ##Platform_Name## application to integrate the Open AI with AI AssistView component with the respective files
61+
62+
* Add your generated `API Key` at the line
63+
64+
```bash
65+
66+
const geminiApiKey = 'Place your API key here';
67+
68+
```
69+
70+
{% if page.publishingplatform == "typescript" %}
71+
72+
{% tabs %}
73+
{% highlight ts tabtitle="index.ts" %}
74+
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/index.ts %}
75+
{% endhighlight %}
76+
{% highlight html tabtitle="index.html" %}
77+
{% include code-snippet/ai-assistview/ai-integrations/gemini-ai/index.html %}
78+
{% endhighlight %}
79+
{% endtabs %}
80+
81+
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/gemini-ai" %}
82+
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 %}
96+
97+
## Run and Test
98+
99+
Run the application in the browser using the following command.
100+
101+
```bash
102+
103+
npm start
104+
105+
```
106+
107+
Open `http://localhost:3000` to interact with your Gemini AI for dynamic response.

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
layout: post
3+
title: Open AI in ##Platform_Name## AI AssistView control | Syncfusion
4+
description: Checkout and learn about Integration of ChatGPT 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+
# Integration of Open AI With ##Platform_Name## AI AssistView control
13+
14+
The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your React applications.
15+
16+
## Getting Started with the ##Platform_Name## AI AssistView control
17+
18+
Before integrating Open AI, ensure that the Syncfusion AI AssistView control is correctly rendered in your React app:
19+
20+
[##Platform_Name## Getting Started Guide](../getting-started)
21+
22+
## Prerequisites
23+
24+
* Requires `Node.js` (v16 or higher) and `npm`.
25+
* OpenAI account to generate an API key for accessing the `OpenAI` API
26+
* Syncfusion AI AssistView for ##Platform_Name## `@syncfusion/ej2-interactive-chat` installed in your project.
27+
28+
## Install Dependencies
29+
30+
Install the Syncfusion AI AssistView in your project
31+
32+
```bash
33+
34+
npm install @syncfusion/ej2-react-interactive-chat --save
35+
36+
```
37+
38+
## Generate API Key
39+
40+
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.
41+
42+
2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu.
43+
44+
3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key.
45+
46+
4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again.
47+
48+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
49+
50+
## Integration Open AI with ##Platform_Name## AI AssistView control
51+
52+
Create ##Platform_Name## application to integrate the Open AI with AI AssistView component with the respective files
53+
54+
* Add your generated `API Key` at the line
55+
56+
```bash
57+
58+
const openaiApiKey = 'Place your API key here';
59+
60+
```
61+
62+
{% if page.publishingplatform == "typescript" %}
63+
64+
{% tabs %}
65+
{% highlight ts tabtitle="index.ts" %}
66+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.ts %}
67+
{% endhighlight %}
68+
{% highlight html tabtitle="index.html" %}
69+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.html %}
70+
{% endhighlight %}
71+
{% endtabs %}
72+
73+
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/open-ai" %}
74+
75+
{% elsif page.publishingplatform == "javascript" %}
76+
77+
{% tabs %}
78+
{% highlight js tabtitle="index.js" %}
79+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.js %}
80+
{% endhighlight %}
81+
{% highlight html tabtitle="index.html" %}
82+
{% include code-snippet/ai-assistview/ai-integrations/open-ai/index.html %}
83+
{% endhighlight %}
84+
{% endtabs %}
85+
86+
{% previewsample "page.domainurl/code-snippet/ai-assistview/ai-integrations/open-ai" %}
87+
{% endif %}
88+
89+
## Run and Test
90+
91+
Run the application in the browser using the following command.
92+
93+
```bash
94+
95+
npm start
96+
97+
```
98+
99+
Open `http://localhost:3000` to interact with your Open AI for dynamic response.

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
#container {
2+
visibility: hidden;
3+
margin: 20px auto;
4+
width: 350px;
5+
}
6+
7+
#loader {
8+
color: #008cff;
9+
height: 40px;
10+
left: 45%;
11+
position: absolute;
12+
top: 45%;
13+
width: 30%;
14+
}
15+
16+
.banner-content {
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
height: 330px;
21+
text-align: center;
22+
}
23+
#aiAssistView .e-view-container {
24+
margin: auto;
25+
}
26+
#aiAssistView .e-banner-view {
27+
margin-left: 0;
28+
}
29+
.banner-content .e-assistview-icon:before {
30+
font-size: 35px;
31+
}

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { AIAssistView } from '@syncfusion/ej2-interactive-chat';
2+
import { GoogleGenerativeAI } from '@google/generative-ai';
3+
import marked from 'marked';
4+
5+
let geminiApiKey = ''; // Replace with your Gemini API key
6+
let genAI = new GoogleGenerativeAI(geminiApiKey);
7+
let stopStreaming = false;
8+
9+
const suggestions = [
10+
'What are the best tools for organizing my tasks?',
11+
'How can I maintain work-life balance effectively?',
12+
];
13+
14+
// Initializes the AI Assist control
15+
const aiAssistView = new AIAssistView({
16+
promptSuggestions: suggestions,
17+
toolbarSettings: {
18+
items: [{ iconCss: 'e-icons e-refresh', align: 'Right' }],
19+
itemClicked: toolbarItemClicked,
20+
},
21+
bannerTemplate: '<div class="banner-content"><div class="e-icons e-assistview-icon"></div><h3>AI Assistance</h3><div>To get started, provide input or choose a suggestion.</div></div>',
22+
promptRequest: onPromptRequest,
23+
stopRespondingClick: handleStopResponse
24+
});
25+
26+
function toolbarItemClicked(args) {
27+
if (args.item.iconCss === 'e-icons e-refresh') {
28+
aiAssistView.prompts = [];
29+
aiAssistView.promptSuggestions = suggestions;
30+
stopStreaming = true; // Stop streaming on refresh
31+
}
32+
}
33+
34+
async function streamResponse(response) {
35+
let lastResponse = "";
36+
const responseUpdateRate = 10;
37+
let i = 0;
38+
const responseLength = response.length;
39+
while (i < responseLength && !stopStreaming) {
40+
lastResponse += response[i];
41+
i++;
42+
if (i % responseUpdateRate === 0 || i === responseLength) {
43+
const htmlResponse = marked.parse(lastResponse);
44+
aiAssistView.addPromptResponse(htmlResponse, i === responseLength);
45+
aiAssistView.scrollToBottom();
46+
}
47+
await new Promise(resolve => setTimeout(resolve, 15)); // Delay for streaming effect
48+
}
49+
aiAssistView.promptSuggestions = suggestions;
50+
}
51+
52+
async function onPromptRequest(args) {
53+
try {
54+
const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });
55+
const result = await model.generateContent(args.prompt);
56+
const response = result.response.text();
57+
stopStreaming = false;
58+
await streamResponse(response);
59+
} catch (error) {
60+
console.error('Error fetching Gemini response:', error);
61+
aiAssistView.addPromptResponse(
62+
'⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.'
63+
);
64+
stopStreaming = true;
65+
}
66+
}
67+
68+
function handleStopResponse() {
69+
stopStreaming = true;
70+
}
71+
72+
73+
// Render initialized AI Assist.
74+
aiAssistView.appendTo('#defaultAssist');

0 commit comments

Comments
 (0)