Fermer

septembre 4, 2025

Commencer avec le composant invite de Blazor AI

Commencer avec le composant invite de Blazor AI


Dans cet article, nous explorerons ce qu’est le composant invite de Telerik Blazor AI et comment vous pouvez l’intégrer dans vos propres projets basés sur Blazor, dans le but de fournir des expériences intelligentes à vos utilisateurs pour générer et améliorer rapidement le contenu.

Qu’est-ce que le composant invite Blazor AI?

Le Composant de Blazor AipRompt De Progress, Telerik est un composant fabuleux qui permet aux utilisateurs d’interagir avec un LLM via une invite pour générer une sortie. De même, le composant permet à la réutilisation de cette sortie d’exécuter des commandes prédéfinies qui le modifient, optimisant ainsi les temps de génération de contenu.

Certains cas d’utilisation pour le composant AipRompt pourraient être:

  • Aide pour améliorer les descriptions de produits
  • Générer des résumés et des questions dans des articles et des documents
  • Développer du contenu pour les médias sociaux
  • Création de questions pour vérifier la compréhension d’un sujet
  • Traduction de contenu
  • Entre autres

La liste ci-dessus n’est qu’un petit échantillon d’idées que vous pourriez mettre en œuvre, mais sans aucun doute la limite est votre imagination.

Configuration d’un projet de test

Pour rendre les démonstrations dans cet article plus réalistes, supposons que nous travaillons sur une page d’édition de produits de commerce électronique.

Ce type de contenu nécessite généralement beaucoup de temps pour créer de bonnes descriptions de produits, ce qui conduit les créateurs à opter pour des descriptions superficielles qui ne transmettent pas la confiance. L’objectif est d’aider les utilisateurs à améliorer rapidement ces descriptions grâce à l’utilisation du composant AipRompt.

La page de démonstration initiale est la suivante:

@page "/product-editor"
@using Microsoft.AspNetCore.Components.Forms
@using Telerik.Blazor.Components

