# 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/configuration/source.txt)

## AI Service Configuration

Attach a [`click`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteclickevent) handler to send clipboard content and form field configuration to your AI service. The event's [`requestData`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteclickevent#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.

```ts
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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops#disabled) prop to prevent interaction during processing and show visual feedback to users by managing a loading state.

```vue
<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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/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:

```json
{
    "fieldValues": {
        "fullName": "Sarah Johnson",
        "email": "sarah@example.com"
    }
}
```

For .NET applications, the [`Telerik.AI.SmartComponents.Extensions`](https://www.nuget.org/packages/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`](https://learn.microsoft.com/en-us/dotnet/ai/microsoft-extensions-ai) and the Telerik Smart Components extensions, which powers the SmartPasteButton demos throughout Smart Paste documentation.

```csharp
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.

```vue
<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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops#formFields) prop. Each [`SmartPasteFormField`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteformfield) object supports the following properties:

Use explicit configuration when you need to:

* Specify exact data types for fields, particularly `number` types.
* 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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteformfield) object supports the following properties:

* [`field`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteformfield#field) - The unique identifier matching the form input's name or id attribute
* [`description`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteformfield#description) - A text description that helps the AI understand what data belongs in this field
* [`type`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteformfield#type) - The field type: `string`, `number`, `boolean`, `fixed-choices`, or `kendo-input`
* [`allowedValues`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteformfield#allowedvalues) - 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 [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops#formfields) 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. Expects `true` or `false` values.
* `fixed-choices`—For fields with predefined options, like HTML select elements, radio buttons, and dropdown components. Expects a value from the `allowedValues` array.
* `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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/field-type-specification/source.txt)

### 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.

```vue
<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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/field-descriptions/source.txt)

### 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/fixed-choice-fields/source.txt)

### 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/selective-fields/source.txt)

## Trigger Smart Paste Programmatically

You can trigger the SmartPasteButton action programmatically by using a ref to the SmartPasteButton and call its [`click()`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonhandle#click) method to start Smart Paste from custom UI.

The following example triggers Smart Paste from a custom button.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/programmatic-trigger/source.txt)

## Suggested Links

* [SmartPasteButton Events](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/smartpaste/events)
* [SmartPasteButton Validation](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/smartpaste/error-handling)
* [SmartPasteButton API Reference](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops)