From 26efec0b0333d68badcfe7ea1b4c82d501019082 Mon Sep 17 00:00:00 2001 From: Pugazhenthi-Murugan Date: Fri, 12 Jun 2026 12:14:15 +0530 Subject: [PATCH 1/2] Committing Blazor getting started content for web and server was updated. --- .../smart-textarea/getting-started-webapp.md | 370 +++++++++++++----- blazor/smart-textarea/getting-started.md | 365 ++++++++++++----- 2 files changed, 553 insertions(+), 182 deletions(-) diff --git a/blazor/smart-textarea/getting-started-webapp.md b/blazor/smart-textarea/getting-started-webapp.md index 8993d001a0..438687e94a 100644 --- a/blazor/smart-textarea/getting-started-webapp.md +++ b/blazor/smart-textarea/getting-started-webapp.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Syncfusion Smart TextArea in Blazor Web App +title: Getting started Blazor Smart TextArea in Blazor Web App | Syncfusion description: Checkout and learn here all about Getting started with Syncfusion Blazor Smart TextArea component in Blazor Webapp and more. platform: Blazor platform: Blazor @@ -8,114 +8,121 @@ control: Smart TextArea documentation: ug --- -# Getting Started with Smart TextArea +# Getting Started with Blazor Smart TextArea in Blazor Web App -This section briefly explains about how to include [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio code. +This section briefly explains about how to include [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smart-textarea) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). To get start quickly with Blazor Smart TextArea component, you can check on this video. {% youtube "youtube:https://www.youtube.com/watch?v=RjHkC3idOdg" %} +## Create a new Blazor Web App + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Run the following command to create a new Blazor Web App. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) or [Azure OpenAI Account](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. +dotnet new blazor -o BlazorWebApp --interactivity Auto -## Create a new Blazor Web App in Visual Studio +{% endhighlight %} +{% endtabs %} -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App +{% endtabcontent %} -To add **Blazor Smart TextArea** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +{% tabcontent .NET CLI %} -Alternatively, you can utilize the following package manager command to achieve the same. +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazor -o BlazorWebApp --interactivity Auto {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - {% endtabcontent %} -{% tabcontent Visual Studio Code %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) or [Azure OpenAI Account](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) +## Install the required Blazor packages -N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. +Install the [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages.All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. -## Create a new Blazor Web App in Visual Studio Code +{% tabcontents %} -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +{% tabcontent Visual Studio %} -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SmartComponents` and `Syncfusion.Blazor.Themes`) and install them. -For example, in a Blazor Web App with the `Server` interactive render mode, use the following commands. +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Server -cd BlazorWebApp -cd BlazorWebApp.Client +Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - -## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App +{% endtabcontent %} -If you utilize `Server` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the server project. +{% tabcontent Visual Studio Code %} -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +Open the terminal and run the following commands. {% tabs %} - -{% highlight c# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Terminal" %} dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet restore {% endhighlight %} - {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add import namespaces -| Interactive Render Mode | Description | -| -- | -- | -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| - -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace. +After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartComponents @@ -123,23 +130,17 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +## Register the Blazor service + +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} +{% highlight c# tabtitle="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.AddSyncfusionBlazor(); - -var app = builder.Build(); .... {% endhighlight %} @@ -151,25 +152,71 @@ Follow the instructions below to register an AI model in your application. ### OpenAI -For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). +Install the following NuGet packages to your project: -* Install the following NuGet packages to your project: +* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) +* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) -{% tabs %} +You can install these packages using different methods as shown below: -{% highlight c# tabtitle="Package Manager" %} +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `Microsoft.Extensions.AI.OpenAI`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} {% endtabs %} -* To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). + +* To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Web app. + +{% tabs %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -198,26 +245,75 @@ var app = builder.Build(); ### Azure OpenAI -For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you. +Install the following NuGet packages to your project: -* Install the following NuGet packages to your project: +* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) +* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) +* [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI) -{% tabs %} +You can install these packages using different methods as shown below: -{% highlight c# tabtitle="Package Manager" %} +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI` and `Azure.AI.OpenAI`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI Install-Package Azure.AI.OpenAI {% endhighlight %} +{% endtabs %} +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI + +{% endhighlight %} {% endtabs %} -* To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. +{% endtabcontent %} + +{% endtabcontents %} + +For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), 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. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -270,21 +366,62 @@ To use Ollama for running self-hosted models: * Install the following NuGet packages to your project: -{% tabs %} +{% tabcontents %} -{% highlight c# tabtitle="Package Manager" %} +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `OllamaSharp`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package OllamaSharp {% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package OllamaSharp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} +dotnet add package Microsoft.Extensions.AI +dotnet add package OllamaSharp + +{% endhighlight %} {% endtabs %} -* Add the following settings to the **~/Program.cs** file in your Blazor Server app. +{% endtabcontent %} + +{% endtabcontents %} + +* Add the following settings to the **~/Program.cs** file in your Blazor Web app. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -311,28 +448,33 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: - -```html - - .... - - - - - .... - - -``` +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + +... + +... + + +{% endhighlight %} +{% endtabs %} N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor Smart TextArea component +## Add Blazor Smart TextArea component + +Open a Razor file located in the **~/Pages/*.razor** (for example, **Index.razor**) and add the [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smart-textarea) component inside the razor file. -Add the Syncfusion® **Blazor Smart TextArea** component in the **~Pages/Index.razor** file. +N>If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor tabtitle="~/Index.razor" %} +{% highlight razor tabtitle="Index.razor" %} + +@rendermode InteractiveAuto + +@using Syncfusion.Blazor.SmartComponents @@ -358,7 +500,47 @@ Here, **UserRole**: This attribute is `required` to defines the context of the autocompletion based on the role of the person typing. **UserPhrases**: This attribute is optional to provides predefined expressions that align with User/application's tone and frequently used content. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Smart TextArea component in your default web browser. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart TextArea component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} * Type 'To investigate' to experience instant sentence autocompletion. @@ -368,4 +550,4 @@ N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples). ## See also -* [Getting Started with Syncfusion® Blazor Smart TextArea in Blazor Server App](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) +* [Getting Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) diff --git a/blazor/smart-textarea/getting-started.md b/blazor/smart-textarea/getting-started.md index cc6b5d497f..3e27f0e03c 100644 --- a/blazor/smart-textarea/getting-started.md +++ b/blazor/smart-textarea/getting-started.md @@ -1,104 +1,122 @@ --- layout: post -title: Getting Started with Blazor Smart TextArea | Syncfusion +title: Getting Started Blazor Smart TextArea Blazor Server App | Syncfusion description: Checkout and learn here all about Getting started with Syncfusion Blazor Smart TextArea component in Blazor Server App and more. platform: Blazor control: Smart TextArea documentation: ug --- -# Getting Started with Smart TextArea Component +# Getting Started with Blazor Smart TextArea in Blazor Server App -This section briefly explains about how to include [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smart-textarea) component in your Blazor Server App using Visual Studio. +This section briefly explains about how to include [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smart-textarea) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* OpenAI or Azure OpenAI Account +{% endtabcontent %} -N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. +{% tabcontent Visual Studio Code %} -## Create a new Blazor App in Visual Studio +Run the following command to create a new Blazor Server App. -You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App +dotnet new blazor -o BlazorServerApp --interactivity Server + +{% endhighlight %} +{% endtabs %} -To add **Blazor Smart TextArea** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Run the following command to create a new Blazor Server App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazor -o BlazorApp --interactivity Server {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - {% endtabcontent %} -{% tabcontent Visual Studio Code %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* OpenAI or Azure OpenAI Account +## Install the required Blazor packages -N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. +Install the [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages.All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Create a new Blazor App in Visual Studio Code +{% tabcontents %} -You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +{% tabcontent Visual Studio %} -Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SmartComponents` and `Syncfusion.Blazor.Themes`) and install them. -{% tabs %} +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% highlight c# tabtitle="Blazor Server App" %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazorserver -o BlazorApp -cd BlazorApp +Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} - {% endtabs %} -## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App +{% endtabcontent %} -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +{% tabcontent Visual Studio Code %} -{% tabs %} +Open the terminal and run the following commands. -{% highlight c# tabtitle="Package Manager" %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet restore {% endhighlight %} - {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add import namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace. +After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartComponents @@ -106,23 +124,17 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +## Register the Blazor service + +Open the **Program.cs** file in Blazor Server App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} +{% highlight c# tabtitle="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(); .... {% endhighlight %} @@ -134,25 +146,73 @@ Follow the instructions below to register an AI model in your application. ### OpenAI -For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). +### OpenAI -* Install the following NuGet packages to your project: +Install the following NuGet packages to your project: -{% tabs %} +* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) +* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) + +You can install these packages using different methods as shown below: + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `Microsoft.Extensions.AI.OpenAI`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% highlight c# tabtitle="Package Manager" %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} {% endtabs %} +{% endtabcontent %} + +{% endtabcontents %} + +For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). + * To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -181,26 +241,75 @@ var app = builder.Build(); ### Azure OpenAI -For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you. +Install the following NuGet packages to your project: -* Install the following NuGet packages to your project: +* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) +* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) +* [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI) -{% tabs %} +You can install these packages using different methods as shown below: + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI` and `Azure.AI.OpenAI`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% highlight c# tabtitle="Package Manager" %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI Install-Package Azure.AI.OpenAI {% endhighlight %} +{% endtabs %} +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI + +{% endhighlight %} {% endtabs %} +{% endtabcontent %} + +{% endtabcontents %} + +For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), 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 Server app. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -253,21 +362,64 @@ To use Ollama for running self-hosted models: * Install the following NuGet packages to your project: -{% tabs %} +* Install the following NuGet packages to your project: + +{% tabcontents %} + +{% tabcontent Visual Studio %} -{% highlight c# tabtitle="Package Manager" %} +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `OllamaSharp`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package OllamaSharp {% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package OllamaSharp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package OllamaSharp + +{% endhighlight %} {% endtabs %} +{% endtabcontent %} + +{% endtabcontents %} + * Add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -294,32 +446,31 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: - -* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file. - -* For **.NET 10, .NET 9 and .NET 8** Blazor Server app, include it in the **~/Components/App.razor** file. - -```html - - .... - - - - - .... - - -``` +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + +... + +... + + +{% endhighlight %} +{% endtabs %} N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor Smart TextArea component +## Add Blazor Smart TextArea component + +Open a Razor file located in the **~/Pages/*.razor** (for example, **Index.razor**) and add the [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smart-textarea) component inside the razor file. -Add the Syncfusion® **Blazor Smart TextArea** component in the **~/Pages/Index.razor** file. +N>If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor tabtitle="~/Index.razor" %} +{% highlight razor tabtitle="Index.razor" %} + +@rendermode InteractiveServer @using Syncfusion.Blazor.SmartComponents @@ -342,7 +493,45 @@ Add the Syncfusion® **Blazor Smart TextArea {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Smart TextArea component in your default web browser. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart TextArea component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} * Type 'To investigate' to experience instant sentence autocompletion. @@ -352,4 +541,4 @@ N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples). ## See also -* [Getting Started with Syncfusion® Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) +* [Getting Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) From 15515a87f77e43d33307a55c8eb14e8403351f51 Mon Sep 17 00:00:00 2001 From: Pugazhenthi-Murugan Date: Fri, 12 Jun 2026 12:39:16 +0530 Subject: [PATCH 2/2] Remove Server App content --- blazor/smart-textarea/getting-started.md | 365 ++++++----------------- 1 file changed, 88 insertions(+), 277 deletions(-) diff --git a/blazor/smart-textarea/getting-started.md b/blazor/smart-textarea/getting-started.md index 3e27f0e03c..cc6b5d497f 100644 --- a/blazor/smart-textarea/getting-started.md +++ b/blazor/smart-textarea/getting-started.md @@ -1,122 +1,104 @@ --- layout: post -title: Getting Started Blazor Smart TextArea Blazor Server App | Syncfusion +title: Getting Started with Blazor Smart TextArea | Syncfusion description: Checkout and learn here all about Getting started with Syncfusion Blazor Smart TextArea component in Blazor Server App and more. platform: Blazor control: Smart TextArea documentation: ug --- -# Getting Started with Blazor Smart TextArea in Blazor Server App +# Getting Started with Smart TextArea Component -This section briefly explains about how to include [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smart-textarea) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). - -## Create a new Blazor Server App +This section briefly explains about how to include [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smart-textarea) component in your Blazor Server App using Visual Studio. {% tabcontents %} {% tabcontent Visual Studio %} -Create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +## Prerequisites -{% endtabcontent %} +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* OpenAI or Azure OpenAI Account -{% tabcontent Visual Studio Code %} +N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. -Run the following command to create a new Blazor Server App. +## Create a new Blazor App in Visual Studio -{% tabs %} -{% highlight razor tabtitle="Terminal" %} +You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -dotnet new blazor -o BlazorServerApp --interactivity Server - -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App -Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. - -{% endtabcontent %} - -{% tabcontent .NET CLI %} - -Run the following command to create a new Blazor Server App. +To add **Blazor Smart TextArea** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} -{% highlight razor tabtitle="Command Prompt" %} +{% highlight C# tabtitle="Package Manager" %} -dotnet new blazor -o BlazorApp --interactivity Server +Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -{% endtabcontent %} +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. -{% endtabcontents %} +{% endtabcontent %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +{% tabcontent Visual Studio Code %} -## Install the required Blazor packages +## Prerequisites -Install the [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages.All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* OpenAI or Azure OpenAI Account -{% tabcontents %} +N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. -{% tabcontent Visual Studio %} +## Create a new Blazor App in Visual Studio Code -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Syncfusion.Blazor.SmartComponents` and `Syncfusion.Blazor.Themes`) and install them. +You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can install the same packages using the Package Manager Console with the following commands. +Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} -Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} +{% highlight c# tabtitle="Blazor Server App" %} -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet new blazorserver -o BlazorApp +cd BlazorApp {% endhighlight %} -{% endtabs %} -{% endtabcontent %} +{% endtabs %} -{% tabcontent .NET CLI %} +## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App -Open the command prompt and run the following commands. +* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} -{% highlight razor tabtitle="Command Prompt" %} + +{% highlight c# tabtitle="Package Manager" %} dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet restore {% endhighlight %} + {% endtabs %} +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. + {% endtabcontent %} {% endtabcontents %} -## Add import namespaces +## Register Syncfusion® Blazor Service -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespaces. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartComponents @@ -124,17 +106,23 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register the Blazor service - -Open the **Program.cs** file in Blazor Server App and register the Blazor service. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. {% tabs %} -{% highlight c# tabtitle="Program.cs" %} +{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} -.... +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(); .... {% endhighlight %} @@ -146,73 +134,25 @@ Follow the instructions below to register an AI model in your application. ### OpenAI -### OpenAI - -Install the following NuGet packages to your project: - -* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) -* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) - -You can install these packages using different methods as shown below: - -{% tabcontents %} - -{% tabcontent Visual Studio %} - -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `Microsoft.Extensions.AI.OpenAI`) and install them. +For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). -Alternatively, you can install the same packages using the Package Manager Console with the following commands. +* Install the following NuGet packages to your project: {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} + +{% highlight c# tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package Microsoft.Extensions.AI.OpenAI - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} -{% tabcontent .NET CLI %} - -Open the command prompt and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Command Prompt" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package Microsoft.Extensions.AI.OpenAI - -{% endhighlight %} {% endtabs %} -{% endtabcontent %} - -{% endtabcontents %} - -For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). - * To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} -{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -241,75 +181,26 @@ var app = builder.Build(); ### Azure OpenAI -Install the following NuGet packages to your project: - -* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) -* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) -* [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI) - -You can install these packages using different methods as shown below: - -{% tabcontents %} - -{% tabcontent Visual Studio %} - -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI` and `Azure.AI.OpenAI`) and install them. +For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you. -Alternatively, you can install the same packages using the Package Manager Console with the following commands. +* Install the following NuGet packages to your project: {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} + +{% highlight c# tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI Install-Package Azure.AI.OpenAI {% endhighlight %} -{% endtabs %} -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package Microsoft.Extensions.AI.OpenAI -dotnet add package Azure.AI.OpenAI - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent .NET CLI %} - -Open the command prompt and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Command Prompt" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package Microsoft.Extensions.AI.OpenAI -dotnet add package Azure.AI.OpenAI - -{% endhighlight %} {% endtabs %} -{% endtabcontent %} - -{% endtabcontents %} - -For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), 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 Server app. {% tabs %} -{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -362,64 +253,21 @@ To use Ollama for running self-hosted models: * Install the following NuGet packages to your project: -* Install the following NuGet packages to your project: - -{% tabcontents %} - -{% tabcontent Visual Studio %} - -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `OllamaSharp`) and install them. - -Alternatively, you can install the same packages using the Package Manager Console with the following commands. - {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} + +{% highlight c# tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI Install-Package OllamaSharp {% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package OllamaSharp - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent .NET CLI %} -Open the command prompt and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Command Prompt" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package OllamaSharp - -{% endhighlight %} {% endtabs %} -{% endtabcontent %} - -{% endtabcontents %} - * Add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} -{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -446,31 +294,32 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. - -{% tabs %} -{% highlight html tabtitle="App.razor" %} - -... - -... - - -{% endhighlight %} -{% endtabs %} +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file. -## Add Blazor Smart TextArea component +* For **.NET 10, .NET 9 and .NET 8** Blazor Server app, include it in the **~/Components/App.razor** file. -Open a Razor file located in the **~/Pages/*.razor** (for example, **Index.razor**) and add the [Blazor Smart TextArea](https://www.syncfusion.com/blazor-components/blazor-smart-textarea) component inside the razor file. +```html + + .... + + -N>If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. + + .... + + +``` -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -@rendermode InteractiveServer +## Add Syncfusion® Blazor Smart TextArea component + +Add the Syncfusion® **Blazor Smart TextArea** component in the **~/Pages/Index.razor** file. + +{% tabs %} +{% highlight razor tabtitle="~/Index.razor" %} @using Syncfusion.Blazor.SmartComponents @@ -493,45 +342,7 @@ N>If the interactivity location is set to `Per page/component`, define a render {% endhighlight %} {% endtabs %} -**Run the application** - -{% tabcontents %} - -{% tabcontent Visual Studio %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart TextArea component will render in your default web browser. - -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following command. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet run - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent .NET CLI %} - -Open the command prompt and run the following command. - -{% tabs %} -{% highlight razor tabtitle="Command Prompt" %} - -dotnet run - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% endtabcontents %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Smart TextArea component in your default web browser. * Type 'To investigate' to experience instant sentence autocompletion. @@ -541,4 +352,4 @@ N> [View Sample in GitHub](https://github.com/syncfusion/smart-ai-samples). ## See also -* [Getting Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) +* [Getting Started with Syncfusion® Blazor Smart TextArea in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started)