Skip to content

Commit 4d6e06e

Browse files
MuniappanSubramanianMuniappanSubramanian
authored
Merge pull request #3893 from syncfusion-content/STE_UG_Update
982107-Update the Smart Text Editor UG content
2 parents 1fec61d + bde3e42 commit 4d6e06e

File tree

11 files changed

+375
-169
lines changed

11 files changed

+375
-169
lines changed

MAUI/SmartTextEditor/claude-service.md renamed to MAUI/Common/claude-service.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Claude AI for AI-Powered Text Editor | Syncfusion®
4-
description: Learn how to implement a custom AI service using the Claude API with Syncfusion<sup>&reg;</sup> AI-Powered Text Editor (SfSmartTextEditor) control.
3+
title: Claude AI for AI-Powered Components | Syncfusion®
4+
description: Learn how to implement a custom AI service using the Claude API with Syncfusion<sup>&reg;</sup> AI-Powered Components.
55
platform: maui
6-
control: SfSmartTextEditor
6+
control: SmartComponents
77
documentation: ug
88
---
99

10-
# Claude AI Integration with .NET MAUI Smart Text Editor
10+
# Claude AI Integration with .NET MAUI Smart Components
1111

12-
The Syncfusion [.NET MAUI Smart Text Editor] (SfSmartTextEditor) can provide AI-powered suggestions while typing. You can integrate Anthropic `Claude AI` using the `IChatInferenceService` interface, which acts as a bridge between the editor and your custom AI service.
12+
The Syncfusion .NET MAUI AI-powered components can enhance applications with intelligent capabilities. You can integrate Anthropic `Claude AI` using the `IChatInferenceService` interface, which acts as a bridge between the editor and your custom AI service.
1313

1414
## Setting Up Claude
1515

