Applications Blazor avec agents et assistants de codage Telerik UI AI

Dans cet article, je vais vous montrer comment accélérer le développement de vos projets basés sur Blazor en utilisant Assistants de codage IA Telerik UI ainsi que la puissance du mode agent Visual Studio Code. Commençons !

Une brève histoire du codage vibratoire

En février 2025, Andrej Karpathy a publié un tweet où le terme codage d’ambiance a été mentionné pour la première fois, le décrivant comme une expérience où vous pouvez oublier d’écrire du code et simplement vous contenter de donner des instructions et d’attendre des résultats, en acceptant tous les changements sans vous soucier de rien. Cela a été possible parce que les modèles et outils d’IA se sont considérablement améliorés. Cependant, il a mentionné que l’idée était axée sur des projets de week-end jetables.

Depuis lors, une révolution est en cours où les principaux concurrents de l’IA rivalisent chaque mois pour améliorer leurs modèles et leurs outils afin de permettre une meilleure expérience de codage d’ambiance, dans le but de l’utiliser non seulement pour des projets simples mais également pour des projets à grande échelle.

Mode agent dans VS Code

VS Code est l’un des éditeurs préférés de millions de développeurs de logiciels, en raison de l’incroyable expérience qu’il offre pour développer sur n’importe quelle plate-forme et langage de programmation, ainsi que du grand nombre d’extensions.

Le pari de l’équipe derrière VS Code pour le codage d’ambiance est le mode agent, qui s’améliore à chaque itération de l’outil. Certaines fonctionnalités du mode agent incluent :

• Permet l’utilisation des derniers et meilleurs modèles d’IA
• Vous pouvez facilement annuler les modifications apportées à un point précédent
• Vous pouvez référencer le contexte, à la fois à partir du projet et de ressources externes telles que des images et des URL.
• Vous pouvez définir des fichiers d’instructions, des invites réutilisables et des modes personnalisés pour accélérer la création de code
• Parmi de nombreuses autres fonctionnalités

Si un contexte supplémentaire doit être ajouté, cela peut être fait en utilisant le # symbole suivi de la référence que vous souhaitez inclure comme instruction pour un modèle IA. De même, des mentions peuvent être ajoutées à l’aide du @ symbole. Une mention fait référence à un assistant spécialisé qui permet de travailler dans un domaine précis au sein du chat. Vous pouvez les considérer comme des experts du domaine à qui vous pouvez demander de l’aide pour une tâche à votre place.

Certains des participants prédéfinis les plus utilisés dans VS Code sont :

• @vscode
• @Terminal
• @espace de travail

Il existe également des sociétés comme Progress qui ont développé leurs propres participants pour vous accompagner dans vos tâches de développement, comme nous le verrons ensuite.

Installation de l’extension copilote Telerik Blazor GitHub

L’extension Telerik Blazor GitHub Copilot fait partie de Progress Interface utilisateur Telerik pour Blazor AI Coding Assistantqui fournit un contexte propriétaire aux modèles d’IA pour générer du code de haute qualité à l’aide des composants Telerik UI pour Blazor. Dans le cas de l’extension, vous pouvez la voir comme un générateur de code AI pour Blazor qui peut vous aider à créer rapidement des applications, ainsi qu’à répondre à toutes vos questions sur les composants. Pour l’utiliser, il y a quelques prérequis :

Pour installer l’extension, vous devez d’abord vous connecter à GitHub. Ensuite, allez au Application GitHub de TelerikBlazor page et installez l’application :

Une fois que vous aurez cliqué sur le bouton d’installation, vous serez redirigé vers une nouvelle page où il vous sera demandé où vous souhaitez installer TelerikBlazor. Ici, vous devez sélectionner le compte que vous prévoyez d’utiliser avec GitHub Copilot :

Après avoir sélectionné le compte, vous devrez terminer l’installation et autoriser son utilisation dans votre compte :

Après avoir installé TelerikBlazor sur votre compte GitHub, il vous sera demandé une forme d’authentification sur GitHub pour confirmer l’installation. Ensuite, vous pourrez être redirigé vers la page d’authentification Telerik pour saisir vos informations de connexion, ce qui complétera l’autorisation de l’extension GitHub Copilot pour l’intégrer à votre compte Telerik. Une fois cela fait, vous verrez un message comme celui-ci dans votre navigateur :

"Authentication successful. You can now use the installed extension."

Enfin, redémarrez votre outil de développement et créez une nouvelle session de chat.

Utilisation de l’extension copilote Telerik Blazor GitHub

Utiliser l’extension après l’avoir installée est très simple ; il vous suffit d’utiliser le Demander mode et mention @telerikblazorfaisant une enquête. Pour rendre cela un peu plus pratique, supposons que nous souhaitions implémenter un TelerikAvatar en utilisant l’invite suivante :

Generate a TelerikAvatar with an image bound to @UserAvatarUrl and an Alt attribute set to @UserName

