SmartPasteButton Configuration
The SmartPasteButton automatically detects form fields and uses AI to extract values from clipboard content. When users click the button, the component reads the clipboard, sends the content to your AI service, and populates form fields with the extracted data.
The component integrates seamlessly with Angular forms by automatically detecting form controls within the same form context. Configure only the AI service endpoint through the requestUrl input.
The demos in this article use a Telerik-hosted AI service for demonstration purposes only. For production applications, you must implement your own AI service that understands your specific domain, data, and business requirements.
The following example demonstrates the SmartPasteButton with AI service configuration and automatic form field detection.
AI Service Configuration
The requestUrl input specifies the AI endpoint that processes clipboard content. The SmartPasteButton automatically sends the clipboard text and the detected form field metadata to this endpoint.
<button
kendoSmartPasteButton
[requestUrl]="aiUrl">
Smart Paste
</button>Use the requestOptions input to customize the HTTP request:
public requestOpts: SmartPasteAIRequestOptions = {
headers: new HttpHeaders({
'Authorization': 'Bearer YOUR_API_KEY',
'Content-Type': 'application/json'
}),
method: 'POST',
withCredentials: true
};Backend Implementation
The AI service endpoint receives clipboard content and form field metadata from the SmartPasteButton. You can implement this endpoint in any backend technology that supports HTTP requests and AI service integration.
For .NET applications, the Telerik.AI.SmartComponents.Extensions library provides helper types and methods to streamline request processing.
SmartPasteRequest—Represents the incoming request with clipboard content and form field metadata.GetChatMessages()—Converts the request into chat messages for the AI service.ExtractSmartPasteResponse()—Extracts the structured response from the AI chat completion.SmartPasteResponse—Contains the extracted field values to be sent back to the client.
The following example demonstrates a .NET Core controller implementation using Microsoft.Extensions.AI and the Telerik Smart Components extensions, which powers the SmartPasteButton demos throughout Smart Paste documentation.
using Microsoft.Extensions.AI;
using Microsoft.AspNetCore.Mvc;
using Telerik.AI.SmartComponents.Extensions;
namespace TestService.Controllers
{
[ApiController]
[Route("[controller]/[action]")]
public class SmartPasteController(IChatClient chatClient) : Controller
{
private readonly IChatClient _chatClient = chatClient;
[HttpPost]
[Route("/smartpaste/smartpaste")]
public async Task<IActionResult> SmartPaste([FromBody] SmartPasteRequest request)
{
if (_chatClient == null)
{
return StatusCode(500, "Chat service is not available.");
}
List<ChatMessage> conversationMessages = request.GetChatMessages();
ChatResponse completion = await _chatClient.GetResponseAsync(conversationMessages, new ChatOptions());
SmartPasteResponse response = completion.ExtractSmartPasteResponse();
return Json(response);
}
}
}Automatic Form Detection
The SmartPasteButton automatically detects form fields within its form context. No explicit field mapping is required—the component uses form control names and types to generate appropriate field metadata for the AI service.
<form [formGroup]="employeeForm" class="k-form">
<button
kendoSmartPasteButton
[requestUrl]="aiUrl">
Smart Paste
</button>
<kendo-formfield>
<kendo-label [for]="firstName" text="First Name"></kendo-label>
<kendo-textbox #firstName formControlName="firstName"></kendo-textbox>
</kendo-formfield>
<kendo-formfield>
<kendo-label [for]="email" text="Email"></kendo-label>
<kendo-textbox #email formControlName="email"></kendo-textbox>
</kendo-formfield>
</form>The component inspects form controls and automatically generates field descriptions for the AI service based on control names, labels, and input types.
Explicit Form Field Configuration
While automatic detection works for most scenarios, you can explicitly configure form fields using the formFields input. This provides precise control over which fields are processed, their data types, and how the AI interprets them.
Use explicit configuration when you need to:
- Specify exact data types for fields (particularly
numbertypes). - Include only specific form fields while excluding others.
- Provide detailed descriptions to help AI understand field purposes.
- Define allowed values for select fields or radio button groups.
When using explicit field configuration with Kendo form components, each form control must have an id attribute that matches the field name in the formFields array. The SmartPasteButton uses these IDs to target and populate the correct form controls.
Field Type Specification
The SmartPasteFormField interface requires you to specify a type for each field. Use kendo-input for Kendo UI components, and the other types for HTML elements or third-party components.
string—For HTML text inputs and similar components. Expects plain text values.number—For HTML number inputs and numeric components. Expects numeric values without formatting.boolean—For HTML checkboxes, toggle buttons, and switches. Expectstrueorfalsevalues.fixed-choices—For HTML select elements and radio buttons. Expects values from theallowedValuesarray.kendo-input—For Kendo UI components like DatePicker, NumericTextBox, TimePicker, and other specialized inputs. Expects values in the format that the specific Kendo component accepts (for example, Date objects for DatePicker, numbers for NumericTextBox).
The following example demonstrates basic field type specification with string, number, and date fields.
Field Descriptions
Provide clear descriptions to help the AI understand what data to extract and how to format it. Descriptions are particularly useful for guiding the AI to interpret ambiguous data or apply specific formatting rules.
The following example demonstrates providing detailed field descriptions to guide AI data extraction and formatting.
Allowed Values
For fields with predefined options, provide the allowedValues array. The AI maps natural language terms to the closest matching option from the allowed values.
The following example demonstrates using allowedValues for dropdown fields. Both fields specify allowed values, enabling the AI to map natural language input to the closest matching predefined option.
Selective Field Processing
Include only specific fields by listing them in the formFields array. Fields not listed are excluded from Smart Paste processing, which is useful when certain form fields must be filled in manually.
The following example demonstrates selective field processing where only specific fields are included in the Smart Paste operation.