Skip to content

Commit a7d5e9d

Browse files
Sathish-087Sathish-087
committed
Added configure service
1 parent 8bb0cb7 commit a7d5e9d

File tree

3 files changed

+166
-0
lines changed

3 files changed

+166
-0
lines changed

‎MAUI/Common/configure-ai-service.md‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
layout: post
3+
title: Configure AI Service with AI-Powered Components | Syncfusion®
4+
description: Learn how to implement a configure AI service with Syncfusion<sup>&reg;</sup> AI-Powered Components.
5+
platform: maui
6+
control: SmartComponents
7+
documentation: ug
8+
---
9+
10+
## Configure AI Service With Smart Components
11+
12+
The Smart Components uses a chat inference service resolved from dependency injection to generate contextual suggestions. Register a compatible chat client and an inference adapter in `MauiProgram.cs`.
13+
14+
### Azure OpenAI
15+
16+
For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you.
17+
18+
* Install the following NuGet packages to your project:
19+
20+
{% tabs %}
21+
22+
{% highlight c# tabtitle="Package Manager" %}
23+
24+
Install-Package Microsoft.Extensions.AI
25+
Install-Package Microsoft.Extensions.AI.OpenAI
26+
Install-Package Azure.AI.OpenAI
27+
28+
{% endhighlight %}
29+
30+
{% endtabs %}
31+
32+
* To configure the AI service, add the following settings to the **MauiProgram.cs** file in your application.
33+
34+
{% tabs %}
35+
{% highlight C# tabtitle="MauiProgram" hl_lines="5 21" %}
36+
37+
using Azure.AI.OpenAI;
38+
using Microsoft.Extensions.AI;
39+
using Microsoft.Extensions.Logging;
40+
using System.ClientModel;
41+
using Syncfusion.Maui.SmartComponents.Hosting;
42+
43+
var builder = MauiApp.CreateBuilder();
44+
45+
....
46+
47+
string azureOpenAIKey = "AZURE_OPENAI_KEY";
48+
string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
49+
string azureOpenAIModel = "AZURE_OPENAI_MODEL";
50+
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
51+
new Uri(azureOpenAIEndpoint),
52+
new ApiKeyCredential(azureOpenAIKey)
53+
);
54+
IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
55+
builder.Services.AddChatClient(azureOpenAIChatClient);
56+
57+
builder.ConfigureSyncfusionAIServices();
58+
59+
{% endhighlight %}
60+
{% endtabs %}
61+
62+
### OpenAI
63+
64+
For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.).
65+
66+
* Install the following NuGet packages to your project:
67+
68+
{% tabs %}
69+
70+
{% highlight c# tabtitle="Package Manager" %}
71+
72+
Install-Package Microsoft.Extensions.AI
73+
Install-Package Microsoft.Extensions.AI.OpenAI
74+
75+
{% endhighlight %}
76+
77+
{% endtabs %}
78+
79+
* To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app.
80+
81+
{% tabs %}
82+
{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %}
83+
84+
using Microsoft.Extensions.AI;
85+
using OpenAI;
86+
using Syncfusion.Maui.SmartComponents.Hosting;
87+
88+
var builder = MauiApp.CreateBuilder();
89+
90+
....
91+
92+
string openAIApikey = "API-KEY";
93+
string openAIModel = "gpt-4o-mini"; // example
94+
95+
var openAIClient = new OpenAIClient(
96+
new ApiKeyCredential(openAIApikey),
97+
new OpenAIClientOptions
98+
{
99+
// Default OpenAI endpoint; include /v1 if your SDK expects it
100+
Endpoint = new Uri("https://api.openai.com/v1/")
101+
});
102+
103+
IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
104+
builder.Services.AddChatClient(openAIClient);
105+
106+
builder.ConfigureSyncfusionAIServices();
107+
108+
{% endhighlight %}
109+
{% endtabs %}
110+
111+
### Ollama
112+
113+
To use Ollama for running self hosted models:
114+
115+
1. **Download and install Ollama**
116+
Visit [Ollama's official website](https://ollama.com) and install the application appropriate for your operating system.
117+
118+
2. **Install the desired model from the Ollama library**
119+
You can browse and install models from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`, etc.).
120+
121+
3. **Configure your application**
122+
123+
- Provide the `Endpoint` URL where the model is hosted (e.g., `http://localhost:11434`).
124+
- Set `ModelName` to the specific model you installed (e.g., `llama2:13b`).
125+
126+
* Install the following NuGet packages to your project:
127+
128+
{% tabs %}
129+
130+
{% highlight c# tabtitle="Package Manager" %}
131+
132+
Install-Package Microsoft.Extensions.AI
133+
Install-Package OllamaSharp
134+
135+
{% endhighlight %}
136+
137+
{% endtabs %}
138+
139+
* Add the following settings to the **MauiProgram.cs** file in your application.
140+
141+
{% tabs %}
142+
{% highlight C# tabtitle="MauiProgram" hl_lines="3 13" %}
143+
144+
using Microsoft.Extensions.AI;
145+
using OllamaSharp;
146+
using Syncfusion.Maui.SmartComponents.Hosting;
147+
148+
var builder = MauiApp.CreateBuilder();
149+
150+
....
151+
152+
string ModelName = "MODEL_NAME";
153+
IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
154+
builder.Services.AddChatClient(chatClient);
155+
156+
builder.ConfigureSyncfusionAIServices();
157+
158+
{% endhighlight %}
159+
{% endtabs %}

‎MAUI/SmartTextEditor/getting-started.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,8 @@ namespace GettingStarted
110110

111111
{% endhighlight %}
112112

113+
N> You can refer [Configure AI Service](configure-ai-service) for `Azure`, `OpenAI`, `Ollama` service.
114+
113115
## Step 5: Add .NET MAUI Smart Text Editor control
114116

115117
1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code.
@@ -242,6 +244,8 @@ namespace GettingStarted
242244
}
243245
{% endhighlight %}
244246

247+
N> You can refer [Configure AI Service](configure-ai-service) for `Azure`, `OpenAI`, `Ollama` service.
248+
245249
## Step 5: Add .NET MAUI Smart Text Editor control
246250

247251
1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code.
@@ -375,6 +379,8 @@ namespace GettingStarted
375379
}
376380
{% endhighlight %}
377381

382+
N> You can refer [Configure AI Service](configure-ai-service) for `Azure`, `OpenAI`, `Ollama` service.
383+
378384
## Step 5: Add .NET MAUI Smart Text Editor control
379385

380386
1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code.

‎maui-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1441,6 +1441,7 @@
14411441
<ul>
14421442
<li>AI Services
14431443
<ul>
1444+
<li> <a href="/maui/Common/configure-ai-service">Configure AI Service</a></li>
14441445
<li> <a href="/maui/Common/claude-service">Claude AI Service</a></li>
14451446
<li> <a href="/maui/Common/gemini-service">Gemini AI Service</a></li>
14461447
<li> <a href="/maui/Common/deepseek-service">Deepseek AI Service</a></li>

0 commit comments

Comments
 (0)