Syncfusion AI Assistant

How can I help you?

Getting Started with Smart Rich Text Editor Component

31 May 202613 minutes to read

This section explains how to add the Syncfusion® Blazor Smart Rich Text Editor component to a Blazor Server App using Visual Studio, Visual Studio Code, and the .NET CLI.

Prerequisites

Create a new Blazor App in Visual Studio

Create a Blazor Server App by using the Blazor Web App template in Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor Server App Getting Started documentation.

Prerequisites

Create a new Blazor App in Visual Studio Code

Create a Blazor Server App using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor Server App Getting Started documentation.

Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`).

dotnet new blazor -o BlazorApp -int Server
cd BlazorApp

Prerequisites

Install the latest version of .NET SDK. If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).

dotnet --version

Create a Blazor Server App using .NET CLI

Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the Blazor Server App Getting Started documentation.

dotnet new blazor -o BlazorApp -int Server
cd BlazorApp

NOTE

Configure the appropriate Interactive render mode and Interactivity location while creating a Blazor Server App. For detailed information, refer to the interactive render mode documentation.

Install Syncfusion® Blazor Smart Rich Text Editor and Themes NuGet in the App

Install the following NuGet packages in your project:

You can install these packages using different methods as shown below:

  1. In Visual Studio Navigate to:

    Tools → NuGet Package Manager → Manage NuGet Packages for Solution

  2. Search for the required packages.
  3. Select the package and click Install.

  1. In Visual Studio Navigate to:

    Tools → NuGet Package Manager → Package Manager Console

  2. Run the following commands:

Install-Package Syncfusion.Blazor.SmartRichTextEditor -Version 33.2.3
Install-Package Syncfusion.Blazor.Themes -Version 33.2.3
  1. Open your project.
  2. Open the terminal:
    • In Visual Studio Code: use the integrated terminal (Ctrl + `)
    • Or use any system terminal for CLI
  3. Run the following commands:
dotnet add package Syncfusion.Blazor.SmartRichTextEditor --version 33.2.3
dotnet add package Syncfusion.Blazor.Themes --version 33.2.3

NOTE

All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.

Register Syncfusion® Blazor Service

Open ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.SmartRichTextEditor namespace.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartRichTextEditor

Now, register the Syncfusion® Blazor Service in the ~/Program.cs file of your Blazor Server App.

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();
....

Configure AI Service

Follow the instructions below to register an AI model in your application.

OpenAI

Install the following NuGet packages to your project:

You can install these packages using different methods as shown below:

  1. In Visual Studio Navigate to:

    Tools → NuGet Package Manager → Manage NuGet Packages for Solution

  2. Search for the required packages.
  3. Select the package and click Install.

  1. In Visual Studio Navigate to:

    Tools → NuGet Package Manager → Package Manager Console

  2. Run the following commands:

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
  1. Open your project.
  2. Open the terminal:
    • In Visual Studio Code: use the integrated terminal (Ctrl + `)
    • Or use any system terminal for CLI
  3. Run the following commands:
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI

  • For OpenAI, obtain an API key from OpenAI and specify the desired model (e.g., gpt-3.5-turbo, gpt-4). Store the API key securely in a configuration file.

  • To configure the AI service, add the following settings to the ~/Program.cs file in your Blazor Web app.

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

var builder = WebApplication.CreateBuilder(args);

....

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "API-KEY";
string openAIModel = "OPENAI_MODEL";
OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(openAIChatClient);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

var app = builder.Build();
....

Azure OpenAI

Install the following NuGet packages to your project:

You can install these packages using different methods as shown below:

  1. In Visual Studio Navigate to:

    Tools → NuGet Package Manager → Manage NuGet Packages for Solution

  2. Search for the required packages.
  3. Select the package and click Install.

  1. In Visual Studio Navigate to:

    Tools → NuGet Package Manager → Package Manager Console

  2. Run the following commands:

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
Install-Package Azure.AI.OpenAI
  1. Open your project.
  2. Open the terminal:
    • In Visual Studio Code: use the integrated terminal (Ctrl + `)
    • Or use any system terminal for CLI
  3. Run the following commands:
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI
dotnet add package Azure.AI.OpenAI

  • For Azure OpenAI, first deploy an Azure OpenAI Service resource and model, then values for azureOpenAIKey, azureOpenAIEndpoint and azureOpenAIModel will all be provided to you.

  • To configure the AI service, add the following settings to the ~/Program.cs file in your Blazor Web app.

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

var builder = WebApplication.CreateBuilder(args);

....

builder.Services.AddSyncfusionBlazor();

string azureOpenAIKey = "AZURE_OPENAI_KEY";
string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
string azureOpenAIModel = "AZURE_OPENAI_MODEL";
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
     new Uri(azureOpenAIEndpoint),
     new ApiKeyCredential(azureOpenAIKey)
);
IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
builder.Services.AddChatClient(azureOpenAIChatClient);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

var app = builder.Build();
....

NOTE

To configure other AI services, refer to the following sections Ollama AI Service and Custom AI Service.

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the ~/Components/App.razor file.

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Syncfusion® Blazor Smart Rich Text Editor component

Add the Syncfusion® Blazor Smart Rich Text Editor component in the ~/Pages/Index.razor file. If an interactivity location as per page/component, define a render mode at the top of the Index.razor page.

NOTE

If an Interactivity Location is set to Global and the Render Mode is set to Server, the render mode is configured in the App.razor file by default.

@rendermode InteractiveServer
@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor>
    <h2>Welcome to Smart Rich Text Editor</h2>
    <p>This editor showcases AI-assisted content enhancement. Try selecting text and utilizing the AI tools to refine your writing.</p>
    <p>Use the <strong>Smart Action</strong> dropdown toolbar to summarize, expand, or adjust the tone. Press <kbd>Alt</kbd>+<kbd>Enter</kbd> to open the AI Query dialog.</p>
    <ul>
       <li><strong>Purpose:</strong> Create clear and concise documentation snippets.</li>
       <li><strong>Tone:</strong> Professional yet approachable.</li>
       <li><strong>Example:</strong> Transform this paragraph into bullet points using AI.</li>
    </ul>
    <AssistViewSettings Placeholder="Start typing or use AI assistance to enhance your content..." />
</SfSmartRichTextEditor>

  • To launch the application, press Ctrl+F5 in Visual Studio, run dotnet run from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Smart Rich Text Editor component in the default web browser.

  • Start typing content and use the AI tools in the toolbar to enhance your editing experience.

  • Use Alt+Enter to open the AI Query dialog for content improvement.

Syncfusion Smart Rich Text Editor - Output

NOTE

View Sample in GitHub.

See also