Merge pull request #6679 from syncfusion-content/983466-SmartPaste-1

kmuthukumarmkm · web-flow · commit 178c4dfcba14 · 2025-09-26T13:37:11.000+05:30
983466: Improved the UG content for Smart PasteButton.
diff --git a/blazor/smart-paste/custom-inference-backend.md b/blazor/smart-paste/custom-inference-backend.md
@@ -1,22 +1,19 @@
 ---
 layout: post
-title: Custom AI Service Integration with Syncfusion Smart Components
-description: Learn how to use IChatInferenceService to integrate custom AI services with Syncfusion Smart Components
+title: Custom AI Service Integration with Syncfusion Smart Paste
+description: Learn how to integrate custom AI services with the Syncfusion Blazor Smart Paste Button using the IChatInferenceService interface for AI-driven form filling.
 platform: Blazor
 control: Smart Paste Button
 documentation: ug
 ---
 
-# Custom AI Service Integration
-
-## Overview
-
-Syncfusion<sup style="font-size:70%">&reg;</sup> Smart Components provide built-in support for OpenAI and Azure OpenAI services. However, you can also integrate other AI services using the `IChatInferenceService` interface, which acts as a bridge between Smart Components and your custom AI service.
+# Custom AI Service Integration with Blazor Smart Paste Button
 
+The Syncfusion Blazor Smart Paste Button leverages AI to parse clipboard content and populate form fields, enhancing user productivity. By default, it supports OpenAI and Azure OpenAI services, but you can integrate custom AI services using the `IChatInferenceService` interface. This interface facilitates communication between the Smart Paste Button and your custom AI provider, enabling precise mapping of clipboard data to form fields.
 
 ## IChatInferenceService Interface
 
-The `IChatInferenceService` interface defines a simple contract for AI service integration:
+The `IChatInferenceService` interface defines a contract for integrating AI services with the Smart Paste Button, enabling the component to process clipboard data for form field mapping.
 
 ```csharp
 public interface IChatInferenceService
@@ -25,10 +22,57 @@ public interface IChatInferenceService
 }
 ```
 
-This interface enables:
-- Consistent communication between components and AI services
-- Easy switching between different AI providers
+The `GenerateResponseAsync` method takes `ChatParameters` (containing clipboard data and form field metadata) and returns a string response from the AI service, which the Smart Paste Button uses to populate form fields.
+
+## Simple Implementation of a Custom AI Service
+
+Below is a sample implementation of a mock AI service named `MockAIService`. This service demonstrates how to implement the `IChatInferenceService` interface by returning sample, context-aware responses. You can replace the logic with your own AI integration.
+
+```csharp
+using Syncfusion.Blazor.AI;
+using System.Threading.Tasks;
+
+public class MockAIService : IChatInferenceService
+{
+    public Task<string> GenerateResponseAsync(ChatParameters options)
+    {
+
+    }
+}
+```
+
+## Registering the Custom AI Service
 
+Register the custom AI service in the **~/Program.cs** file of your Blazor Web App:
+
+```csharp
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Syncfusion.Blazor;
+using Syncfusion.Blazor.AI;
+using Syncfusion.Blazor.SmartComponents;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddRazorPages();
+builder.Services.AddServerSideBlazor();
+builder.Services.AddSyncfusionBlazor();
+builder.Services.AddSyncfusionSmartComponents();
+builder.Services.AddSingleton<IChatInferenceService, MockAIService>();
+
+var app = builder.Build();
+// ...
+```
+
+## Testing the Custom AI Integration
+
+1. Configure the Blazor Web App Server with the Smart Paste Button and custom AI service as described above.
+2. Add the code to **~/Pages/Home.razor** and ensure **Program.cs** includes the service registrations.
+3. Run the application using <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS).
+4. Copy the sample content provided in the Razor file.
+5. Click the **Smart Paste** button to verify that the form fields are populated correctly using the custom AI service.
+
+![Syncfusion Blazor Smart Paste Button with Custom AI](images/smart-paste.gif)
 
 ## Implemented AI Services
 
@@ -41,13 +85,14 @@ Here are examples of AI services integrated using the `IChatInferenceService` in
 | Groq | [Groq Integration](groq-service) |
 | Gemini | [Gemini Integration](gemini-service) |
 
+## Troubleshooting
 
-## Service Registration
-
-Register your custom implementation in `Program.cs`:
+If the custom AI integration does not work as expected, try the following:
+- **Fields Not Populating**: Verify that the custom AI service’s endpoint, model, and API key are correct in `appsettings.json`. Ensure the `GenerateResponseAsync` method returns valid data.
+- **Service Registration Errors**: Confirm that `CustomAIService` and `CustomInferenceService` are registered in **Program.cs** after `AddSyncfusionBlazor`.
+- **AI Parsing Errors**: Check the AI service’s response format and ensure it matches the expected `CustomAIResponse` structure. Test the API independently to verify connectivity.
 
-```csharp
-using Syncfusion.Blazor.AI;
-builder.Services.AddSingleton<IChatInferenceService, YourCustomService>();
-```
+## See Also
 
+- [Getting Started with Syncfusion Blazor Smart Paste Button in Blazor Web App](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp)
+- [Syncfusion Blazor DataForm Documentation](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app)
diff --git a/blazor/smart-paste/getting-started-webapp.md b/blazor/smart-paste/getting-started-webapp.md
@@ -1,15 +1,15 @@
 ---
 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 with step-by-step instructions.
+description: Learn how to integrate the Syncfusion Blazor Smart Paste Button in a Blazor Web App Server with step-by-step instructions.
 platform: Blazor
 control: Smart Paste Button
 documentation: ug
 ---
 
 # Getting Started with Smart Paste Button
 
-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/) 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 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.
 
 To get started quickly with the Blazor Smart Paste Button component, watch this video:
 
@@ -29,7 +29,7 @@ To get started quickly with the Blazor Smart Paste Button component, watch this
 
 N> Syncfusion Blazor Smart Components support both OpenAI and Azure OpenAI and are compatible with Blazor Server Interactivity mode.
 
-## Create a New Blazor Web App in Visual Studio
+## Create a New Blazor Web App Server in Visual Studio
 
 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.
 
@@ -65,12 +65,12 @@ N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.o
 
 N> Syncfusion Blazor Smart Components support both OpenAI and Azure OpenAI and are compatible with Blazor Server Interactivity mode.
 
-## Create a New Blazor Web App in Visual Studio Code
+## Create a New Blazor Web App Server in Visual Studio Code
 
 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:
 
 {% tabs %}
-{% highlight c# tabtitle="Blazor Web App" %}
+{% highlight c# tabtitle="Blazor Web App Server" %}
 
 dotnet new blazor -o BlazorWebApp -int Server
 cd BlazorWebApp
@@ -119,7 +119,7 @@ For Server interactive render mode, open the **~/Components/_Imports.razor** fil
 Register the Syncfusion Blazor service in the **~/Program.cs** file:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor Web App" hl_lines="3 10" %}
+{% highlight C# tabtitle="Blazor Web App Server" hl_lines="3 10" %}
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -166,7 +166,7 @@ For OpenAI, obtain an API key from [OpenAI](https://help.openai.com/en/articles/
 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="Blazor Web App Server" hl_lines="7 8 9 11 12 13" %}
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -204,7 +204,7 @@ For Azure OpenAI, deploy a resource and model as described in [Azure OpenAI docu
 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="Blazor Web App Server" hl_lines="7 8 9 11 12 13" %}
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
diff --git a/blazor/smart-textarea/getting-started-webapp.md b/blazor/smart-textarea/getting-started-webapp.md
@@ -1,15 +1,15 @@
 ---
 layout: post
 title: Blazor Smart TextArea Tutorial | Syncfusion
-description: Learn how to get started with the Syncfusion Blazor Smart TextArea component in a Blazor Web App, including setup and AI configuration.
+description: Learn how to get started with the Syncfusion Blazor Smart TextArea component in a Blazor Web App Server, including setup and AI configuration.
 platform: Blazor
 control: Smart TextArea
 documentation: ug
 ---
 
 # Getting Started with Blazor Smart TextArea
 
-The Syncfusion Blazor Smart TextArea component provides AI-powered autocompletion for context-aware text input, suitable for applications like issue trackers or customer support systems. This section explains how to integrate the component into a Blazor Web App using Visual Studio or Visual Studio Code.
+The Syncfusion Blazor Smart TextArea component provides AI-powered autocompletion for context-aware text input, suitable for applications like issue trackers or customer support systems. This section explains how to integrate the component into a Blazor Web App Server using Visual Studio or Visual Studio Code.
 
 To get started quickly, watch this video tutorial:
 
@@ -29,9 +29,9 @@ To get started quickly, watch this video tutorial:
 
 N> Syncfusion Blazor Smart Components support both OpenAI and Azure OpenAI and are compatible with Blazor Server Interactivity mode.
 
-## Create a New Blazor Web App in Visual Studio
+## Create a New Blazor Web App Server in Visual Studio
 
-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.
+Create a **Blazor Web App Server** 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.
 
 ## Install Syncfusion Blazor SmartComponents and Themes NuGet Packages
 
@@ -65,9 +65,9 @@ N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.o
 
 N> Syncfusion Blazor Smart Components support both OpenAI and Azure OpenAI and are compatible with Blazor Server Interactivity mode.
 
-## Create a New Blazor Web App in Visual Studio Code
+## Create a New Blazor Web App Server in Visual Studio Code
 
-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:
+Create a **Blazor Web App Server** 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:
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App Server" %}