‎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.
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 **MauiProgram.cs** file in your app.
80+
81+
{% tabs %}
82+
{% highlight C# tabtitle="MauiProgram" hl_lines="3 23" %}
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/deepseek-service.md renamed to MAUI/Common/deepseek-service.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: DeepSeek AI for AI-Powered Text Editor | Syncfusion®
4-
description: Learn how to integrate the DeepSeek AI services with Syncfusion<sup>&reg;</sup> AI-Powered Text Editor (SfSmartTextEditor) control.
3+
title: DeepSeek AI for AI-Powered Components | Syncfusion®
4+
description: Learn how to integrate the DeepSeek AI services with Syncfusion<sup>&reg;</sup> AI-Powered Components.
55
platform: maui
6-
control: SfSmartTextEditor
6+
control: SmartComponents
77
documentation: ug
88
---
99

10-
# DeepSeek AI Integration with .NET MAUI Smart Text Editor
10+
# DeepSeek AI Integration with .NET MAUI Smart Components
1111

12-
The Syncfusion [.NET MAUI Smart Text Editor] (SfSmartTextEditor) can provide AI-powered suggestions while typing. You can integrate DeepSeek using the `IChatInferenceService` interface, which standardizes communication between the editor and your custom AI service.
12+
The Syncfusion .NET MAUI AI-powered components can enhance applications with intelligent capabilities. You can integrate DeepSeek using the `IChatInferenceService` interface, which standardizes communication between the editor and your custom AI service.
1313

1414
## Setting Up DeepSeek
1515

MAUI/SmartTextEditor/gemini-service.md renamed to MAUI/Common/gemini-service.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Gemini AI for AI-Powered Text Editor | Syncfusion®
4-
description: Learn how to implement a custom AI service using Google's Gemini API with Syncfusion<sup>&reg;</sup> AI-Powered Text Editor (SfSmartTextEditor) control.
3+
title: Gemini AI for AI-Powered Components | Syncfusion®
4+
description: Learn how to implement a custom AI service using Google's Gemini API with Syncfusion<sup>&reg;</sup> AI-Powered Components.
55
platform: maui
6-
control: SfSmartTextEditor
6+
control: SmartComponents
77
documentation: ug
88
---
99

10-
# Gemini AI Integration with .NET MAUI Smart Text Editor
10+
# Gemini AI Integration with .NET MAUI Smart Components
1111

12-
The Syncfusion [.NET MAUI Smart Text Editor] provides AI-powered suggestions for context-aware text input. By default, it works with providers like OpenAI or Azure OpenAI, but you can integrate `Google Gemini AI` using the `IChatInferenceService` interface. This guide explains how to implement and register Gemini AI for the Smart Text Editor in a .NET MAUI app.
12+
The Syncfusion .NET MAUI AI-powered components can enhance applications with intelligent capabilities. By default, it works with providers like OpenAI or Azure OpenAI, but you can integrate `Google Gemini AI` using the `IChatInferenceService` interface. This guide explains how to implement and register Gemini AI for the Smart Text Editor in a .NET MAUI app.
1313

1414
## Setting Up Gemini
1515

MAUI/SmartTextEditor/groq-service.md renamed to MAUI/Common/groq-service.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Groq AI Integration with AI-Powered Text Editor | Syncfusion®
4-
description: Learn how to implement a custom AI service using the Groq API with Syncfusion<sup>&reg;</sup> AI-Powered Text Editor (SfSmartTextEditor) control.
3+
title: Groq AI Integration with AI-Powered Components | Syncfusion®
4+
description: Learn how to implement a custom AI service using the Groq API with Syncfusion<sup>&reg;</sup> AI-Powered Components.
55
platform: maui
6-
control: SfSmartTextEditor
6+
control: SmartComponents
77
documentation: ug
88
---
99

10-
# Groq AI Integration with .NET MAUI Smart Text Editor
10+
# Groq AI Integration with .NET MAUI Smart Components
1111

12-
The Syncfusion [.NET MAUI Smart Text Editor] (SfSmartTextEditor) can show AI‑powered suggestions while you type. You can integrate `Groq` using the `IChatInferenceService` interface and Groq’s OpenAI‑compatible Chat Completions API for fast, low‑latency results.
12+
The Syncfusion .NET MAUI AI-powered components can enhance applications with intelligent capabilities. You can integrate `Groq` by implementing the `IChatInferenceService` interface and leveraging Groq’s OpenAI-compatible Chat Completions API to deliver fast, low-latency results.
1313

1414
## Setting Up Groq
1515

‎MAUI/SmartTextEditor/customization.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ documentation: ug
1111
This section explains how to change the AI-Powered Text Editor’s appearance and suggestion behavior. You can set text styles, placeholder options, and customize how suggestions are shown.
1212

1313
## Text customization
14-
Set or bind the smart text editor’s text using the [Text] property. You can use this to preloaded content or bind it to a field in your view model for data binding.
14+
Set or bind the smart text editor’s text using the [Text]() property. You can use this to preloaded content or bind it to a field in your view model for data binding.
1515

1616
{% tabs %}
1717
{% highlight xaml tabtitle="XAML" %}
@@ -31,7 +31,7 @@ var smarttexteditor = new SfSmartTextEditor
3131
{% endtabs %}
3232

3333
## Text style customization
34-
You can change the text style and font using the [TextStyle] property to make the editor look the way you want.
34+
You can change the text style and font using the [TextStyle]() property to make the editor look the way you want.
3535

3636
{% tabs %}
3737
{% highlight xaml tabtitle="XAML" %}
@@ -45,7 +45,7 @@ You can change the text style and font using the [TextStyle] property to make th
4545
<smarttexteditor:SfSmartTextEditor.TextStyle>
4646
<smarttexteditor:SmartTextEditorStyle
4747
FontSize="16"
48-
TextColor="Skyblue" />
48+
TextColor="Blue" />
4949
</smarttexteditor:SfSmartTextEditor.TextStyle>
5050
</smarttexteditor:SfSmartTextEditor>
5151
</ContentPage>
@@ -60,7 +60,7 @@ var smarttexteditor = new SfSmartTextEditor
6060
TextStyle = new SmartTextEditorStyle
6161
{
6262
FontSize = 16,
63-
TextColor = Colors.Skyblue,
63+
TextColor = Colors.Blue,
6464
}
6565
};
6666

@@ -70,64 +70,66 @@ var smarttexteditor = new SfSmartTextEditor
7070
![Text Style in .NET MAUI Smart Text Editor.](images/customization/maui-smarttexteditor-textcolor.gif)
7171

7272
## Placeholder text and color customization
73-
Add a helpful placeholder to guide users and use [PlaceholderColor] to make sure the text is easy to read.
73+
Add a helpful placeholder to guide users and use [PlaceholderColor]() to make sure the text is easy to read.
7474

7575
{% tabs %}
7676
{% highlight xaml tabtitle="XAML" %}
7777

7878
<smarttexteditor:SfSmartTextEditor
7979
Placeholder="Type your message..."
80-
PlaceholderColor="#49454F" />
80+
PlaceholderColor="#7E57C2" />
8181

