diff --git a/blazor/smart-paste/getting-started-webapp.md b/blazor/smart-paste/getting-started-webapp.md index 0821bd5b69..ceda65c6f8 100644 --- a/blazor/smart-paste/getting-started-webapp.md +++ b/blazor/smart-paste/getting-started-webapp.md @@ -1,114 +1,127 @@ --- layout: post -title: Get Started with Blazor Smart Paste Button | Syncfusion -description: Learn how to integrate the Syncfusion Blazor Smart Paste Button in a Blazor Web App Server with step-by-step instructions. +title: Getting Started Blazor Smart Paste Button Blazor Web App | Syncfusion +description: Learn how to integrate the Syncfusion Blazor Smart Paste Button in a Blazor Web App with step-by-step instructions. platform: Blazor control: Smart Paste Button documentation: ug --- -# Getting Started with Smart Paste Button +# Getting Started with Smart Paste Button in Blazor Web App -This section explains how to integrate the [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in a Blazor Web App Server using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The Smart Paste Button leverages AI to intelligently populate form fields from copied text, streamlining user input workflows. +This section explains how to integrate the [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in a 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/). The Smart Paste Button leverages AI to intelligently populate form fields from copied text, streamlining user input workflows. To get started quickly with the Blazor Smart Paste Button component, watch this video: {% youtube "youtube:https://www.youtube.com/watch?v=Q97iTZcZHB0" %} +## 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. -- .NET SDK 8.0 or later -- Visual Studio 2022 (version 17.0 or later) -- OpenAI or Azure OpenAI account -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -N> Syncfusion Blazor Smart Components support both OpenAI and Azure OpenAI and are compatible with Blazor Server Interactivity mode. +{% tabcontent Visual Studio Code %} -## Create a New Blazor Web App Server in Visual Studio +Run the following command to create a new Blazor Web App. -Create a **Blazor Web App** using Visual Studio 2022 with [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). Configure the app with the Server interactive render mode. +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -## Install Syncfusion Blazor SmartComponents and Themes NuGet Packages +dotnet new blazor -o BlazorWebApp --interactivity Auto -To add the **Blazor Smart Paste Button** component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for, and install the following packages: -- [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) -- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) +{% endhighlight %} +{% endtabs %} -Alternatively, use the Package Manager Console: +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. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +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 on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for a complete list of available packages and 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). -- .NET SDK 8.0 or later -- Visual Studio Code (version 1.60 or later) -- OpenAI or Azure OpenAI account -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +## Install the required Blazor packages -N> Syncfusion Blazor Smart Components support both OpenAI and Azure OpenAI and are compatible with Blazor Server Interactivity mode. +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 Server in Visual Studio Code +{% tabcontents %} -Create a **Blazor Web App** using Visual Studio Code with [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). Configure the app with the Server interactive render mode using the following commands: +{% tabcontent Visual Studio %} + +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. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App Server" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Server -cd BlazorWebApp -dotnet restore +Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> For details on creating a Blazor Web App with various interactive render modes, refer to [Blazor Web App Render Modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +{% endtabcontent %} -## Install Syncfusion Blazor SmartComponents and Themes NuGet Packages +{% tabcontent Visual Studio Code %} -1. Open the integrated terminal in Visual Studio Code (Ctrl+`). -2. Ensure you are in the project root directory where the `.csproj` file is located. -3. Run the following commands to install the required NuGet packages for the Server render mode: +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 on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for a complete list of available packages and 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 -For Server interactive render mode, open the **~/Components/_Imports.razor** file and add the following namespaces: +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="~/Components/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartComponents @@ -116,23 +129,17 @@ For Server interactive render mode, open the **~/Components/_Imports.razor** fil {% endhighlight %} {% endtabs %} -Register the Syncfusion Blazor service in the **~/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 Web App Server" 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 %} @@ -142,31 +149,73 @@ var app = builder.Build(); The Smart Paste Button requires an AI service (OpenAI, Azure OpenAI, or Ollama) to analyze and map copied text to form fields. Follow the instructions below to configure an AI model in your application. -### Install AI Service NuGet Packages +### OpenAI Configuration + +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. -Install the following NuGet packages based on your chosen AI provider: +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI -@* For Azure OpenAI only *@ -Install-Package Azure.AI.OpenAI -@* For Ollama only *@ -Install-Package OllamaSharp {% endhighlight %} {% endtabs %} -### OpenAI Configuration +{% 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, obtain an API key from [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) and specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`). Store the API key securely in a configuration file or environment variable. Add the following to the **~/Program.cs** file: {% tabs %} -{% highlight C# tabtitle="Blazor Web App Server" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -198,12 +247,75 @@ var app = builder.Build(); ### Azure OpenAI Configuration +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. + +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 %} + +{% endtabcontent %} + +{% endtabcontents %} + For Azure OpenAI, deploy a resource and model as described in [Azure OpenAI documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain the API key, endpoint, and model name from your Azure portal. Add the following to the **~/Program.cs** file: {% tabs %} -{% highlight C# tabtitle="Blazor Web App Server" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -248,10 +360,64 @@ To use Ollama for self-hosted models: 2. Install a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). 3. Configure the endpoint URL (e.g., `http://localhost:11434`) and model name. +* 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" %} + +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 to the **~/Program.cs** file: {% tabs %} -{% highlight C# tabtitle="Blazor Web App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -279,30 +445,33 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Add Stylesheet and Script Resources - -Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add 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 - - .... - - +## 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 %} > **Note**: Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for 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)) to reference themes in your Blazor application. Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references. -## Add Syncfusion® Blazor Smart Paste Button Component +## Add Blazor Smart Paste Button Component + +Open a Razor file located in the **~/Pages/*.razor** (for example, **Index.razor**) and add the [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component inside the razor file. This example uses the [Syncfusion® Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) component to manage form input fields. Install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) package. -Add the Syncfusion® **Blazor Smart Paste Button** component with form components in the **~Pages/Index.razor** file. This example uses the [Syncfusion® Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) component to manage form input fields. Install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) package. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, 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.DataForm @using System.ComponentModel.DataAnnotations @@ -357,8 +526,49 @@ Add the Syncfusion® **Blazor Smart Paste Button** component with form component {% endhighlight %} {% endtabs %} -1. Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application, rendering the Syncfusion® Blazor Smart Paste Button component in your default web browser. -2. Copy the `Sample Content` and click the `Smart Paste` button to see the form fields automatically populated. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart Paste Button 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 %} + +Copy the `Sample Content` and click the `Smart Paste` button to see the form fields automatically populated. ![Syncfusion Smart Paste Button filling a form in a Blazor Web App](images/smart-paste.webp)