<style>
    .product-editor-card {
        max-width: 800px;
        margin: 2rem auto;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        background: #fff;
    }

    .product-form {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .image-section {
        flex: 1 1 200px;
        text-align: center;
    }

    .image-preview {
        width: 100%;
        max-width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #ddd;
        margin-bottom: 0.5rem;
    }

    .fields-section {
        flex: 2 1 300px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 1rem;
    }

    .ai-prompt-wrapper {
        margin-top: 1rem;
        background: #f9f9f9;
        padding: 1rem;
        border-radius: 4px;
    }
</style>

<TelerikCard Class="product-editor-card">
    <CardHeader>
        <h2>Edit Product</h2>
    </CardHeader>
    <CardBody>
        <div class="product-form">
            <div class="image-section">
                @if (!string.IsNullOrEmpty(Product.ImageURL))
                {
                    <img src="@Product.ImageURL" alt="Preview" class="image-preview" />
                }
                else
                {
                    <div class="image-preview d-flex align-items-center justify-content-center text-muted">
                        No image
                    </div>
                }
                <InputFile OnChange="@OnInputFileChange" accept="image/*" />
            </div>
            <div class="fields-section">
                <TelerikTextBox @bind-Value="Product.Name" Placeholder="Product name" />
                <TelerikNumericTextBox @bind-Value="Product.Price" Format="C" Placeholder="Price" />
                <TelerikTextArea @bind-Value="Product.Description" Placeholder="Description" Rows="4" />           
            </div>
        </div>
        <div class="actions">
            <TelerikButton OnClick="@OnCancel" ThemeColor="Light">Cancel</TelerikButton>
            <TelerikButton OnClick="@OnSave" ThemeColor="Primary">Save</TelerikButton>
        </div>
    </CardBody>
</TelerikCard>

@code {
    private ProductModel Product = new()
    {
        Name = "Cotton T-Shirt",
        Price = 29.99m,
        Description = "Comfortable cotton t-shirt in various colors.",
        ImageURL = "https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    };
    

    private IBrowserFile UploadedFile;
    private string UploadedImageDataUrl;   

    private async Task OnInputFileChange(InputFileChangeEventArgs e)
    {
        UploadedFile = e.File;
        var buffer = new byte[UploadedFile.Size];
        await UploadedFile.OpenReadStream(maxAllowedSize: 10_000_000).ReadAsync(buffer);
        UploadedImageDataUrl = $"data:{UploadedFile.ContentType};base64,{Convert.ToBase64String(buffer)}";
    }

    private void OnCancel()
    {
        Product = new ProductModel { Name = string.Empty, Price = 0, Description = string.Empty };
        UploadedImageDataUrl = null;        
    }

    private async Task OnSave()
    {
        // Save Logic
    }

    class ProductModel
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string Description { get; set; }
        public string ImageURL { get; set; }
    }
}

Lors de l’exécution de l’application, le résultat est le suivant:

Une page d'édition de produit avec des commandes manuelles, entièrement sans IA.

En effet, éditer des centaines ou des milliers de descriptions de produits dans une boutique en ligne peut être une tâche titanesque, nous allons donc mettre en œuvre le composant AipRompt pour les générer plus rapidement.

Intégrer la composante invite d’IA dans un projet de blazor

La première étape que vous devez suivre pour intégrer le composant d’invite AI dans votre application Blazor est de suivre le Guide d’installation des composants du blazor pour les intégrer dans votre application.

Ensuite, vous devez ajouter l’utilisation du TelerikAIPrompt Composant sur la page où vous souhaitez implémenter la fonctionnalité AI. Dans notre cas, nous pouvons ajouter un bouton pour afficher et le cacher comme suit:

@page "/product-editor"
@using Microsoft.AspNetCore.Components.Forms
@using Telerik.Blazor.Components

...

<TelerikCard Class="product-editor-card">
    <CardHeader>
        <h2>Edit Product</h2>
    </CardHeader>
    <CardBody>
        <div class="product-form">
            ...
            <div class="fields-section">
                <TelerikTextBox @bind-Value="Product.Name" Placeholder="Product name" />
                <TelerikNumericTextBox @bind-Value="Product.Price" Format="C" Placeholder="Price" />
                <TelerikTextArea @bind-Value="Product.Description" Placeholder="Description" Rows="4" />

                <TelerikButton OnClick="@ToggleAIPrompt" Icon="SvgIcon.Globe" Class="mt-2" ThemeColor="Info">
                    Improve description
                </TelerikButton>

                @if (ShowAIPrompt)
                {
                    <div class="ai-prompt-wrapper">
                        <TelerikAIPrompt Width="100%">                           
                        </TelerikAIPrompt>
                    </div>
                }

            </div>
        </div>
        <div class="actions">
            <TelerikButton OnClick="@OnCancel" ThemeColor="Light">Cancel</TelerikButton>
            <TelerikButton OnClick="@OnSave" ThemeColor="Primary">Save</TelerikButton>
        </div>
    </CardBody>
</TelerikCard>

@code {
    private bool ShowAIPrompt;
    void ToggleAIPrompt()
    {
        ShowAIPrompt = !ShowAIPrompt;
    }
...
}

Le code ci-dessus permet à l’utilisateur d’afficher et de masquer le composant d’invite AI comme indiqué ci-dessous:

Déploiement du composant TelerikaipRompt dans sa forme la plus élémentaire, mais sans fonctionnalité implémentée

Comme vous pouvez le voir dans l’image ci-dessus, le composant est affiché et caché à volonté dans l’interface utilisateur. Cependant, l’implémentation n’est pas encore fonctionnelle car nous devons ajouter un modèle d’IA qui génère des réponses dans le composant, que nous verrons ensuite.

Ajout d’un modèle d’IA au projet Blazor pour une utilisation avec AipRomppt

Une fois que nous avons ajouté le composant qui nous permettra de générer des descriptions dans l’application, il est temps de le connecter avec un modèle d’IA pour améliorer les descriptions.

Dans cet exemple, j’utiliserai le Openai Service, nous devons donc installer les packages NuGet suivants:

  • Microsoft.Extensions.AI
  • Microsoft.Extensions.AI.OpenAI

Ensuite, j’irai au Program.cs Fichier pour ajouter un service de chat que nous pouvons injecter dans n’importe quel composant:

...
builder.Services.AddTelerikBlazor();

var key = Environment.GetEnvironmentVariable("OpenAIKey");
var model = "o4-mini-2025-04-16";

IChatClient chatClient =
    new OpenAIClient(key).GetChatClient(model).AsIChatClient();
builder.Services.AddChatClient(chatClient);

var app = builder.Build();

Enfin, nous revenons au composant de type page et injectons une référence qui nous permettra de nous connecter au service OpenAI:

 "/product-editor"
@inject IChatClient OpenAIClient
...

Avec la référence au service OpenAI prêt, nous pouvons commencer à améliorer la description du produit.

Répondre aux demandes des utilisateurs via Blazor Ai Invite

Un avantage significatif de la composante invite de Blazor AI est que si vous avez enregistré un service de type IChatClient en utilisant Microsoft.Extensions.AIcomme dans notre cas, le composant AipRompt l’utilisera automatiquement. Si vous n’utilisez pas le Microsoft.Extensions.AI package, vous pouvez utiliser le OnPromptRequest événement pour faire des demandes, Comme indiqué dans la documentation.

Connaître ce qui précède, ce que nous ferons, c’est créer une propriété qui contient Invite du système– En d’autres termes, comment la réponse que nous obtenons du service d’IA devrait être. Cela sera lié au composant via le SystemPrompt Paramètre comme suit:

...

@if (ShowAIPrompt)
{
    <div class="ai-prompt-wrapper">
        <TelerikAIPrompt Width="100%"
                        SystemPrompt="@SystemPrompt">
        </TelerikAIPrompt>
    </div>
}
...

@code {
 ...

public string SystemPrompt { get; set; }

protected override void OnInitialized()
{
    base.OnInitialized();
    SystemPrompt = $@"""

                Based on the following product details, please improve the product description to make it more appealing and engaging for potential customers:
                Product Name: {Product.Name}
                Product Price: {Product.Price:C}
                Product Description: {Product.Description}


                """;
}

}

Dans le code ci-dessus, vous pouvez voir comment nous utilisons les informations du produit pour donner des instructions au modèle sur la réponse qui devrait être générée.

D’un autre côté, l’entrée de texte du composant AipRompt servira afin que l’utilisateur puisse saisir des détails supplémentaires sur la façon dont la réponse générée devrait être. Par exemple, ils peuvent le faire avoir un ton formel ou informel, ou ajouter des informations supplémentaires qui ne figurent pas dans la description d’origine. Le résultat de l’exécution est le suivant:

Amélioration d'une description du produit à l'aide du composant AipRompt

Comme vous pouvez le voir, la réponse a été améliorée en prenant toutes les informations fournies et en suivant les instructions de l’utilisateur.

Ajout de suggestions rapides pour les utilisateurs

Vous voudrez peut-être définir des suggestions prédéfinies dans votre application afin que les utilisateurs n’aient pas à continuer de taper une invite répétitive encore et encore. Cela peut être fait grâce au PromptSuggestions Paramètre, qui doit être lié à une liste générique de chaînes comme dans l’exemple suivant:

...
<TelerikAIPrompt Width="100%"
                    SystemPrompt="@SystemPrompt"
                    PromptSuggestions="@PromptSuggestions">
</TelerikAIPrompt>

@code {

    private List<string> PromptSuggestions { get; set; } = new List<string>()
    {
        "Act as a fashion marketing expert and copywriter and craft a persuasive product description for this clothing item that resonates with my [ideal customer persona] and motivates them to buy on my [website/store].",
        "Write a detailed, emotionally engaging description for this garment that highlights its key features, benefits, and unique selling points, aimed at appealing to [ideal customer persona] and increasing conversions.",
        "I need a powerful product description for this apparel piece that clearly explains the material, fit, and styling options, while creating a sense of urgency for [ideal customer persona] to make a purchase.",
        "Create a compelling product listing for this clothing item that emphasizes its versatility and quality, designed to connect with [ideal customer persona] and drive immediate action.",
        "Act as a brand storyteller and craft a product description for this fashion item that builds brand trust, evokes desire, and inspires [ideal customer persona] to click 'add to cart.'"
    };
}

Cette liste de suggestions permettra aux utilisateurs de générer des réponses encore plus rapidement, comme indiqué ci-dessous:

Fournir aux utilisateurs une liste de suggestions pour permettre une génération de description plus rapide

Une fois que nous savons comment améliorer la description du produit, voyons comment nous pouvons le réutiliser pour une action ultérieure.

Ajout de commandes supplémentaires au composant d’invite AI

Vous voudrez peut-être effectuer une action avec la sortie initialement générée, comme l’application d’un format différent, la traduire dans une autre langue ou la convertir en un post pour les médias sociaux, etc. Nous pouvons facilement y parvenir via la section de vue des commandes, qui sera activée en attribuant une liste de commandes de type AIPromptCommandDescriptor au Commands paramètre. Chacune de ces commandes doit contenir les informations suivantes:

  • Id: L’ID de la commande
  • Title: Le titre qui sera affiché pour l’utilisateur pour exécuter la commande
  • Icon: Une icône pour montrer ce que fait la commande
  • Prompt: L’invite que la commande utilisera pour transformer la sortie en nouveau texte
  • Children: Commandes imbriquées de la commande (le cas échéant)

Dans notre exemple, nous ajouterons des commandes pour améliorer et effectuer des ajustements de base, créer des publications sur les réseaux sociaux, générer des formats de contenu longs et, enfin, créer des variations de la description initiale, comme indiqué ci-dessous:

...
<TelerikAIPrompt Width="100%"
                    SystemPrompt="@SystemPrompt"
                    Commands="@PromptCommands">
</TelerikAIPrompt>
...

@code {

    ...
    private List<AIPromptCommandDescriptor> PromptCommands { get; set; } = new List<AIPromptCommandDescriptor>()
    {        
        new AIPromptCommandDescriptor
        {
            Id     = "1",
            Title  = "Correct Spelling and Grammar",
            Icon   = SvgIcon.SpellChecker,
            Prompt = "Correct the spelling and grammar of the following product description."
        },
        new AIPromptCommandDescriptor
        {
            Id     = "2",
            Title  = "Generate Catchy Title",
            Icon   = SvgIcon.Categorize,
            Prompt = "Create a catchy title for the following product description."
        },
        new AIPromptCommandDescriptor
        {
            Id     = "3",
            Title  = "SEO Meta Description",
            Icon   = SvgIcon.Search,
            Prompt = "Write an SEO-friendly meta description (max 160 characters) for the following product description."
        },
        
        new AIPromptCommandDescriptor
        {
            Id      = "4",
            Title   = "Social Media Posts",
            Icon    = SvgIcon.Share,
            Children = new List<AIPromptCommandDescriptor>
            {
                new AIPromptCommandDescriptor
                {
                    Id     = "4.1",
                    Title  = "Twitter",
                    Icon   = SvgIcon.Twitter,
                    Prompt = "Write a concise tweet (max 280 characters) based on the following product description."
                },
                new AIPromptCommandDescriptor
                {
                    Id     = "4.2",
                    Title  = "Facebook",
                    Icon   = SvgIcon.Facebook,
                    Prompt = "Write an engaging Facebook post based on the following product description."
                },
                new AIPromptCommandDescriptor
                {
                    Id     = "4.3",
                    Title  = "Instagram",
                    Icon   = SvgIcon.Instagram,
                    Prompt = "Write an Instagram caption (including relevant hashtags) for the following product description."
                },
                new AIPromptCommandDescriptor
                {
                    Id     = "4.4",
                    Title  = "LinkedIn",
                    Icon   = SvgIcon.Linkedin,
                    Prompt = "Write a professional LinkedIn post for the following product description."
                },
                new AIPromptCommandDescriptor
                {
                    Id     = "4.5",
                    Title  = "Pinterest",
                    Icon   = SvgIcon.Pinterest,
                    Prompt = "Write a Pinterest Pin description (including keywords) for the following product description."
                }
            }
        },

        new AIPromptCommandDescriptor
        {
            Id     = "5",
            Title  = "Generate Blog Post",
            Icon   = SvgIcon.Blogger,
            Prompt = "Write a blog post outline based on the following product description."
        },
        new AIPromptCommandDescriptor
        {
            Id     = "6",
            Title  = "Email Newsletter",
            Icon   = SvgIcon.FileWord,
            Prompt = "Draft an email newsletter introducing the following product."
        },
        
        new AIPromptCommandDescriptor
        {
            Id     = "7",
            Title  = "Simplify Description",
            Icon   = SvgIcon.ApplyFormat,
            Prompt = "Simplify the following product description."
        },
        new AIPromptCommandDescriptor
        {
            Id     = "8",
            Title  = "Expand Description",
            Icon   = SvgIcon.CaretAltExpand,
            Prompt = "Expand the following product description with more details and benefits."
        }
    };
    ...
}

L’exécution de l’implémentation ci-dessus ressemble à la suivante:

Exécution des commandes sur le contenu initial généré par le composant AipRompt

De cette façon, il est possible de simplifier le processus de correction et d’amélioration d’une sortie en fonction de vos besoins.

Conclusion

Tout au long de cet article, vous avez appris à démarrer avec le composant invite de Telerik AI, à comprendre à quoi il s’agit, à le configurer et à l’intégrer avec un modèle d’IA et, enfin, aux étapes pour ajouter des suggestions et des commandes supplémentaires. Il est temps d’accélérer la productivité de vos utilisateurs en créant des applications qui intègrent l’utilisation de l’intelligence artificielle.

Essayez de Telerik UI pour Blazor

Le meilleur outil 2023 pour ta croissance Instagram !



Source link