8282
{% endhighlight %}
8383
{% highlight c# tabtitle="C#" %}
8484

8585
var editor = new SfSmartTextEditor
8686
{
8787
Placeholder = "Type your message...",
88-
PlaceholderColor = Color.FromArgb("#49454F")
88+
PlaceholderColor = Color.FromArgb("#7E57C2")
8989
};
9090

9191
{% endhighlight %}
9292
{% endtabs %}
9393

9494
## Suggestion text color
95-
Customize the color of the suggestion text using the [SuggestionTextColor] property to match your theme and improves readability.
95+
Customize the color of the suggestion text using the [SuggestionTextColor]() property to match your theme and improves readability.
9696

9797
{% tabs %}
9898
{% highlight xaml tabtitle="XAML" %}
9999

100100
<smarttexteditor:SfSmartTextEditor
101-
SuggestionTextColor="LightYellow" />
101+
SuggestionTextColor="Skyblue" />
102102

103103
{% endhighlight %}
104104
{% highlight c# tabtitle="C#" %}
105105

106106
var smarttexteditor = new SfSmartTextEditor
107107
{
108-
SuggestionTextColor = Colors.Goldenrod
108+
SuggestionTextColor = Colors.Skyblue
109109
};
110110

111111
{% endhighlight %}
112112
{% endtabs %}
113113

114+
![Suggestion Text Color in .NET MAUI Smart Text Editor.](images/customization/maui-smarttexteditor-textcolor.gif)
115+
114116
## Suggestion popup background
115-
Change the background color of the suggestion popup using the [SuggestionPopupBackground] property in Popup mode to align with your app's design.
117+
Change the background color of the suggestion popup using the [SuggestionPopupBackground]() property in Popup mode to align with your app's design.
116118

117119
{% tabs %}
118120
{% highlight xaml tabtitle="XAML" %}
119121

120122
<smarttexteditor:SfSmartTextEditor
121123
SuggestionDisplayMode="Popup"
122-
SuggestionPopupBackground="LightPink" />
124+
SuggestionPopupBackground="#0078D4" />
123125

124126
{% endhighlight %}
125127
{% highlight c# tabtitle="C#" %}
126128

127129
var smarttexteditor = new SfSmartTextEditor
128130
{
129131
SuggestionDisplayMode = SuggestionDisplayMode.Popup,
130-
SuggestionPopupBackground = new SolidColorBrush(Colors.LightYellow)
132+
SuggestionPopupBackground = Color.FromArgb("#0078D4"),
131133
};
132134

133135
{% endhighlight %}
@@ -136,7 +138,7 @@ var smarttexteditor = new SfSmartTextEditor
136138
![Customization in .NET MAUI Smart Text Editor.](images/customization/maui-smarttexteditor-customization.gif)
137139

138140
## Maximum input length
139-
Set a limit on the number of characters the user can enter in the smart text editor using the [MaxLength] property.
141+
Set a limit on the number of characters the user can enter in the smart text editor using the [MaxLength]() property.
140142

141143
{% tabs %}
142144
{% highlight xaml tabtitle="XAML" %}

‎MAUI/SmartTextEditor/events.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ The AI-Powered Text Editor provides the `TextChanged` event, which is triggered
1313

1414
## TextChanged
1515

16-
The [TextChanged] event is triggered whenever the text in the smart text editor changes.
16+
The [TextChanged]() event is triggered whenever the text in the smart text editor changes.
1717

1818
* `Sender`: This contains the `SfSmartTextEditor` object.
1919

20-
* `EventArgs`: The event uses [TextChangedEventArgs], which provides details about the text change.
20+
* `EventArgs`: The event uses [TextChangedEventArgs](), which provides details about the text change.
2121

22-
* [NewTextValue] : Returns the new text.
23-
* [OldTextValue] : Returns the previous text.
22+
* [NewTextValue]() : Returns the new text.
23+
* [OldTextValue]() : Returns the previous text.
2424

2525
{% tabs %}
2626
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %}
@@ -44,7 +44,7 @@ private void OnTextChanged(object sender, Syncfusion.Maui.SmartComponents.TextCh
4444

4545
### TextChangedCommand
4646

47-
The [SfSmartTextEditor] includes a built-in property called `TextChangedCommand`, which is triggered whenever the text in the smart text editor changes. This event can be invoked through the [TextChangedCommand].
47+
The [SfSmartTextEditor]() includes a built-in property called `TextChangedCommand`, which is triggered whenever the text in the smart text editor changes. This event can be invoked through the [TextChangedCommand]().
4848

4949
{% tabs %}
5050
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %}

0 commit comments

Comments
 (0)