Skip to content

Commit f72c0b5

Browse files
BackiarajBackiaraj
committed
Merge branch 'development' of https://github.com/syncfusion-content/blazor-docs into 930500-UG
2 parents e4e4bfb + 6c41bb8 commit f72c0b5

29 files changed

+585
-32
lines changed

‎blazor-toc.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -667,6 +667,12 @@
667667
</ul>
668668
</li>
669669
<li><a href="/blazor/ai-assistview/assist-view">Assist view</a></li>
670+
<li>AI Integrations
671+
<ul>
672+
<li><a href="/blazor/ai-assistview/ai-integrations/gemini-integration">Integration with Google Gemini</a></li>
673+
<li><a href="/blazor/ai-assistview/ai-integrations/openai-integration">Integration with Open AI</a></li>
674+
</ul>
675+
</li>
670676
<li><a href="/blazor/ai-assistview/toolbar-items">Toolbar items</a></li>
671677
<li><a href="/blazor/ai-assistview/custom-view">Custom views</a></li>
672678
<li><a href="/blazor/ai-assistview/file-attachments">File attachments</a></li>
@@ -1426,6 +1432,12 @@
14261432
</ul>
14271433
</li>
14281434
<li><a href="/blazor/chat-ui/messages">Messages</a></li>
1435+
<li>AI Integrations
1436+
<ul>
1437+
<li><a href="/blazor/chat-ui/ai-integrations/gemini-integration">Integration with Google Gemini</a></li>
1438+
<li><a href="/blazor/chat-ui/ai-integrations/openai-integration">Integration with Open AI</a></li>
1439+
</ul>
1440+
</li>
14291441
<li><a href="/blazor/chat-ui/timebreak">Time break</a></li>
14301442
<li><a href="/blazor/chat-ui/timestamp">Timestamp</a></li>
14311443
<li><a href="/blazor/chat-ui/typing-indicator">Typing indicator</a></li>

‎blazor/ai-assistview/ai-integrations/gemini-integration.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
layout: post
3+
title: Gemini Integration with Blazor AI AssistView Component | Syncfusion
4+
description: Checkout and learn about gemini integration with Blazor AI AssistView component in Blazor WebAssembly Application.
5+
platform: Blazor
6+
control: AI AssistView
7+
documentation: ug
8+
---
9+
10+
# Integration of Gemini AI With Blazor AI AssistView component
11+
12+
The Syncfusion AI AssistView supports integration with [Gemini](Gemini API quickstart | Google AI for Developers), enabling advanced conversational AI features in your applications.
13+
14+
## Prerequisites
15+
16+
* Google account to generate API key on accessing `Gemini AI`
17+
* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
18+
19+
## Getting Started with the AI AssistView Component
20+
21+
Before integrating Gemini AI, ensure that the Syncfusion AI AssistView is correctly rendered in your application:
22+
23+
[ Blazor Getting Started Guide](../getting-started)
24+
25+
## Install Dependencies
26+
27+
Install the Syncfusion Blazor package in the application.
28+
29+
```bash
30+
31+
Install-Package Syncfusion.Blazor.InteractiveChat
32+
33+
```
34+
35+
Install the Gemini AI package in the application.
36+
37+
```bash
38+
39+
Install-Package Mscc.GenerativeAI
40+
41+
```
42+
43+
## Generate API Key
44+
45+
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.
46+
47+
2. Once logged in, click on `Get API Key` from the left-hand menu or the top-right corner of the dashboard.
48+
49+
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.
50+
51+
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.
52+
53+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
54+
55+
## Integration Gemini AI with AI AssistView
56+
57+
> Add your generated `API Key` at the line
58+
59+
```bash
60+
61+
const string GeminiApiKey = 'Place your API key here';
62+
63+
```
64+
65+
{% tabs %}
66+
{% highlight razor %}
67+
68+
<div class="aiassist-container" style="height: 350px; width: 650px;">
69+
<SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
70+
<AssistViews>
71+
<AssistView>
72+
<BannerTemplate>
73+
<div class="banner-content">
74+
<div class="e-icons e-assistview-icon"></div>
75+
<h3>AI Assistance</h3>
76+
<i>To get started, provide input or choose a suggestion.</i>
77+
</div>
78+
</BannerTemplate>
79+
</AssistView>
80+
</AssistViews>
81+
<AssistViewToolbar ItemClicked="ToolbarItemClicked">
82+
<AssistViewToolbarItem Type="ItemType.Spacer"></AssistViewToolbarItem>
83+
<AssistViewToolbarItem IconCss="e-icons e-refresh"></AssistViewToolbarItem>
84+
</AssistViewToolbar>
85+
</SfAIAssistView>
86+
</div>
87+
88+
@code {
89+
private SfAIAssistView sfAIAssistView = new SfAIAssistView();
90+
private List<string> promptSuggestions = new List<string>
91+
{
92+
"What are the best tools for organizing my tasks?",
93+
"How can I maintain work-life balance effectively?"
94+
};
95+
private readonly string geminiApiKey = "";
96+
private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args)
97+
{
98+
try
99+
{
100+
var gemini = new GoogleAI(apiKey: geminiApiKey);
101+
var model = gemini.GenerativeModel(model: "gemini-1.5-flash");
102+
var response = await model.GenerateContent(args.Prompt);
103+
var responseText = response.Text;
104+
var pipeline = new MarkdownPipelineBuilder()
105+
.UseAdvancedExtensions()
106+
.UsePipeTables()
107+
.UseTaskLists()
108+
.Build();
109+
// Add the response to the AIAssistView
110+
await Task.Delay(1000); // Simulate delay as in original code
111+
args.Response = Markdown.ToHtml(responseText, pipeline);
112+
}
113+
catch (Exception ex)
114+
{
115+
Console.WriteLine($"Error fetching Gemini response: {ex.Message}");
116+
await Task.Delay(1000);
117+
args.Response = "⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.";
118+
}
119+
}
120+
121+
private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
122+
{
123+
sfAIAssistView.Prompts.Clear();
124+
StateHasChanged();
125+
}
126+
}
127+
128+
{% endhighlight %}
129+
{% endtabs %}
130+
131+
![Blazor AI AssistView Gemini Integration](images/gemini-integration.png)

‎blazor/ai-assistview/ai-integrations/openai-integration.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
layout: post
3+
title: Open AI Integration with Blazor AI AssistView Component | Syncfusion
4+
description: Checkout and learn about Open AI integration with Blazor AI AssistView component in Blazor WebAssembly Application.
5+
platform: Blazor
6+
control: AI AssistView
7+
documentation: ug
8+
---
9+
10+
# Integration of Open AI With Blazor AI AssistView component
11+
12+
The Syncfusion AI AssistView supports integration with [OpenAI](https://platform.openai.com/docs/overview), enabling advanced conversational AI features in your applications.
13+
14+
## Prerequisites
15+
16+
*OpenAI account to generate an API key for accessing the `OpenAI` API
17+
* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
18+
19+
## Getting Started with the AI AssistView Component
20+
21+
Before integrating Open AI, ensure that the Syncfusion AI AssistView is correctly rendered in your application:
22+
23+
[ Blazor Getting Started Guide](../getting-started)
24+
25+
## Install Dependencies
26+
27+
Install the Syncfusion Blazor package in the application.
28+
29+
```bash
30+
31+
Install-Package Syncfusion.Blazor.InteractiveChat
32+
33+
```
34+
35+
Install the Open AI AI package in the application.
36+
37+
```bash
38+
39+
Install-Package OpenAI
40+
41+
```
42+
43+
## Generate API Key
44+
45+
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.
46+
47+
2. Once logged in, click on your profile icon in the top-right corner and select `API Keys` from the dropdown menu.
48+
49+
3. Click the `+ Create new secret key` button. You’ll be prompted to name the key (optional). Confirm to generate the key.
50+
51+
4. Your API key will be displayed once. Copy it and store it securely, as it won’t be shown again.
52+
53+
> `Security Note`: Never commit the API key to version control. Use environment variables or a secret manager for production.
54+
55+
## Integration Open AI with AI AssistView
56+
57+
> Add your generated `API Key` at the line
58+
59+
```bash
60+
61+
const string openaiApiKey = 'Place your API key here';
62+
63+
```
64+
65+
{% tabs %}
66+
{% highlight razor %}
67+
68+
<div class="aiassist-container" style="height: 350px; width: 650px;">
69+
<SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
70+
<AssistViews>
71+
<AssistView>
72+
<BannerTemplate>
73+
<div class="banner-content">
74+
<div class="e-icons e-assistview-icon"></div>
75+
<h3>AI Assistance</h3>
76+
<i>To get started, provide input or choose a suggestion.</i>
77+
</div>
78+
</BannerTemplate>
79+
</AssistView>
80+
</AssistViews>
81+
<AssistViewToolbar ItemClicked="ToolbarItemClicked">
82+
<AssistViewToolbarItem Type="ItemType.Spacer"></AssistViewToolbarItem>
83+
<AssistViewToolbarItem IconCss="e-icons e-refresh"></AssistViewToolbarItem>
84+
</AssistViewToolbar>
85+
</SfAIAssistView>
86+
</div>
87+
88+
@code {
89+
private SfAIAssistView sfAIAssistView = new SfAIAssistView();
90+
private List<string> promptSuggestions = new List<string>
91+
{
92+
"What are the best tools for organizing my tasks?",
93+
"How can I maintain work-life balance effectively?"
94+
};
95+
private string openaiApiKey = "";
96+
private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args)
97+
{
98+
try
99+
{
100+
var openAiClient = new OpenAIClient(openaiApiKey);
101+
var chatClient = openAiClient.GetChatClient("gpt-4o-mini");
102+
103+
OpenAI.Chat.ChatCompletion completion = await chatClient.CompleteChatAsync(args.Prompt);
104+
string responseText = completion.Content[0].Text;
105+
var pipeline = new MarkdownPipelineBuilder()
106+
.UseAdvancedExtensions()
107+
.UsePipeTables()
108+
.UseTaskLists()
109+
.Build();
110+
// Add the response to the AIAssistView
111+
await Task.Delay(1000); // Simulate delay as in original code
112+
args.Response = Markdown.ToHtml(responseText, pipeline);
113+
}
114+
catch (Exception ex)
115+
{
116+
Console.WriteLine($"Error fetching Open AI response: {ex.Message}");
117+
await Task.Delay(1000);
118+
args.Response = "⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.";
119+
}
120+
}
121+
122+
private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
123+
{
124+
sfAIAssistView.Prompts.Clear();
125+
StateHasChanged();
126+
}
127+
}
128+
129+
{% endhighlight %}
130+
{% endtabs %}
131+
132+
![Blazor AI AssistView Open AI Integration](images/openai-integration.png)

‎blazor/ai-assistview/images/gemini-integration.png‎

40.3 KB
Loading

‎blazor/ai-assistview/images/openai-integration.png‎

40.3 KB
Loading

0 commit comments

Comments
 (0)