Syncfusion Blazor Smart TextArea
AI-powered text input component that provides context-aware autocompletion suggestions inline or in a popup, driven by OpenAI, Azure OpenAI, Ollama, or custom AI backends.
When to Use
Use this skill when you need to:
- Add
SfSmartTextArea to a Blazor Web App for AI-assisted text input
- Configure OpenAI, Azure OpenAI, Ollama, or a custom
IChatInferenceService
- Switch between inline and popup suggestion display modes
- Tune suggestions with
UserRole and UserPhrases context
- Implement a custom AI backend for Claude, DeepSeek, Groq, Gemini, etc.
- Troubleshoot missing suggestions or AI connectivity issues
Prerequisites
- Blazor Web App (.NET 8.0+) with Interactive Server render mode
- Visual Studio 2022 or Visual Studio Code
- Active OpenAI / Azure OpenAI account, Ollama instance, or custom AI backend
- Basic knowledge of Blazor and C#
Core Documentation
1. Getting Started with Smart TextArea
Complete setup guide including prerequisites, NuGet package installation, service registration, and component implementation.
→ Full Getting Started Guide
Key Topics:
- Creating a new Blazor Web App
- Registering Syncfusion services
- Configuring AI services (OpenAI, Azure OpenAI, Ollama)
- Adding stylesheets and scripts
- Implementing the first Smart TextArea component
2. Customization and Features
Guidance on customizing suggestion appearance and leveraging inherited TextArea features.
→ Full Customization & Features Guide
Key Topics:
- Popup vs inline suggestion display modes
- UserRole and UserPhrases configuration
- Inherited TextArea features (forms, floating labels, events, methods, styling)
- Best practices and complete examples
3. Custom AI Service Integration
Detailed procedures for implementing custom AI backends beyond the default providers.
→ Full Custom AI Integration Guide
Key Topics:
IChatInferenceService interface overview- Mock AI service examples
- Integration with Claude, DeepSeek, Groq, Gemini
- Service registration patterns
- Testing and troubleshooting custom services
Quick Start Checklist
□ Ensure Blazor Web App is created with Server Interactivity mode
□ Install required NuGet packages (SmartComponents, Themes)
□ Register Syncfusion Blazor service in Program.cs
□ Register and configure AI service (OpenAI/Azure/Ollama/Custom)
□ Add stylesheet and script references to App.razor
□ Add SfSmartTextArea component with UserRole
□ Test with Ctrl+F5 (Windows) or ⌘+F5 (macOS)
Key Concepts
| Concept |
Reference |
| UserRole |
Defines context for AI autocompletion suggestions |
| UserPhrases |
Optional predefined expressions aligned with tone/usage patterns |
| ShowSuggestionOnPopup |
Controls display mode: true (popup) or false (inline, default) |
| IChatInferenceService |
Interface for implementing custom AI backends |
| ChatParameters |
Standardized input for AI response generation |
NuGet Packages
Core Packages:
Syncfusion.Blazor.SmartComponents (v33.1.44+)Syncfusion.Blazor.Themes (v33.1.44+)
AI Service Packages (based on provider):
- OpenAI:
Microsoft.Extensions.AI, Microsoft.Extensions.AI.OpenAI
- Azure OpenAI:
Microsoft.Extensions.AI, Microsoft.Extensions.AI.OpenAI, Azure.AI.OpenAI
- Ollama:
Microsoft.Extensions.AI, OllamaSharp
1---
2name: syncfusion-blazor-smart-textarea
3description: Set up and configure the Syncfusion Blazor Smart TextArea for AI-powered inline or popup text autocompletion. Covers OpenAI, Azure OpenAI, Ollama, and custom IChatInferenceService backends, plus UserRole, UserPhrases, and suggestion display mode customization.
4metadata:
5 author: "Syncfusion Inc"
6 version: "34.1.29"
7---
8
9# Syncfusion Blazor Smart TextArea
10
11AI-powered text input component that provides context-aware autocompletion suggestions inline or in a popup, driven by OpenAI, Azure OpenAI, Ollama, or custom AI backends.
12
13## When to Use
14
15Use this skill when you need to:
16- Add `SfSmartTextArea` to a Blazor Web App for AI-assisted text input
17- Configure OpenAI, Azure OpenAI, Ollama, or a custom `IChatInferenceService`
18- Switch between inline and popup suggestion display modes
19- Tune suggestions with `UserRole` and `UserPhrases` context
20- Implement a custom AI backend for Claude, DeepSeek, Groq, Gemini, etc.
21- Troubleshoot missing suggestions or AI connectivity issues
22
23## Prerequisites
24
25- Blazor Web App (.NET 8.0+) with **Interactive Server** render mode
26- Visual Studio 2022 or Visual Studio Code
27- Active OpenAI / Azure OpenAI account, Ollama instance, or custom AI backend
28- Basic knowledge of Blazor and C#
29
30## Core Documentation
31
32### 1. Getting Started with Smart TextArea
33Complete setup guide including prerequisites, NuGet package installation, service registration, and component implementation.
34
35→ [Full Getting Started Guide](./references/getting-started.md)
36
37**Key Topics:**
38- Creating a new Blazor Web App
39- Registering Syncfusion services
40- Configuring AI services (OpenAI, Azure OpenAI, Ollama)
41- Adding stylesheets and scripts
42- Implementing the first Smart TextArea component
43
44### 2. Customization and Features
45Guidance on customizing suggestion appearance and leveraging inherited TextArea features.
46
47→ [Full Customization & Features Guide](./references/customization-features.md)
48
49**Key Topics:**
50- Popup vs inline suggestion display modes
51- UserRole and UserPhrases configuration
52- Inherited TextArea features (forms, floating labels, events, methods, styling)
53- Best practices and complete examples
54
55### 3. Custom AI Service Integration
56Detailed procedures for implementing custom AI backends beyond the default providers.
57
58→ [Full Custom AI Integration Guide](https://blazor.syncfusion.com/documentation/smart-textarea/custom-inference-backend)
59
60**Key Topics:**
61- `IChatInferenceService` interface overview
62- Mock AI service examples
63- Integration with Claude, DeepSeek, Groq, Gemini
64- Service registration patterns
65- Testing and troubleshooting custom services
66
67## Quick Start Checklist
68
69```
70□ Ensure Blazor Web App is created with Server Interactivity mode
71□ Install required NuGet packages (SmartComponents, Themes)
72□ Register Syncfusion Blazor service in Program.cs
73□ Register and configure AI service (OpenAI/Azure/Ollama/Custom)
74□ Add stylesheet and script references to App.razor
75□ Add SfSmartTextArea component with UserRole
76□ Test with Ctrl+F5 (Windows) or ⌘+F5 (macOS)
77```
78
79## Key Concepts
80
81| Concept | Reference |
82|---------|-----------|
83| **UserRole** | Defines context for AI autocompletion suggestions |
84| **UserPhrases** | Optional predefined expressions aligned with tone/usage patterns |
85| **ShowSuggestionOnPopup** | Controls display mode: `true` (popup) or `false` (inline, default) |
86| **IChatInferenceService** | Interface for implementing custom AI backends |
87| **ChatParameters** | Standardized input for AI response generation |
88
89## NuGet Packages
90
91**Core Packages:**
92- `Syncfusion.Blazor.SmartComponents` (v33.1.44+)
93- `Syncfusion.Blazor.Themes` (v33.1.44+)
94
95**AI Service Packages (based on provider):**
96- OpenAI: `Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI`
97- Azure OpenAI: `Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI`, `Azure.AI.OpenAI`
98- Ollama: `Microsoft.Extensions.AI`, `OllamaSharp`
syncfusion