Skip to content

Commit 0632764

Browse files
premanandh2205premanandh2205
committed
979392: Added the OpenAI sample
1 parent ada738a commit 0632764

File tree

9 files changed

+341
-52
lines changed

9 files changed

+341
-52
lines changed

‎blazor-toc.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -667,11 +667,16 @@
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>
673679
<li><a href="/blazor/ai-assistview/templates">Templates</a></li>
674-
<li><a href="/blazor/ai-assistview/gemini-integration">Integration with Google Gemini</a></li>
675680
<li><a href="/blazor/ai-assistview/appearance">Appearance</a></li>
676681
<li><a href="/blazor/ai-assistview/accessibility">Accessibility</a></li>
677682
<li><a href="/blazor/ai-assistview/methods">Methods</a></li>
@@ -1427,6 +1432,12 @@
14271432
</ul>
14281433
</li>
14291434
<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>
14301441
<li><a href="/blazor/chat-ui/timebreak">Time break</a></li>
14311442
<li><a href="/blazor/chat-ui/timestamp">Timestamp</a></li>
14321443
<li><a href="/blazor/chat-ui/typing-indicator">Typing indicator</a></li>
@@ -1435,7 +1446,6 @@
14351446
<li><a href="/blazor/chat-ui/header">Header</a></li>
14361447
<li><a href="/blazor/chat-ui/footer">Footer</a></li>
14371448
<li><a href="/blazor/chat-ui/templates">Templates</a></li>
1438-
<li><a href="/blazor/chat-ui/gemini-integration">Integration with Google Gemini</a></li>
14391449
<li><a href="/blazor/chat-ui/appearance">Appearance</a></li>
14401450
<li><a href="/blazor/chat-ui/globalization">Globalization</a></li>
14411451
<li><a href="/blazor/chat-ui/accessibility">Accessibility</a></li>

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

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,38 @@ control: AI AssistView
77
documentation: ug
88
---
99

10-
# Integration of Gemini AI With Blazor AI AssistView Component
10+
# Integration of Gemini AI With Blazor AI AssistView component
1111

1212
The Syncfusion AI AssistView supports integration with [Gemini](Gemini API quickstart | Google AI for Developers), enabling advanced conversational AI features in your applications.
1313

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+
1419
## Getting Started with the AI AssistView Component
1520

1621
Before integrating Gemini AI, ensure that the Syncfusion AI AssistView is correctly rendered in your application:
1722

1823
[ Blazor Getting Started Guide](../getting-started)
1924

20-
## Prerequisites
21-
22-
* Google account to generate API key on accessing `Gemini AI`
23-
* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
24-
25-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InteractiveChat and Themes NuGet in the App
25+
## Install Dependencies
2626

27-
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
28-
* Ensure you’re in the project root directory where your `.csproj` file is located.
29-
* Run the following command to install a [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
30-
31-
{% tabs %}
27+
Install the Syncfusion Blazor package in the application.
3228

33-
{% highlight c# tabtitle="Package Manager" %}
29+
```bash
3430

35-
dotnet add package Syncfusion.Blazor.InteractiveChat -v {{ site.releaseversion }}
36-
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
37-
dotnet restore
31+
Install-Package Syncfusion.Blazor.InteractiveChat
3832

39-
{% endhighlight %}
33+
```
4034

41-
{% endtabs %}
35+
Install the Gemini AI package in the application.
4236

43-
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
37+
```bash
4438

45-
{% endtabcontent %}
39+
Install-Package Mscc.GenerativeAI
4640

47-
{% endtabcontents %}
41+
```
4842

4943
## Generate API Key
5044

@@ -64,15 +58,15 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
6458
6559
```bash
6660

67-
const string GeminiApiKey = 'Place your API key here';
61+
const string GeminiApiKey = 'Place your API key here';
6862

6963
```
7064

7165
{% tabs %}
7266
{% highlight razor %}
7367

7468
<div class="aiassist-container" style="height: 350px; width: 650px;">
75-
<SfAIAssistView ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
69+
<SfAIAssistView @ref="sfAIAssistView" ID="aiAssistView" PromptSuggestions="@promptSuggestions" PromptRequested="@OnPromptRequest">
7670
<AssistViews>
7771
<AssistView>
7872
<BannerTemplate>
@@ -84,17 +78,21 @@ const string GeminiApiKey = 'Place your API key here';
8478
</BannerTemplate>
8579
</AssistView>
8680
</AssistViews>
81+
<AssistViewToolbar ItemClicked="ToolbarItemClicked">
82+
<AssistViewToolbarItem Type="ItemType.Spacer"></AssistViewToolbarItem>
83+
<AssistViewToolbarItem IconCss="e-icons e-refresh"></AssistViewToolbarItem>
84+
</AssistViewToolbar>
8785
</SfAIAssistView>
8886
</div>
8987

9088
@code {
89+
private SfAIAssistView sfAIAssistView = new SfAIAssistView();
9190
private List<string> promptSuggestions = new List<string>
9291
{
9392
"What are the best tools for organizing my tasks?",
9493
"How can I maintain work-life balance effectively?"
9594
};
96-
private readonly string geminiApiKey = "AIzaSyB0AdTfrCZlkEaPFac8VoS55DUKfP5cyeE"; // Replace with your Gemini API key
97-
95+
private readonly string geminiApiKey = "";
9896
private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args)
9997
{
10098
try
@@ -103,9 +101,14 @@ const string GeminiApiKey = 'Place your API key here';
103101
var model = gemini.GenerativeModel(model: "gemini-1.5-flash");
104102
var response = await model.GenerateContent(args.Prompt);
105103
var responseText = response.Text;
104+
var pipeline = new MarkdownPipelineBuilder()
105+
.UseAdvancedExtensions()
106+
.UsePipeTables()
107+
.UseTaskLists()
108+
.Build();
106109
// Add the response to the AIAssistView
107110
await Task.Delay(1000); // Simulate delay as in original code
108-
args.Response = responseText;
111+
args.Response = Markdown.ToHtml(responseText, pipeline);
109112
}
110113
catch (Exception ex)
111114
{
@@ -114,6 +117,12 @@ const string GeminiApiKey = 'Place your API key here';
114117
args.Response = "⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later.";
115118
}
116119
}
120+
121+
private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
122+
{
123+
sfAIAssistView.Prompts.Clear();
124+
StateHasChanged();
125+
}
117126
}
118127

