# SmartPasteButton Configuration

The [SmartPasteButton](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/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`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/configuration/employee-registration/source.txt)

## AI Service Configuration

The [`requestUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#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. If you omit `requestUrl`, the component does not send an HTTP request or populate form fields.

```html
<button
  kendoSmartPasteButton
  [requestUrl]="aiUrl">
  Smart Paste
</button>
```

```typescript
public aiUrl = 'https://api.example.com/ai/smart-paste';
```

Use the [`requestOptions`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#requestOptions) input to customize the HTTP request, including its method, response type, headers, and credentials:

```typescript
public requestOpts: SmartPasteAIRequestOptions = {
  headers: new HttpHeaders({
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }),
  method: 'POST',
  withCredentials: true
};
```

```html
<button
  kendoSmartPasteButton
  [requestUrl]="aiUrl"
  [requestOptions]="requestOpts">
  Smart Paste
</button>
```

## 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`](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 and types to generate appropriate field metadata for the AI service.

```html
<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`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#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 `number` types).
* 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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id) attribute that matches the [`field`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpasteformfield#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-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#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 HTML number inputs. Expects numeric values without formatting.
* `boolean`—For HTML checkboxes, toggle buttons, and switches. Expects `true` or `false` values.
* `fixed-choices`—For HTML select elements and radio buttons. Expects values from the `allowedValues` array.
* `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, such as a Date object for DatePicker or a number for NumericTextBox.

The following example demonstrates basic field type specification with string, number, and date fields.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/configuration/field-types/source.txt)

### 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. Set the [`description`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpasteformfield#description) property of each entry in the `formFields` array.

```typescript
public formFields: SmartPasteFormField[] = [
  {
    field: 'email',
    type: 'string',
    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-angular-ui/demos/buttons/smartpastebutton/configuration/field-descriptions/source.txt)

### Allowed Values

For fields with predefined options, provide the [`allowedValues`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpasteformfield#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/smartpastebutton/configuration/allowed-values/source.txt)

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

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

## Trigger Smart Paste Programmatically

You can trigger the SmartPasteButton action programmatically by using a template reference to call the [`paste()`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent#paste) method from a custom control. The button must remain inside the form whose fields it will process.

The following snippet starts Smart Paste from a separate button:

```html
<form [formGroup]="employeeForm">
  <button
    kendoSmartPasteButton
    #smartPaste="kendoSmartPasteButton"
    [requestUrl]="aiUrl">
    Smart Paste
  </button>

  <button type="button" (click)="smartPaste.paste()">Fill Form</button>
</form>
```

The following example triggers Smart Paste from a custom button that copies sample data to the clipboard.

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

## Suggested Links

* [SmartPasteButton Events](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/smartpastebutton/events)
* [SmartPasteButton Validation](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/smartpastebutton/validation)
* [SmartPasteButton API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/smartpastebuttoncomponent)
* [Getting Started with Kendo UI for Angular Buttons](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/installation/getting-started)