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

Do NOT use for:

• General Blazor project setup → use syncfusion-blazor-common
• Smart Paste Button (clipboard-to-form filling) → use syncfusion-blazor-smart-paste

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

Common Tasks

Task: Set up OpenAI integration

See: Getting Started Guide → OpenAI Configuration

Task: Change suggestion display to popup mode

See: Customization Guide → Popup-Based Suggestions

Task: Implement a custom Claude AI service

See: Custom AI Integration → Claude Integration

Task: Debug "No Suggestions Displayed" issue

See: Custom AI Integration → Troubleshooting

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