You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Custom AI Service Integration with Syncfusion Smart Components
4
-
description: Learn how to use IChatInferenceService to integrate custom AI services with Syncfusion Smart Components
3
+
title: Custom AI Service Integration with Blazor Smart TextArea | Syncfusion
4
+
description: Learn how to use IChatInferenceService to integrate custom AI services with the Syncfusion Blazor Smart TextArea component.
5
5
platform: Blazor
6
6
control: Smart TextArea
7
7
documentation: ug
8
8
---
9
9
10
-
# Custom AI Service Integration
11
-
12
-
## Overview
13
-
14
-
Syncfusion<supstyle="font-size:70%">®</sup> Smart Components provide built-in support for OpenAI and Azure OpenAI services. However, you can also integrate other AI services using the `IChatInferenceService` interface, which acts as a bridge between Smart Components and your custom AI service.
10
+
# Custom AI Service Integration with Blazor Smart TextArea
15
11
12
+
The Syncfusion Blazor Smart TextArea component leverages AI to provide context-aware autocompletion, typically using OpenAI or Azure OpenAI services. Developers can integrate custom AI services using the `IChatInferenceService` interface, which standardizes communication between the Smart TextArea and third-party AI providers. This section explains how to implement and register a custom AI service for the Smart TextArea.
16
13
17
14
## IChatInferenceService Interface
18
15
19
-
The `IChatInferenceService` interface defines a simple contract for AI service integration:
16
+
The `IChatInferenceService` interface defines a contract for integrating custom AI services with Syncfusion Smart Components. It enables the Smart TextArea to request and receive AI-generated responses.
- Consistent communication between components and AI services
30
-
- Easy switching between different AI providers
27
+
-**Purpose**: Standardizes communication for AI-generated responses.
28
+
-**Parameters**: The `ChatParameters` type includes properties like user input and context.
29
+
-**Benefits**: Enables seamless switching between AI providers without modifying component code.
30
+
31
+
## Simple Implementation of a Custom AI Service
32
+
33
+
Below is a sample implementation of a mock AI service named `MockAIService`. This service demonstrates how to implement the `IChatInferenceService` interface by returning sample, context-aware responses. You can replace the logic with your own AI integration.
1. Implement and register the custom AI service as shown above.
74
+
2. Add the Smart TextArea component to your application.
75
+
3. Run the application using <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS).
76
+
4. Type phrases like "thank" or "investigate" in the Smart TextArea to verify that the custom AI service generates appropriate responses.
77
+
5. Ensure suggestions appear as configured (e.g., inline or pop-up, based on the `ShowSuggestionOnPopup` setting).
78
+
79
+
32
80
33
81
## Implemented AI Services
34
82
@@ -41,13 +89,14 @@ Here are examples of AI services integrated using the `IChatInferenceService` in
41
89
| Groq |[Groq Integration](groq-service)|
42
90
| Gemini |[Gemini Integration](gemini-service)|
43
91
92
+
## Troubleshooting
44
93
45
-
## Service Registration
46
-
47
-
Register your custom implementation in `Program.cs`:
94
+
If the custom AI service does not work as expected, try the following:
95
+
-**No Suggestions Displayed**: Ensure the `IChatInferenceService` implementation is registered in **Program.cs** and returns valid responses. Check for errors in the `GenerateResponseAsync` method.
96
+
-**Dependency Issues**: Verify that all required NuGet packages (e.g., `Syncfusion.Blazor.SmartComponents`) are installed. Run `dotnet restore` to resolve dependencies.
97
+
-**Incorrect Responses**: Debug the custom AI service implementation to ensure it processes `ChatParameters` correctly and returns expected responses.
-[Getting Started with Syncfusion Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp)
title: Suggestion Customization in Blazor Smart TextArea | Syncfusion
4
-
description: Checkout and learn here all about Suggestion Customization in Syncfusion Blazor Smart TextArea component and more.
3
+
title: Customize Suggestions in Blazor Smart TextArea | Syncfusion
4
+
description: Learn how to customize suggestion display in the Syncfusion Blazor Smart TextArea component for enhanced user interaction.
5
5
platform: Blazor
6
6
control: Smart TextArea
7
7
documentation: ug
8
8
---
9
9
10
-
# Customizing Appearance of Suggestions
10
+
# Customize Suggestions in Blazor Smart TextArea
11
11
12
-
The `ShowSuggestionOnPopup` attribute in Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart TextArea allows you to control how text suggestions are displayed to the users.
12
+
The SyncfusionBlazor Smart TextArea component provides AI-powered autocompletion for context-aware text input, with customizable suggestion display options. This section explains how to configure the appearance and behavior of suggestions to enhance user experience in applications like issue trackers or customer support systems.
13
13
14
-
* If `ShowSuggestionOnPopup` is `true`, suggestions displayed in the pop-up window
14
+
## Configure Suggestion Display
15
15
16
-
```cshtml
16
+
The `ShowSuggestionOnPopup` attribute controls how AI-generated suggestions are presented to users in the Smart TextArea component. Suggestions are based on the `UserRole` and optional `UserPhrases` attributes, which define the context and predefined phrases for autocompletion.
17
+
18
+
### Pop-up Suggestions
19
+
20
+
Set `ShowSuggestionOnPopup="true"` to display suggestions in a pop-up window above the text area, ideal for scenarios where users need to select from multiple suggestions without cluttering the input area.
21
+
22
+
Add the following code to a Razor file (e.g., `~/Pages/Home.razor`):
23
+
24
+
```razor
17
25
@using Syncfusion.Blazor.SmartComponents
18
26
19
-
<SfSmartTextArea UserRole="@userRole" Placeholder="Enter your queries here" @bind-Value="prompt" Width="75%" RowCount="5" ShowSuggestionOnPopup="true">
public string userRole = "Maintainer of an open-source project replying to GitHub issues";
34
+
// Predefined phrases for AI to suggest during typing
35
+
public string[] userPhrases = [
36
+
"Thank you for contacting us.",
37
+
"To investigate, we will need a reproducible example as a public Git repository.",
38
+
"Could you please post a screenshot of the issue?"
39
+
];
25
40
}
26
41
```
27
42
28
-
43
+
29
44
30
-
* If `ShowSuggestionOnPopup` is `false`, suggestions displayed inline.
45
+
### Inline Suggestions
31
46
32
-
```cshtml
47
+
Set `ShowSuggestionOnPopup="false"` (default) to display suggestions inline within the text area, suitable for seamless text entry where users can accept suggestions by continuing to type or pressing a key (e.g., Tab).
48
+
49
+
Add the following code to a Razor file (e.g., `~/Pages/Home.razor`):
50
+
51
+
```razor
33
52
@using Syncfusion.Blazor.SmartComponents
34
53
35
-
<SfSmartTextArea UserRole="@userRole" Placeholder="Enter your queries here" @bind-Value="prompt" Width="75%" RowCount="5" ShowSuggestionOnPopup="false">
1. Add the Smart TextArea component to your Blazor Web App as shown above.
75
+
2. Run the application using <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS).
76
+
3. Type phrases like "Thank you" or "To investigate" to trigger suggestions.
77
+
4. For pop-up mode, verify that suggestions appear in a pop-up window and can be selected. For inline mode, confirm that suggestions appear in the text area and can be accepted by tab keypress.
47
78
48
-
## See also
79
+
## Troubleshooting
49
80
50
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/)
51
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart TextArea with in Blazor Server App](https://blazor.syncfusion.com/documentation/)
81
+
If suggestions do not appear, try the following:
82
+
-**AI Configuration Errors**: Verify that the API key, endpoint, and model name are correctly configured in **Program.cs**. Check for typos or invalid credentials.
83
+
-**Missing Dependencies**: Ensure all required NuGet packages (`Syncfusion.Blazor.SmartComponents`, `Microsoft.Extensions.AI`, etc.) are installed. Run `dotnet restore` to resolve dependencies.
84
+
-**Incorrect Setup**: Confirm that the Syncfusion Blazor service is registered in **Program.cs** and the stylesheet/script references are added in **App.razor**.
*[Style and Appearance](https://blazor.syncfusion.com/documentation/textarea/styles-appearance)
19
-
20
-
## See also
21
-
22
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/)
23
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor Smart TextArea in Blazor Server App](https://blazor.syncfusion.com/documentation/)
24
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/textarea/getting-started-webapp)
25
-
*[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor TextArea in Blazor App](https://blazor.syncfusion.com/documentation/textarea/getting-started)
0 commit comments