Skip to content

Commit 8bb0cb7

Browse files
Sathish-087Sathish-087
committed
Update getting started
1 parent 93d7215 commit 8bb0cb7

File tree

1 file changed

+134
-105
lines changed

1 file changed

+134
-105
lines changed

‎MAUI/SmartTextEditor/getting-started.md‎

Lines changed: 134 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,52 @@ namespace GettingStarted
6565
{% endhighlight %}
6666
{% endtabs %}
6767

68-
## Step 4: Add .NET MAUI Smart Text Editor control
68+
## Step 4: Register the AI Service
69+
70+
To configure the AI services, you must call the `ConfigureSyncfusionAIServices()` method in the `MauiProgram.cs` file.
71+
72+
{% highlight c# hl_lines="6 31" %}
73+
74+
using Microsoft.Maui;
75+
using Microsoft.Maui.Hosting;
76+
using Microsoft.Maui.Controls.Compatibility;
77+
using Microsoft.Maui.Controls.Hosting;
78+
using Microsoft.Maui.Controls.Xaml;
79+
using Syncfusion.Maui.SmartComponents.Hosting;
80+
81+
namespace GettingStarted
82+
{
83+
public class MauiProgram
84+
{
85+
public static MauiApp CreateMauiApp()
86+
{
87+
var builder = MauiApp.CreateBuilder();
88+
builder
89+
.UseMauiApp<App>()
90+
.ConfigureFonts(fonts =>
91+
{
92+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
93+
});
94+
95+
string key = "<MENTION-YOUR-KEY>";
96+
Uri azureEndPoint = new Uri("<MENTION-YOUR-URL>");
97+
string deploymentName = "<MENTION-YOUR-DEPLOYMENT-NAME>";
98+
99+
// Shows how to configure Azure AI service to the Smart Components.
100+
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(azureEndPoint, new AzureKeyCredential(key));
101+
IChatClient azureChatClient = azureOpenAIClient.GetChatClient(deploymentName).AsIChatClient();
102+
103+
builder.Services.AddChatClient(azureChatClient);
104+
builder.ConfigureSyncfusionAIServices();
105+
106+
return builder.Build();
107+
}
108+
}
109+
}
110+
111+
{% endhighlight %}
112+
113+
## Step 5: Add .NET MAUI Smart Text Editor control
69114

70115
1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code.
71116
2. Initialize [SfSmartTextEditor]().
@@ -154,7 +199,50 @@ namespace GettingStarted
154199
{% endhighlight %}
155200
{% endtabs %}
156201

157-
## Step 4: Add .NET MAUI Smart Text Editor control
202+
## Step 4: Register the AI Service
203+
204+
To configure the AI services, you must call the `ConfigureSyncfusionAIServices()` method in the `MauiProgram.cs` file.
205+
206+
{% highlight c# hl_lines="6 31" %}
207+
using Microsoft.Maui;
208+
using Microsoft.Maui.Hosting;
209+
using Microsoft.Maui.Controls.Compatibility;
210+
using Microsoft.Maui.Controls.Hosting;
211+
using Microsoft.Maui.Controls.Xaml;
212+
using Syncfusion.Maui.SmartComponents.Hosting;
213+
214+
namespace GettingStarted
215+
{
216+
public class MauiProgram
217+
{
218+
public static MauiApp CreateMauiApp()
219+
{
220+
var builder = MauiApp.CreateBuilder();
221+
builder
222+
.UseMauiApp<App>()
223+
.ConfigureFonts(fonts =>
224+
{
225+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
226+
});
227+
228+
string key = "<MENTION-YOUR-KEY>";
229+
Uri azureEndPoint = new Uri("<MENTION-YOUR-URL>");
230+
string deploymentName = "<MENTION-YOUR-DEPLOYMENT-NAME>";
231+
232+
// Shows how to configure Azure AI service to the Smart Components.
233+
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(azureEndPoint, new AzureKeyCredential(key));
234+
IChatClient azureChatClient = azureOpenAIClient.GetChatClient(deploymentName).AsIChatClient();
235+
236+
builder.Services.AddChatClient(azureChatClient);
237+
builder.ConfigureSyncfusionAIServices();
238+
239+
return builder.Build();
240+
}
241+
}
242+
}
243+
{% endhighlight %}
244+
245+
## Step 5: Add .NET MAUI Smart Text Editor control
158246

159247
1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code.
160248
2. Initialize [SfSmartTextEditor]().
@@ -244,7 +332,50 @@ namespace GettingStarted
244332
{% endhighlight %}
245333
{% endtabs %}
246334

247-
## Step 4: Add .NET MAUI Smart Text Editor control
335+
## Step 4: Register the AI Service
336+
337+
To configure the AI services, you must call the `ConfigureSyncfusionAIServices()` method in the `MauiProgram.cs` file.
338+
339+
{% highlight c# hl_lines="6 31" %}
340+
using Microsoft.Maui;
341+
using Microsoft.Maui.Hosting;
342+
using Microsoft.Maui.Controls.Compatibility;
343+
using Microsoft.Maui.Controls.Hosting;
344+
using Microsoft.Maui.Controls.Xaml;
345+
using Syncfusion.Maui.SmartComponents.Hosting;
346+
347+
namespace GettingStarted
348+
{
349+
public class MauiProgram
350+
{
351+
public static MauiApp CreateMauiApp()
352+
{
353+
var builder = MauiApp.CreateBuilder();
354+
builder
355+
.UseMauiApp<App>()
356+
.ConfigureFonts(fonts =>
357+
{
358+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
359+
});
360+
361+
string key = "<MENTION-YOUR-KEY>";
362+
Uri azureEndPoint = new Uri("<MENTION-YOUR-URL>");
363+
string deploymentName = "<MENTION-YOUR-DEPLOYMENT-NAME>";
364+
365+
// Shows how to configure Azure AI service to the Smart Components.
366+
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(azureEndPoint, new AzureKeyCredential(key));
367+
IChatClient azureChatClient = azureOpenAIClient.GetChatClient(deploymentName).AsIChatClient();
368+
369+
builder.Services.AddChatClient(azureChatClient);
370+
builder.ConfigureSyncfusionAIServices();
371+
372+
return builder.Build();
373+
}
374+
}
375+
}
376+
{% endhighlight %}
377+
378+
## Step 5: Add .NET MAUI Smart Text Editor control
248379

249380
1. To initialize the control, import the `Syncfusion.Maui.SmartComponents` namespace into your code.
250381
2. Initialize [SfSmartTextEditor]().
@@ -280,108 +411,6 @@ public partial class MainPage : ContentPage
280411
{% endtabcontent %}
281412
{% endtabcontents %}
282413

283-
## Step 5: Configure AI Service
284-
285-
The Smart Text Editor 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`. If no AI inference service is configured, the editor generates offline suggestions from your UserPhrases.
286-
287-
### Azure OpenAI
288-
289-
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.
290-
291-
* Install the following NuGet packages to your project:
292-
293-
{% tabs %}
294-
295-
{% highlight c# tabtitle="Package Manager" %}
296-
297-
Install-Package Microsoft.Extensions.AI
298-
Install-Package Microsoft.Extensions.AI.OpenAI
299-
Install-Package Azure.AI.OpenAI
300-
301-
{% endhighlight %}
302-
303-
{% endtabs %}
304-
305-
* To configure the AI service, add the following settings to the **MauiProgram.cs** file in your application.
306-
307-
{% tabs %}
308-
{% highlight C# tabtitle="MauiProgram" hl_lines="5 21" %}
309-
310-
using Azure.AI.OpenAI;
311-
using Microsoft.Extensions.AI;
312-
using Microsoft.Extensions.Logging;
313-
using System.ClientModel;
314-
using Syncfusion.Maui.SmartComponents.Hosting;
315-
316-
var builder = MauiApp.CreateBuilder();
317-
318-
....
319-
320-
string azureOpenAIKey = "AZURE_OPENAI_KEY";
321-
string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
322-
string azureOpenAIModel = "AZURE_OPENAI_MODEL";
323-
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
324-
new Uri(azureOpenAIEndpoint),
325-
new ApiKeyCredential(azureOpenAIKey)
326-
);
327-
IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
328-
builder.Services.AddChatClient(azureOpenAIChatClient);
329-
330-
builder.ConfigureSyncfusionAIServices();
331-
332-
{% endhighlight %}
333-
{% endtabs %}
334-
335-
### Ollama
336-
337-
To use Ollama for running self hosted models:
338-
339-
1. **Download and install Ollama**
340-
Visit [Ollama's official website](https://ollama.com) and install the application appropriate for your operating system.
341-
342-
2. **Install the desired model from the Ollama library**
343-
You can browse and install models from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`, etc.).
344-
345-
3. **Configure your application**
346-
347-
- Provide the `Endpoint` URL where the model is hosted (e.g., `http://localhost:11434`).
348-
- Set `ModelName` to the specific model you installed (e.g., `llama2:13b`).
349-
350-
* Install the following NuGet packages to your project:
351-
352-
{% tabs %}
353-
354-
{% highlight c# tabtitle="Package Manager" %}
355-
356-
Install-Package Microsoft.Extensions.AI
357-
Install-Package OllamaSharp
358-
359-
{% endhighlight %}
360-
361-
{% endtabs %}
362-
363-
* Add the following settings to the **MauiProgram.cs** file in your application.
364-
365-
{% tabs %}
366-
{% highlight C# tabtitle="MauiProgram" hl_lines="3 13" %}
367-
368-
using Microsoft.Extensions.AI;
369-
using OllamaSharp;
370-
using Syncfusion.Maui.SmartComponents.Hosting;
371-
372-
var builder = MauiApp.CreateBuilder();
373-
374-
....
375-
376-
string ModelName = "MODEL_NAME";
377-
IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
378-
builder.Services.AddChatClient(chatClient);
379-
380-
builder.ConfigureSyncfusionAIServices();
381-
382-
{% endhighlight %}
383-
{% endtabs %}
384-
385414
## Step 6: Configure user role and phrases for suggestions
386415

387416
Set the writing context and preferred expressions to guide completions:

0 commit comments

Comments
 (0)