syncfusion-blazor-smart-textarea

Original：🇺🇸 English
Translated

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.

11installs
Sourcesyncfusion/blazor-ui-components-skills
Added on

NPX Install

npx skill4agent add syncfusion/blazor-ui-components-skills syncfusion-blazor-smart-textarea

Tags

Translated version includes tags in frontmatter
blazor-smart-textareaai-autocompletionsyncfusion-integrationopenai-integrationcustom-ai-backend

SKILL.md Content

View Translation Comparison →

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

ConceptReference
UserRoleDefines context for AI autocompletion suggestions
UserPhrasesOptional predefined expressions aligned with tone/usage patterns
ShowSuggestionOnPopupControls display mode: 
true
(popup) or 
false
(inline, default)
IChatInferenceServiceInterface for implementing custom AI backends
ChatParametersStandardized 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