Syncfusion Blazor Smart Textarea

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

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

Syncfusion Blazor Smart TextArea - Customization & Features

Overview

This guide covers customization options for the Smart TextArea component and inherited features from the base TextArea component.

Customizing Suggestion Display

The Smart TextArea provides flexibility in how suggestions are displayed to users through the ShowSuggestionOnPopup attribute.

Popup-Based Suggestions

When ShowSuggestionOnPopup is set to true, suggestions are displayed in a popup window.

Example:

@using Syncfusion.Blazor.SmartComponents

<SfSmartTextArea UserRole="@userRole" 
                Placeholder="Enter your queries here" 
                @bind-Value="prompt" 
                Width="75%" 
                RowCount="5" 
                ShowSuggestionOnPopup="true">
</SfSmartTextArea>

@code {
    private string? prompt;
    public string userRole = "Maintainer of an open-source project replying to GitHub issues";
}

Benefits:

• Clean interface with suggestions in a separate popup window
• Reduced visual clutter in the text input area
• Better control over suggestion display timing

Inline Suggestions

When ShowSuggestionOnPopup is set to false, suggestions are displayed inline within the text area.

Example:

@using Syncfusion.Blazor.SmartComponents

<SfSmartTextArea UserRole="@userRole" 
                Placeholder="Enter your queries here" 
                @bind-Value="prompt" 
                Width="75%" 
                RowCount="5" 
                ShowSuggestionOnPopup="false">
</SfSmartTextArea>

@code {
    private string? prompt;
    public string userRole = "Maintainer of an open-source project replying to GitHub issues";
}

Benefits:

• Real-time suggestions as you type
• Natural text flow with suggestions appearing inline
• Easier one-handed interaction

Default Behavior

By default, ShowSuggestionOnPopup is set to false (inline suggestions).

Inherited Features from TextArea

The Syncfusion Blazor Smart TextArea component fully inherits all properties, features, and styling options from the Syncfusion Blazor TextArea component. This means you can leverage all existing TextArea features while benefiting from the enhanced AI-powered functionality of the Smart TextArea.

Available Inherited Features

1. Form Support

• Integrate the Smart TextArea seamlessly with HTML forms
• Support for form submissions and data binding
• Validation integration with form frameworks
• Reference: Syncfusion Blazor Textarea Form Support Documentation

2. Floating Labels

• Display floating labels that move up when the textarea is focused or contains text
• Improves UI/UX with a modern, clean design
• Reduces the visual footprint of labels
• Reference: Syncfusion Blazor Textarea Floating Labels Documentation

3. Events

• Access to comprehensive event system for user interactions
• Events like OnChange, OnFocus, OnBlur, and more
• Enable custom logic based on user interactions
• Reference: Syncfusion Blazor Textarea Events Documentation

4. Methods

• Invoke methods programmatically to control the textarea
• Methods for focus management, value manipulation, and validation
• Enable dynamic behavior and user interactions
• Reference: Syncfusion Blazor Textarea Methods Documentation

5. Style and Appearance

• Comprehensive styling options to match your application design
• CSS classes and inline styling support
• Theme customization and appearance control
• Reference: Syncfusion Blazor Textarea Styles and Appearance Documentation

Key Attributes

Complete Example with Customization

@using Syncfusion.Blazor.SmartComponents

<div class="container">
    <h2>GitHub Issue Response Assistant</h2>
    
    <div class="textarea-wrapper">
        <SfSmartTextArea UserRole="@userRole" 
                        UserPhrases="@userPhrases" 
                        Placeholder="Type your response here..." 
                        @bind-Value="response" 
                        Width="100%" 
                        RowCount="8"
                        ShowSuggestionOnPopup="true">
        </SfSmartTextArea>
    </div>
    
    <div class="action-buttons">
        <button @onclick="SendResponse">Send Response</button>
        <button @onclick="ClearText">Clear</button>
    </div>
</div>

@code {
    private string? response;
    
    public string userRole = "Maintainer of an open-source project replying to GitHub issues";
    
    public string[] userPhrases = 
    [
        "Thank you for contacting us.",
        "To investigate, we will need a reproducible example as a public Git repository.",
        "Could you please post a screenshot of the issue?",
        "This sounds like a usage question rather than a bug report.",
        "We do not accept ZIP files as reproducible examples.",
        "Bug report: Error occurred in the following version",
        "Please provide detailed steps to reproduce the issue.",
        "Have you tried the latest version?"
    ];
    
    private void SendResponse()
    {
        // Handle response submission
        Console.WriteLine($"Response sent: {response}");
    }
    
    private void ClearText()
    {
        response = string.Empty;
    }
}

Best Practices

1. Choose Display Mode Wisely

• Use popup mode for large forms where inline suggestions might crowd the input
• Use inline mode for dedicated single-field inputs

2. Optimize UserPhrases

• Keep phrases concise and relevant
• Update phrases based on actual patterns in your use case
• Limit to 10-20 most common phrases for best UX

3. Leverage Inherited Features

• Combine with form validation for better data quality
• Use floating labels for a modern UI appearance
• Implement event handlers for contextual behavior

4. Accessibility

• Use appropriate ARIA labels with the textarea
• Ensure sufficient contrast for text and suggestions
• Test with screen readers

