mcpField
S
syncfusion-blazor-smart-paste

syncfusion-blazor-smart-paste

github.com/syncfusionDevelopment4369 installsUpdated 1w ago
Repository

About syncfusion-blazor-smart-paste

A guide for Blazor developers implementing Syncfusion Smart Paste Button to map clipboard text into form fields. It covers AI backend setup, field annotations, and button customization.

Key features

  1. 01Fill form fields from clipboard text
  2. 02Configure multiple AI backends
  3. 03Guide field mapping with annotations
  4. 04Customize button appearance and behavior

Use cases

  1. 01Add smart paste to a Blazor form
  2. 02Configure OpenAI, Azure OpenAI, or Ollama
  3. 03Refine field mapping with annotations

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-smart-paste

After installing, type/syncfusion-blazor-smart-pastein Claude Code to confirm it loaded.

Bundled filesreferences/getting-started.mdreferences/implementation-and-customization.md

Details

From the project README

Syncfusion Blazor Smart Paste Button

The Syncfusion Blazor Smart Paste Button uses AI to intelligently read clipboard text and populate form fields automatically, eliminating manual data entry.

When to Use

Use this skill when you need to:

  • Add the Smart Paste Button to a Blazor form for AI-powered clipboard-to-field population
  • Configure an AI backend (OpenAI, Azure OpenAI, Ollama, or custom)
  • Add [SmartPasteField] annotations to fine-tune field mapping
  • Customize button appearance, content, and behavior
  • Integrate a custom IChatInferenceService implementation
  • Troubleshoot Smart Paste integration or AI connectivity issues

Prerequisites

  • .NET SDK 8.0 or later
  • Visual Studio 2022 (17.0+) or Visual Studio Code
  • Active OpenAI, Azure OpenAI, or Ollama account (or a custom AI backend)
  • Basic knowledge of Blazor Web App (Server render mode)

Quick Setup

Follow these steps in order:

1. Initial Setup and NuGet Installation

Start with getting-started.md to:

  • Create a new Blazor Web App Server
  • Install Syncfusion NuGet packages
  • Register Syncfusion Blazor services
  • Add necessary namespaces
2. Configure AI Service

Proceed here to Custom AI Integration Steps to:

  • Choose your AI provider (OpenAI, Azure OpenAI, or Ollama)
  • Install AI service-specific NuGet packages
  • Configure your AI backend in Program.cs
  • Add theme stylesheets and script resources
3. Implement and Customize

Complete with implementation-and-customization.md to:

  • Add the Smart Paste Button component to your form
  • Run and test the application
  • Add custom field annotations
  • Customize button appearance
  • Integrate custom AI services
  • Troubleshoot common issues

Key Features

FeatureDetails
AI-Powered Form FillingReads clipboard text and maps data to form fields automatically
Multiple AI BackendsOpenAI, Azure OpenAI, Ollama, and custom IChatInferenceService
Field Annotations[SmartPasteField] attribute for precise field descriptions
Easy IntegrationSingle NuGet package + AddSyncfusionSmartPaste() service call
Customizable UIInherits all SfButton properties — icons, content, CSS classes

NuGet Packages

Reference Documents

DocumentPurpose
getting-started.mdProject creation, NuGet installation, service registration
ai-service-configuration.mdAI provider setup (OpenAI, Azure OpenAI, Ollama)
implementation-and-customization.mdComponent usage, field annotations, customization, troubleshooting

Comments

Markdown supported