L’exécution de l’invite sans utiliser la mention génère le code incorrect suivant :

<TelerikAvatar Type="AvatarType.Image"
    ImageUrl="@UserAvatarUrl"
    Alt="@UserName" />

Dans le code précédent, l’erreur est que les propriétés ImageUrl et Alt n’existe pas dans le composant TelerikAvatarce qui amènerait l’application à lever une exception lors de la tentative de rendu du composant.

Maintenant, je vais exécuter la même instruction mais en utilisant @telerikblazor:

@telerikblazor  Genera un TelerikAvatar con una imagen asociada a @UserAvatarUrl y un Alt igual a @UserName

Avec ce changement, le code généré est le suivant :

<TelerikAvatar Type="AvatarType.Image" Bordered="true">
    <img src="@UserAvatarUrl" alt="@UserName" />
</TelerikAvatar>

Le résultat précédent ne posera aucun problème car il suit les directives de la documentation :

Cela démontre le pouvoir de l’utilisation de la mention @telerikblazor.

Utilisation du serveur Telerik Blazor MCP

Si vous pensez que l’extension Telerik Blazor GitHub Copilot offre une amélioration de la génération de code à l’aide des composants Telerik, le serveur MCP fait passer la productivité au niveau supérieur. Contrairement à l’extension, avec le serveur MCP, vous pouvez générer du code en mode agent via le langage naturel, vous permettant ainsi de créer des interfaces utilisateur plus complexes. Pour cette approche, vous avez besoin des éléments suivants :

Je vais démontrer en utilisant VS Code, où le moyen le plus simple d’installer le serveur MCP consiste à utiliser le Interface utilisateur Telerik pour l’extension Blazor pour VS Code. Pour y parvenir, procédez comme suit :

1. Ouvrez le marché Visual Studio.
2. Rechercher l’extension Interface utilisateur Telerik pour les outils de productivité Blazor.
3. Sélectionnez l’extension et installez-la.
4. Une fois que l’état de l’extension indique qu’il est installé, appuyez sur la combinaison de touches Ctrl + Shift + P (Cmd + Shift + P pour Mac).
5. Entrez le terme Configurer le serveur MCP.

6. En cliquant sur l’option précédente, vous serez invité à sélectionner le mode d’installation. Espace de travail activera le serveur pour l’espace de travail actuel, tandis que Mondial appliquera l’opération à tous les espaces de travail VS Code.
7. Une fois l’une des options précédentes sélectionnée, allez dans le Rallonges section, où vous verrez le nouveau serveur MCP nommé TVBlazorAssistant installé.
8. Cliquez sur le bouton Paramètres du serveur MCP et dans les options, sélectionnez Afficher la configuration (JSON).

9. Revoir le contenu de mcp.json et localiser la propriété TELERIK_LICENSE_PATHoù vous devez ajouter le chemin d’accès à votre fichier de licence. Si vous souhaitez plutôt utiliser la licence directement, vous devez remplacer TELERIK_LICENSE_PATH avec TELERIK_LICENSE.
10. Démarrez le serveur MCP en cliquant sur le bouton Démarrer qui apparaît au-dessus du nom du serveur MCP :

Une fois le serveur MCP prêt, l’étape suivante consiste à l’utiliser. Pour ce faire, cliquez sur l’icône des outils et assurez-vous que le serveur MCP nommé TVBlazorAssistant est sélectionné :

Une fois tout configuré, nous pouvons commencer à créer des interfaces utilisateur complexes à l’aide des composants Telerik Blazor. La première étape consiste à passer à Agent mode dans l’interface utilisateur. Après cela, vous pouvez commencer à écrire des messages comme celui-ci :

telerik_blazor_assistant Generate a Blazor Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data

Une chose très importante est que vous « invoquiez » le serveur MCP d’une manière ou d’une autre. Une façon de procéder consiste à utiliser le nom de l’outil telerik_blazor_assistant comme le montre le texte précédent. Vous saurez que le serveur MCP a été utilisé car une indication sur les paramètres à utiliser pour appeler le serveur MCP apparaîtra dans le cadre de la conversation, ainsi qu’une approbation pour l’appel :

Une fois la génération de code terminée, vous verrez du code qui se compile et s’exécute sans aucun problème, affichant une interface utilisateur utilisant Telerik UI pour les contrôles Blazor, démontrant la puissance du serveur MCP :

Conclusion

Tout au long de cet article, vous avez vu comment Telerik AI Coding Assistant peut vous aider dans vos projets basés sur Blazor en vous permettant de créer des applications fonctionnelles et sans erreur à l’aide des composants Telerik.

N’oubliez pas que Telerik UI pour Blazor est livré avec un essai gratuit de 30 jours. Alors si vous ne l’utilisez pas déjà, essayez-le :

Essayez l’interface utilisateur Telerik pour Blazor