Skip to content

docs(SmartPasteButton): add smartpaste button docs #3486

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xristianstefanov merged 3 commits into from
Feb 10, 2026
Merged

docs(SmartPasteButton): add smartpaste button docs #3486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b3a7432
docs(SmartPasteButton): add smartpaste button docs
xristianstefanov Feb 5, 2026
f940d94
chore(SmartPasteButton): polish change api endpoint and fix image
xristianstefanov Feb 9, 2026
fe17e54
chore(SmartPasteButton): apply changes as per comments
xristianstefanov Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions components/smartpastebutton/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
---
title: Events
page_title: SmartPasteButton - Events
description: Events of the SmartPasteButton for Blazor.
slug: smartpastebutton-events
tags: telerik, blazor, smartpastebutton, events, ai
published: True
position: 20
components: ["smartpastebutton"]
---

# SmartPasteButton Events

This article describes the events available in the Telerik SmartPasteButton for Blazor:

* [OnRequestStart](#onrequeststart)
* [OnRequestStop](#onrequeststop)

## OnRequestStart

The `OnRequestStart` event fires before sending the Smart Paste request to the AI service. This event allows you to inspect and modify the content and form fields that will be processed by AI.

The event handler receives an argument of type [`SmartPasteButtonRequestStartEventArgs`](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.SmartPasteButtonRequestStartEventArgs).

>caption Handle the OnRequestStart event to customize AI processing

````Razor
@using System.Net.Http.Json
@using Telerik.AI.SmartComponents.Extensions
@inject HttpClient HttpClient
@inject IJSRuntime JS

<div style="display: flex; max-width: 600px; margin-bottom: 16px;">
<div style="flex: 1; margin-right: 16px;">
<p><strong>Sample Book Data (copy this and click Smart Paste):</strong></p>
<TelerikTextArea Value="@SampleText" Rows="3" ReadOnly="true" />
<TelerikButton OnClick="@CopySampleText" Icon="SvgIcon.Copy">Copy</TelerikButton>
</div>

<TelerikForm Model="@Model" OnSubmit="@HandleSubmit">
<FormItems>
<FormItem Field="@nameof(BookModel.Title)" LabelText="Title" />
<FormItem Field="@nameof(BookModel.Author)" LabelText="Author" />
<FormItem Field="@nameof(BookModel.ISBN)" LabelText="ISBN" />
<FormItem Field="@nameof(BookModel.Publisher)" LabelText="Publisher" />
</FormItems>

<FormButtons>
<TelerikSmartPasteButton @ref="@SmartPasteButtonRef"
EnableChatClient="false"
Enabled="@(!Pasting)"
OnRequestStart="@HandleRequestStart">
Smart Paste
</TelerikSmartPasteButton>
</FormButtons>
</TelerikForm>
</div>

@code {
private TelerikSmartPasteButton? SmartPasteButtonRef { get; set; }
private BookModel Model { get; set; } = new();
private bool Pasting { get; set; }

private string SampleText =
@"The Great Gatsby
F. Scott Fitzgerald
978-0743273565
Scribner";

private async Task CopySampleText()
{
await JS.InvokeVoidAsync("navigator.clipboard.writeText", SampleText);
}

private void HandleSubmit()
{
Console.WriteLine(System.Text.Json.JsonSerializer.Serialize(Model));
}

private async Task HandleRequestStart(SmartPasteButtonRequestStartEventArgs args)
{
Pasting = true;

var payload = new
{
content = args.Content,
formFields = args.FormFields?.Select(f => new
{
field = f.Field,
description = f.Description,
type = f.Type,
allowedValues = f.AllowedValues
})
};

var response = await HttpClient.PostAsJsonAsync(
"https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste",
payload
);

response.EnsureSuccessStatusCode();

var smartPasteResponse = await response.Content.ReadFromJsonAsync<SmartPasteResponse>();

if (smartPasteResponse?.FieldValues?.Count > 0)
{
await SmartPasteButtonRef.PasteAsync(smartPasteResponse);
}
Pasting = false;
}

public class BookModel
{
public string Title { get; set; } = string.Empty;
public string Author { get; set; } = string.Empty;
public string ISBN { get; set; } = string.Empty;
public string Publisher { get; set; } = string.Empty;
}
}
````

## OnRequestStop

The `OnRequestStop` event fires when the `IChatClient` is enabled and the stop state of the button is triggered. This event is only fired when `EnableChatClient` is set to `true`.

This event allows you to handle scenarios where the AI processing needs to be interrupted or when the user cancels the operation.

>caption Handle the OnRequestStop event to customize AI processing

<div class="skip-repl"></div>

````RAZOR Home.razor
<TelerikSmartPasteButton ChatClientKey="gpt-4o-mini"
OnRequestStop="@HandleRequestStop" />

@code {
private async Task HandleRequestStop()
{
//handle the event when the user clicks the stop button
}
}
````
````C# Program.cs
IChatClient gptChatClient = new AzureOpenAIClient(new Uri("https://blazor-models-ai-foundry.cognitiveservices.azure.com/"),
new AzureKeyCredential("your API key here")).GetChatClient("gpt-4.1");

services.AddKeyedChatClient("gpt-4.1", gptChatClient);
````

## See Also

* [SmartPasteButton Live Events Demo](https://demos.telerik.com/blazor-ui/smartpastebutton/events)
* [SmartPasteButton Overview](slug:smartpastebutton-overview)
* [SmartPasteButton Validation](slug:smartpastebutton-validation)
214 changes: 214 additions & 0 deletions components/smartpastebutton/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
---
title: Overview
page_title: SmartPasteButton Overview
description: The Blazor SmartPasteButton is an AI-powered utility that parses unstructured text data and uses the result to populate form fields automatically.
slug: smartpastebutton-overview
tags: telerik, blazor, smartpastebutton, ai, form
published: True
position: 0
components: ["smartpastebutton"]
---

# Blazor SmartPasteButton Overview

The <a href="https://www.telerik.com/blazor-ui/smartpastebutton" target="_blank">UI for Blazor SmartPasteButton component</a> is an AI-powered utility designed to parse unstructured text data and use the result to populate form fields. It eliminates the "copy-paste-repeat" manual grind by using large language models to map raw text to specific data inputs.

The SmartPasteButton integrates seamlessly with the [Telerik Form](slug:form-overview), Blazor EditForm, and native HTML forms.

## Creating Blazor SmartPasteButton

### Configuration without IChatClient

1. Use the `<TelerikSmartPasteButton>` tag to add the component to your razor page.

2. Handle the `OnRequestStart` event to specify the AI endpoint that processes clipboard content. The SmartPasteButton automatically sends the clipboard text and detected form field metadata to this endpoint.

4. Set the `EnableChatClient` to `false`. By default, the component tries to get a registered `IChatClient` service and use it to make the request.

5. (optional) Add the `DataSmartPasteDescriptionAttribute` to your input components to provide context for the AI.

>caption Example of using the SmartPasteButton without IChatClient service

````Razor
@using System.Net.Http.Json
@using Telerik.AI.SmartComponents.Extensions
@inject HttpClient HttpClient
@inject IJSRuntime JS

<div style="max-width: 600px; margin-bottom: 16px;">
<p><strong>Sample text (copy this and click Smart Paste):</strong></p>

<TelerikTextArea Value="@SampleText" Rows="3" ReadOnly="true" />

<div style="margin-top: 8px;">
<TelerikButton OnClick="@CopySampleText" Icon="SvgIcon.Copy">
Copy
</TelerikButton>
</div>
</div>

<TelerikForm Model="@Model" OnSubmit="@HandleSubmit">
<FormItems>
<FormItem Field="@nameof(ContactModel.FirstName)" LabelText="First Name" />

<FormItem Field="@nameof(ContactModel.LastName)" LabelText="Last Name" />

<FormItem Field="@nameof(ContactModel.Email)" LabelText="Email" />

<FormItem Field="@nameof(ContactModel.Phone)" LabelText="Phone" />
</FormItems>

<FormButtons>
<TelerikSmartPasteButton @ref="@SmartPasteButtonRef"
EnableChatClient="false"
Enabled="@(!Pasting)"
OnRequestStart="@HandleRequestStart">
Smart Paste
</TelerikSmartPasteButton>
</FormButtons>
</TelerikForm>


@code {
private TelerikSmartPasteButton? SmartPasteButtonRef { get; set; }
private ContactModel Model { get; set; } = new();
private bool Pasting { get; set; }

private string SampleText =
@"John Doe
john.doe@example.com
+1 555 123 4567";

private async Task CopySampleText()
{
await JS.InvokeVoidAsync("navigator.clipboard.writeText", SampleText);
}

private void HandleSubmit()
{
Console.WriteLine(System.Text.Json.JsonSerializer.Serialize(Model));
}

private async Task HandleRequestStart(SmartPasteButtonRequestStartEventArgs args)
{
Pasting = true;
var payload = new
{
content = args.Content,
formFields = args.FormFields?.Select(f => new
{
field = f.Field,
description = f.Description,
type = f.Type,
allowedValues = f.AllowedValues
})
};

var response = await HttpClient.PostAsJsonAsync(
"https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste",
payload
);

response.EnsureSuccessStatusCode();

var smartPasteResponse =
await response.Content.ReadFromJsonAsync<SmartPasteResponse>();

if (smartPasteResponse?.FieldValues?.Count > 0)
{
await SmartPasteButtonRef.PasteAsync(smartPasteResponse);
}
Pasting = false;
}

public class ContactModel
{
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public string Email { get; set; } = string.Empty;
public string Phone { get; set; } = string.Empty;
}
}
````

### Configuration with IChatClient

1. Use the `<TelerikSmartPasteButton>` tag to add the component to your razor page.

2. Set the `ChatClientKey` to specify the key of the registered `IChatClient` service to be used by the SmartPasteButton. The `EnableChatClient` parameter needs to be `true`, which is its default value.

3. Register your `IChatClient`:

<div class="skip-repl"></div>

````C# Program.cs
IChatClient gptChatClient = new AzureOpenAIClient(new Uri("https://blazor-models-ai-foundry.cognitiveservices.azure.com/"),
new AzureKeyCredential("your API key here")).GetChatClient("gpt-4.1");

services.AddKeyedChatClient("gpt-4.1", gptChatClient);
````
````RAZOR Home.razor
<TelerikSmartPasteButton ChatClientKey="gpt-4.1" />
````

## Form Field Support

The SmartPasteButton works with both native HTML form fields and Telerik input components. The following Telerik components are supported:

* AutoComplete
* ComboBox
* DatePicker
* DateTimePicker
* DropDownList
* FormItem
* MaskedTextBox
* MultiColumnComboBox
* MultiSelect
* NumericTextBox
* Rating
* Switch
* TextBox
* TimePicker

## Validation

The SmartPasteButton allows you to validate the input content and handle cancellation scenarios. [Read more about the SmartPasteButton validation...](slug:smartpastebutton-validation).

## Events

The SmartPasteButton fires events that you can handle to customize the AI processing workflow. [Read more about the SmartPasteButton events...](slug:smartpastebutton-events).

## SmartPasteButton API

To review all available parameters, methods, and events of the SmartPasteButton component, see the [SmartPasteButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSmartPasteButton#parameters).

## SmartPasteButton Reference and Methods

The SmartPasteButton component exposes several public methods that you can call from your code. For a full list and details, see the [SmartPasteButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSmartPasteButton#methods).

>caption Example of Calling a Method by Reference

````RAZOR.skip-repl
<TelerikSmartPasteButton @ref="@SmartPasteButtonRef" />

@code {
private TelerikSmartPasteButton? SmartPasteButtonRef { get; set; }

private async Task StartPasting()
{
var smartPasteResponse =
await response.Content.ReadFromJsonAsync<SmartPasteResponse>();

if (smartPasteResponse?.FieldValues?.Count > 0)
{
await SmartPasteButtonRef.PasteAsync(smartPasteResponse);
}
}
}
````

## See Also

* [SmartPasteButton Live Demo](https://demos.telerik.com/blazor-ui/smartpastebutton/overview)
* [SmartPasteButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSmartPasteButton)
* [SmartPasteButton Events](slug:smartpastebutton-events)
Loading