119128
{% endhighlight %}

‎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‎

-12.9 KB
Loading

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

40.3 KB
Loading

‎blazor/chat-ui/gemini-integration.md‎ renamed to ‎blazor/chat-ui/ai-integrations/gemini-integration.md‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,38 @@ control: Chat UI
77
documentation: ug
88
---
99

10-
# Integration of Gemini AI With Blazor Chat UI Component
10+
# Integration of Gemini AI With Blazor Chat UI component
1111

12-
The Syncfusion Chat UI supports integration with [Gemini](Gemini API quickstart | Google AI for Developers), enabling advanced conversational AI features in your applications.
13-
14-
## Getting Started with the Chat UI Component
15-
16-
Before integrating Gemini AI, ensure that the Syncfusion Chat UI is correctly rendered in your application:
17-
18-
[ Blazor Getting Started Guide](../getting-started)
12+
The Syncfusion Chat UI supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in your applications.
1913

2014
## Prerequisites
2115

2216
* Google account to generate API key on accessing `Gemini AI`
23-
* Syncfusion Chat UI for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
17+
* Syncfusion Chat UI for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
2418

25-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InteractiveChat and Themes NuGet in the App
19+
## Getting Started with the Chat UI Component
2620

27-
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
28-
* Ensure you’re in the project root directory where your `.csproj` file is located.
29-
* Run the following command to install a [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
21+
Before integrating Gemini AI, ensure that the Syncfusion Chat UI is correctly rendered in your application:
3022

31-
{% tabs %}
23+
[ Blazor Getting Started Guide](../getting-started)
3224

33-
{% highlight c# tabtitle="Package Manager" %}
25+
## Install Dependencies
3426

35-
dotnet add package Syncfusion.Blazor.InteractiveChat -v {{ site.releaseversion }}
36-
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
37-
dotnet restore
27+
Install the Syncfusion Blazor package in the application.
3828

39-
{% endhighlight %}
29+
```bash
4030

41-
{% endtabs %}
31+
Install-Package Syncfusion.Blazor.InteractiveChat
32+
33+
```
34+
35+
Install the Gemini AI package in the application.
4236

43-
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
37+
```bash
4438

45-
{% endtabcontent %}
39+
Install-Package Mscc.GenerativeAI
4640

47-
{% endtabcontents %}
41+
```
4842

4943
## Generate API Key
5044

@@ -103,7 +97,7 @@ const string GeminiApiKey = 'Place your API key here';
10397
{
10498
await Task.Delay(500);
10599
var userPrompt = args.Message.Text ?? "hi";
106-
const string GeminiApiKey = "AIzaSyB0AdTfrCZlkEaPFac8VoS55DUKfP5cyeE";
100+
const string GeminiApiKey = "";
107101
var gemini = new GoogleAI(apiKey: GeminiApiKey);
108102
var model = gemini.GenerativeModel(model: "gemini-1.5-flash");
109103
var response = await model.GenerateContent(userPrompt);

0 commit comments

Comments
 (0)