syncfusion-blazor-smart-textarea
About syncfusion-blazor-smart-textarea
A guide for Blazor developers adding Syncfusion’s AI-assisted text input component to a Blazor Web App. It covers inline or popup suggestions and configuration for built-in or custom AI services.
Key features
- 01Configure SfSmartTextArea
- 02Show inline or popup suggestions
- 03Set UserRole and UserPhrases
- 04Connect OpenAI, Azure OpenAI, or Ollama
- 05Implement a custom AI backend
Use cases
- 01Add AI text completion to a Blazor app
- 02Tune suggestions with context and phrases
- 03Connect a custom AI service to the component
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/syncfusion-blazor-smart-textareain Claude Code to confirm it loaded.
Bundled filesreferences/customization-features.mdreferences/getting-started.md
Details
From the project READMESyncfusion 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
SfSmartTextAreato 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
UserRoleandUserPhrasescontext - 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.
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:
IChatInferenceServiceinterface 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