Syncfusion Blazor Smart TextArea - Getting Started

Overview

This guide explains how to create and configure a Blazor Web App with the Syncfusion Blazor Smart TextArea component, including AI service setup.

Prerequisites

• System requirements for Blazor components
• OpenAI or Azure OpenAI Account
• OpenAI API Key
• Azure OpenAI Account Setup

Note: Syncfusion Blazor Smart Components are compatible with both OpenAI and Azure OpenAI, and fully support Server Interactivity mode apps.

Create a New Blazor Web App

You can create a Blazor Web App using:

• Visual Studio 2022 via Microsoft Templates
• Syncfusion Blazor Extension - Template Studio

Install NuGet Packages

Using NuGet Package Manager

In Visual Studio: Tools → NuGet Package Manager → Manage NuGet Packages for Solution

Search and install:

• Syncfusion.Blazor.SmartComponents
• Syncfusion.Blazor.Themes

Using Package Manager Console

Install-Package Syncfusion.Blazor.SmartComponents -Version 33.1.44
Install-Package Syncfusion.Blazor.Themes -Version 33.1.44

For available NuGet packages list, refer to Syncfusion NuGet packages

Register Syncfusion Blazor Service

For Server-Side Blazor

Open ~/_Imports.razor (located in the Components folder) and add:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartComponents

In ~/Program.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
// ... rest of configuration

Configure AI Service

OpenAI Configuration

Install Required NuGet Packages

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI

Update Program.cs

using Syncfusion.Blazor.SmartComponents;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();

// Load secrets from environment or configuration. Never hardcode API keys in source.
string openAIApiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");
string openAIModel = Environment.GetEnvironmentVariable("OPENAI_MODEL") ?? "gpt-3.5-turbo";  // e.g., gpt-3.5-turbo, gpt-4

OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(openAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
// ... rest of configuration

Azure OpenAI Configuration

Prerequisites

First, deploy an Azure OpenAI Service resource and model

Install Required NuGet Packages

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
Install-Package Azure.AI.OpenAI

Update Program.cs

using Syncfusion.Blazor.SmartComponents;
using Syncfusion.Blazor.AI;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using System.ClientModel;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();

// Load Azure OpenAI configuration from environment or configuration
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_KEY");
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIModel = Environment.GetEnvironmentVariable("AZURE_OPENAI_MODEL") ?? "gpt-35-turbo";

AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
    new Uri(azureOpenAIEndpoint),
    new ApiKeyCredential(azureOpenAIKey)
);

IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
builder.Services.AddChatClient(azureOpenAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
// ... rest of configuration

Note: From version 28.2.33 to 30.2.6, the Azure.AI.OpenAI package was removed from SmartComponents dependency. Install Azure.AI.OpenAI package separately if needed.

Ollama Configuration (Self-Hosted Models)

Setup Steps

1. Install Ollama - Download from Ollama's official website 2. Install a Model - Browse and install from Ollama Library (e.g., llama2:13b, mistral:7b) 3. Configure Application - Provide the endpoint URL and model name

Install Required NuGet Packages

Install-Package Microsoft.Extensions.AI
Install-Package OllamaSharp

Update Program.cs

using Syncfusion.Blazor.SmartComponents;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OllamaSharp;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();

string ModelName = Environment.GetEnvironmentVariable("OLLAMA_MODEL") ?? "MODEL_NAME";  // e.g., llama2:13b
string ollamaEndpoint = Environment.GetEnvironmentVariable("OLLAMA_ENDPOINT") ?? "http://localhost:11434";
// `http://localhost` is for development only. For production, use HTTPS or a server-side proxy to avoid exposing endpoints.
IChatClient chatClient = new OllamaApiClient(ollamaEndpoint, ModelName);
builder.Services.AddChatClient(chatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
// ... rest of configuration

Add Stylesheet and Script Resources

Include the theme stylesheet and script in the ~/Components/App.razor file:

<head>
    <!-- ... other head content ... -->
    <link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
</head>

<body>
    <!-- ... body content ... -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

For more theme options and methods of referencing themes, see Blazor Themes documentation.

>

For different approaches to add script references, see Adding Script Reference documentation.

Add Smart TextArea Component

Create or update the ~/Pages/Index.razor file:

<SfSmartTextArea UserRole="@userRole" 
                UserPhrases="@userPhrases" 
                Placeholder="Enter your queries here" 
                @bind-Value="prompt" 
                Width="75%" 
                RowCount="5">
</SfSmartTextArea>

@code {
    private string? prompt;
    
    public string userRole = "Maintainer of an open-source project replying to GitHub issues";
    
    public string[] userPhrases = 
    [
        "Thank you for contacting us.",
        "To investigate, We will need a reproducible example as a public Git repository.",
        "Could you please post a screenshot of NEED_INFO?",
        "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals.",
        "We do not accept ZIP files as reproducible examples.",
        "Bug report: File not found error occurred in NEED_INFO"
    ];
}

Component Attributes

• UserRole (Required): Defines the context of autocompletion based on the role of the person typing
• UserPhrases (Optional): Provides predefined expressions that align with the user/application's tone and frequently used content
• Placeholder: Text displayed when the input is empty
• @bind-Value: Two-way binding for the textarea value
• Width & RowCount: Styling properties