--- title: "Introducing the New Angular Smart Paste Button Component" published_at: "2024-11-04T09:52:13+00:00" modified_at: "2025-11-06T12:42:14+00:00" url: "https://www.syncfusion.com/blogs/post/angular-smart-paste-button-component" excerpt: "Discover the new Angular Smart Paste Button component with AI-driven features that enhance data entry efficiency." taxonomy_category: - "Angular" - "Development" - "UI" - "Web" - "What's new" taxonomy_post_tag: - "Angular" - "development" - "UI Components" - "Web" - "What's New" --- # Introducing the New Angular Smart Paste Button Component [Mydeen S N](https://www.syncfusion.com/blogs/author/mydeensn) ![Introducing the New Angular Smart Paste Button Component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Introducing-the-New-Angular-Smart-Paste-Button-Component.png) **TL;DR:** The new Syncfusion Angular Smart Paste Button component, included in the 2024 Volume 3 release, automates data entry by pasting and organizing data into relevant fields, minimizing errors and boosting efficiency. Let’s see how to set up a text-generative AI model using Azure OpenAI and integrate the Angular Smart Paste Button with a feedback form, including data validation. We’re thrilled to unveil the new [Angular Smart Paste Button](https://www.syncfusion.com/angular-components/angular-smart-paste-button) component in the [2024 volume 3](https://www.syncfusion.com/forums/194459/essential-studio-2024-volume-3-main-release-v27-1-48-is-available-for-download) release. The **AI-powered Smart Paste** ** Button** component automates data entry by intelligently pasting and formatting data into the appropriate fields on various forms. This improves efficiency, minimizes manual errors, and ensures consistency in forms across different apps, such as customer information forms, surveys, orders, registrations, financial records, healthcare documents, legal contracts, and HR apps. ## Key features The Angular Smart Paste Button component comes with a range of features designed to boost productivity and provide extensive customization options for easy automation: - **Clipboard integration**: Pulls data from the clipboard, reducing the need for manual typing. - **Autofill capability**: Automatically populates multiple form fields with one click, saving time and effort. - **Smart data parsing**: Intelligently recognizes and formats clipboard data to match the form’s required fields. ## Why use AI-powered Smart Paste? Retail companies often collect feedback through emails, surveys, and social media, necessitating manual entry into a centralized system. With the Smart Paste Button, customer service representatives can swiftly paste this feedback into a form where AI automatically organizes text, ratings, and other relevant details into the correct fields. This automation enhances the speed and accuracy of data collection, facilitating quicker insights and more timely responses based on customer feedback. ## Integrating AI service into your application ### Step 1: Installing the AI service package We can use the [Vercel AI](https://sdk.vercel.ai/getting-started) package to configure various AI services under a unified API context. Here, we’ll use **Azure OpenAI** as an example. However, you can install other AI packages from your preferred service provider, such as ** Google** or ** OpenAI.** Run the following command to install the Azure package: ``` npm i ai @ai-sdk/azure ``` ### Step 2: Configuring the AI service Ensure you have access to the [Azure OpenAI](https://azure.microsoft.com/en-in/products/ai-services/openai-service) service and have set up a deployment in the Azure portal. Once ready, configure the AI service by adding the resource name and API key to your code. Refer to the following code example. ``` import { generateText } from "ai"; import { createAzure } from '@ai-sdk/azure'; // Warning - Do not expose your API keys in the client-side code. This is just for demonstration purposes. const azure = createAzure({ resourceName: 'RESOURCE_NAME', apiKey: 'API_KEY', }); // Update the model here. // const aiModel = azure('MODEL_NAME'); export async function getChatAIRequest(options: any) { try { const result = await generateText({ model: aiModel, messages: options.messages, topP: options.topP, temperature: options.temperature, maxTokens: options.maxTokens, frequencyPenalty: options.frequencyPenalty, presencePenalty: options.presencePenalty, stopSequences: options.stopSequences }); return result.text; } catch (err) { console.error("Error occurred:", err); return null; } } ``` ## Getting started with the Angular Smart Paste Button component The Angular Smart Paste Button component integrates seamlessly with other components and frameworks, making it easy to incorporate into your existing web apps. Let’s go through the steps to create a product feedback form and include the Angular Smart Paste Button component. ### Step 1: Installing the Smart Paste and Form components To begin, install the Syncfusion Angular form components and the Smart Paste Button component using the following command: ``` npm i @syncfusion/ej2-angular-buttons @syncfusion/ej2-angular-inputs ``` ### Step 2: Create the feedback form Next, create a feedback form with the necessary fields: **Name, Email, Product Name, Product Version, Rating,** and ** Comments**. Refer to the following code example for the feedback form in the **app.component.html** file. ```
Product Feedback Form
``` ### Step 3: Integrating AI service with the Angulart Smart Paste Button The [aiAssistHandler](https://ej2.syncfusion.com/angular/documentation/api/smart-paste-button#aiassisthandler) property allows you to define a callback function that sends a request to the AI model and updates the form based on the AI’s response. This function enables you to pass chat parameters to customize the AI response according to your preferences before sending the request. Refer to the following code example. ``` import { Component, OnInit, ViewChild } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { SmartPasteButtonModule, ButtonModule, ChatOptions, ButtonComponent } from '@syncfusion/ej2-angular-buttons'; import { TextBoxModule, TextAreaModule, NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'; import { getChatAIRequest } from './ai-model'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, SmartPasteButtonModule, TextBoxModule, TextAreaModule, NumericTextBoxModule, ButtonModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent implements OnInit { @ViewChild('smart') public smartPaste: any; onCreated(): void { this.smartPaste.aiAssistHandler = this.serverAIRequest; } public serverAIRequest = async (settings: ChatOptions) => { let output: string = ''; try { console.log(settings); output = await getChatAIRequest(settings) as string; } catch (error) { console.error("Error:", error); } return output; }; } ``` ### Step 4: Validate the feedback form data After creating the feedback form; the next step is to implement validation to ensure that the input data meets specific criteria. Refer to the following code example to validate the form fields in the **app.component.ts** file. ``` import { Component, OnInit, ViewChild } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-angular-inputs'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent implements OnInit { public formObject: FormValidator | undefined; ngOnInit(): void { const options: FormValidatorModel = { rules: { userName: { required: [true] }, userEmail: { required: [true] }, productName: { required: [true] }, productVersion: { required: [true] }, rating: { required: [true] }, feedbackDescription: { required: [true] } }, }; this.formObject = new FormValidator('#ai-feedback-form', options); } onSubmit(): void { if (this.formObject?.validate()) { alert('Feedback form submitted successfully'); } } } ``` After executing the above code examples, we’ll get the output that resembles the following image. Filling feedback form using the Angular Smart Paste Button component ## GitHub reference For more details, refer to the complete sample in our [GitHub demo](https://github.com/syncfusion/smart-ai-samples/tree/master/angular/src/app/smart-paste) . ## Conclusion Thank you for reading! In this blog, we’ve covered how to get started with the Syncfusion [Angular Smart Paste Button](https://www.syncfusion.com/angular-components/angular-smart-paste-button) component, which is available in our [2024 Volume 3](https://www.syncfusion.com/forums/194459/essential-studio-2024-volume-3-main-release-v27-1-48-is-available-for-download) release. Try this smart feature and share your feedback in the comments section below! If you’re not a customer yet, take advantage of our 30-day [free trial](https://www.syncfusion.com/downloads) to explore these new features. For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums) , [feedback portal](https://www.syncfusion.com/feedback) , or [support portal](https://support.syncfusion.com/) . We are always happy to assist you! ## Related Blogs [How to resolve CORS errors by using Angular Proxy?](https://www.syncfusion.com/blogs/post/resolve-cors-errors-angular-proxy) [Streamline Data Management with Inline Editing in Angular Pivot Table](https://www.syncfusion.com/blogs/post/inline-editing-in-angular-pivot-table) [Mastering Angular Query Builder: CEL and SpEL Integration](https://www.syncfusion.com/blogs/post/cel-and-spel-in-angular-query-builder) [Syncfusion Essential Studio® 2024 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol3)