SmartPasteButton Configuration
The Kendo UI for Vue SmartPasteButton automatically detects form fields and uses AI to extract values from clipboard content. When users click the button, the component reads the clipboard, and then populates form fields with the received data.
The component is compatible with both Kendo UI for Vue Form and native HTML forms, and supports field population for Kendo UI for Vue Inputs, Date Inputs and Dropdowns as well as standard HTML input elements.
The demos use a Telerik-hosted AI service. For production applications, implement an AI service that meets your domain, data, and business requirements.
The following example demonstrates the SmartPasteButton with AI service configuration and automatic form field detection.
AI Service Configuration
Attach a click handler to send clipboard content and form field configuration to your AI service. The event's requestData property contains the clipboard text in content and an array of detected fields in formFields. Use the setResponse callback to populate the form with the AI-generated values.
const handleSmartPaste = async (event: SmartPasteClickEvent): Promise<void> => {
// Send clipboard content to your AI service
const response = await fetch('/api/smartpaste', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(event.requestData)
});
const data = await response.json();
// Populate the form with AI-generated values
event.setResponse(data);
};The component does not send the HTTP request itself. Use the disabled prop to prevent interaction during processing and show visual feedback to users by managing a loading state.
<template>
<SmartPasteButton :disabled="isLoading" @click="handleSmartPaste">Smart Paste</SmartPasteButton>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const isLoading = ref(false);
const handleSmartPaste = async (e: SmartPasteClickEvent) => {
isLoading.value = true;
try {
// ... API call
} finally {
isLoading.value = false;
}
};
</script>Backend Implementation
Implement the endpoint in your backend and connect it to an AI service. It receives content and formFields. Return a SmartPasteResponse with fieldValues keyed by each form field identifier. You can implement the endpoint in any backend technology that supports HTTP requests and AI service integration.
For example, return a JSON response with this shape:
{
"fieldValues": {
"fullName": "Sarah Johnson",
"email": "sarah@example.com"
}
}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, unique identifiers and types to generate appropriate field metadata for the AI service.
<Form>
<FormElement>
<FieldWrapper>
<Label editor-id="fullName">Full Name</Label>
<Input id="fullName" name="fullName" />
</FieldWrapper>
<FieldWrapper>
<Label editor-id="email">Email</Label>
<Input id="email" name="email" />
</FieldWrapper>
<FieldWrapper>
<Label editor-id="phone">Phone</Label>
<Input id="phone" name="phone" />
</FieldWrapper>
<SmartPasteButton :disabled="isLoading" @click="handleSmartPaste">
{{ isLoading ? 'Processing...' : 'Smart Paste' }}
</SmartPasteButton>
</FormElement>
</Form>Explicit Form Field Configuration
While the SmartPasteButton automatically detects form fields, you can explicitly define which fields to populate and how they should be processed using the formFields prop. Each SmartPasteFormField object supports the following properties:
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 the AI understand field purposes.
- Define allowed values for fields with predefined options.
Each SmartPasteFormField object supports the following properties:
field- The unique identifier matching the form input's name or id attributedescription- A text description that helps the AI understand what data belongs in this fieldtype- The field type:string,number,boolean,fixed-choices, orkendo-inputallowedValues- An optional array of valid choices for fields with predefined options
When using explicit field configuration with Kendo form components, each form control must have an
idattribute that matches thefieldname in theformFieldsarray. 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 native HTML number inputs. Expects numeric values without formatting.boolean—For HTML checkboxes, toggle buttons, and switches. Expectstrueorfalsevalues.fixed-choices—For fields with predefined options, like HTML select elements, radio buttons, and dropdown components. Expects a value from theallowedValuesarray.kendo-input—For Kendo UI for Vue components such as DatePicker, NumericTextBox, and DropDownList. Expects a value supported by the component.
The following example demonstrates basic field type specification with string, number, and date fields.
Field Descriptions
Custom field descriptions provide additional context to help the AI match clipboard content to the correct form fields. Use the description property in the formFields array or the data-smartpaste-description attribute directly on form elements.
<Input
name="email"
id="email"
data-smartpaste-description="Personal email address"
/>The following example demonstrates providing detailed field descriptions to guide AI data extraction and formatting.
Allowed Values
For fields with predefined options, provide an allowedValues array. The AI can map clipboard content to a value from the supplied options.
The following example demonstrates allowedValues for fields with predefined options.
Selective Field Processing
Specify only the fields you want SmartPasteButton to populate. Fields omitted from the formFields array are not included in the Smart Paste request.
The following example demonstrates selective field processing where only specific fields are included in the Smart Paste operation.
Trigger Smart Paste Programmatically
You can trigger the SmartPasteButton action programmatically by using a ref to the SmartPasteButton and call its click() method to start Smart Paste from custom UI.
The following example triggers Smart Paste from a custom button.