Serveur MCP pour Fluent UI Blazor

Serveur MCP pour Fluent UI Blazor

Créer des applications avec Fluent UI Blazor v5 devient beaucoup plus facile. Nous sommes ravis de vous présenter le serveur MCP Fluent UI Blazor — votre compagnon propulsé par l’IA qui apporte la documentation des composants en temps réel, des suggestions de code et des conseils de migration directement dans votre IDE.

Que vous utilisiez Visual Studio Code avec GitHub Copilot ou Visual Studio 2026, le serveur MCP transforme votre assistant IA en expert Fluent UI Blazor.

Qu’est-ce que MCP ?

Le Model Context Protocol (MCP) est un standard ouvert qui permet aux assistants IA d’interagir avec des outils externes et des sources de données. Considérez-le comme un pont entre votre assistant de codage IA et la documentation Fluent UI Blazor.

En connectant votre IDE au serveur MCP Fluent UI Blazor, vous bénéficiez de :

• Découverte de composants — Parcourez et recherchez les 65+ composants Fluent UI Blazor disponibles
• Documentation en direct — Obtenez une documentation détaillée sur les paramètres, événements et méthodes
• Référence des énumérations — Accédez à tous les types d’énumérations et leurs valeurs utilisées par les composants
• Assistance au code — Générez du code de composants grâce à des suggestions propulsées par l’IA

Le serveur fonctionne entièrement en local sur votre machine — aucun service cloud, aucune requête réseau externe, aucune télémétrie. Il lit des fichiers JSON de documentation pré-générés et les transmet à votre assistant IA via stdio. C’est tout.

Démarrage en 3 étapes

Étape 1 : Installer le serveur MCP

Installez le serveur en tant qu’outil .NET global :

dotnet tool install -g Microsoft.FluentUI.AspNetCore.McpServer --prerelease

Remarque : Pendant la phase de développement, vous pouvez utiliser le flux NuGet Preview :

dotnet tool install -g Microsoft.FluentUI.AspNetCore.McpServer --add-source https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet9/nuget/v3/index.json --prerelease

Étape 2 : Créer le fichier de configuration

Pour Visual Studio Code, créez .vscode/mcp.json à la racine de votre espace de travail :

{
    "servers": {
        "fluent-ui-blazor": {
            "command": "fluentui-mcp"
        }
    }
}

Pour Visual Studio 2026, créez .mcp.json à la racine de votre solution :

{
    "servers": {
        "fluent-ui-blazor": {
            "command": "fluentui-mcp"
        }
    }
}

Après avoir enregistré, cliquez sur le lien Start au-dessus de l’entrée du serveur et attendez que le libellé Running apparaisse.

Étape 3 : Activer le mode Agent et vérifier

1. Ouvrez le panneau GitHub Copilot Chat (Ctrl+Shift+I)
2. Passez en Mode Agent en cliquant sur le sélecteur de mode
3. Posez une question pour vérifier :

Lister tous les composants Fluent UI Blazor disponibles

Si la configuration est correcte, Copilot utilisera les outils MCP pour renvoyer des informations précises sur les composants. Vous êtes prêt !

Ce que fournit le serveur MCP

Le serveur expose trois types de fonctionnalités :

Outils — Fonctions pilotées par l’IA

Les outils sont des fonctions que le modèle IA appelle automatiquement en fonction de vos questions. Vous n’avez pas besoin de les invoquer manuellement — l’IA détermine quel outil utiliser.

Exemple d’interaction :

Vous : "Quels paramètres accepte FluentDataGrid ?"
IA :   [Appelle GetComponentDetails(componentName: "DataGrid")]
       → Renvoie le tableau complet des paramètres, événements et méthodes

Vous : "Quelles sont les apparences possibles pour un bouton ?"
IA :   [Appelle GetEnumValues(enumName: "ButtonAppearance")]
       → Renvoie Primary, Secondary, Outline, Subtle, Transparent

Ressources — Contexte joint par l’utilisateur

Les ressources sont de la documentation que vous attachez explicitement à la conversation pour fournir un contexte plus riche. Dans VS Code, cliquez sur le bouton + dans Copilot Chat et sélectionnez MCP Resource.

Par exemple, joindre fluentui://component/FluentDataGrid donne à Copilot la documentation complète du DataGrid — paramètres, événements, méthodes et exemples de code — afin qu’il puisse générer un code plus précis.

Prompts — Modèles prêts à l’emploi

Le serveur MCP prend en charge les modèles de prompts pour les tâches courantes comme la création de composants, la construction de formulaires et l’assistance à la migration. Vous pouvez également créer vos propres fichiers de prompts réutilisables dans un répertoire .prompts/ de votre projet.

Pourquoi vous en avez besoin — Le problème v4 vs v5

Les assistants IA mélangent souvent les patterns v4 et v5, ce qui entraîne des erreurs frustrantes. Voici quelques erreurs courantes que le serveur MCP prévient :

Le serveur MCP contient tous les patterns corrects de la v5, les notes de migration et les exemples de code afin que votre assistant IA produise du code fonctionnel dès le premier essai.

AI Skills — Documentation hors ligne pour votre IA

En plus du serveur MCP, nous fournissons également des AI Skills (aussi appelées Agent Skills) — des fichiers de documentation structurée que vous déposez dans votre projet pour aider les assistants de codage IA à générer un code précis et idiomatique.

Les AI Skills suivent la spécification ouverte Agent Skills et se composent de :

• Un fichier SKILL.md avec un frontmatter YAML décrivant la compétence
• Un dossier references/ avec une documentation détaillée sur la configuration, les thèmes, les grilles de données, et plus encore

Comment les utiliser

1. Téléchargez les fichiers de compétences depuis la page AI Skills
2. Placez-les dans votre projet :

votre-projet/
├── .github/
│   └── skills/
│       └── fluentui-blazor-usage/
│           ├── SKILL.md
│           └── references/
│               ├── SETUP.md
│               ├── DATAGRID.md
│               └── THEMING.md

1. Votre assistant IA les découvrira et les utilisera automatiquement

Ces fichiers fonctionnent avec GitHub Copilot, Claude Code et tout assistant IA prenant en charge la spécification Agent Skills.

Sécurité et conformité

Pour les organisations ayant des exigences strictes en matière de sécurité, le serveur MCP est conçu pour être entièrement auditable et sûr :

• Lecture seule — Ne sert que de la documentation pré-générée. Aucune modification de fichier, aucune exécution de code.
• Entièrement hors ligne — Aucun accès réseau, aucun appel API externe, aucune télémétrie, aucun enregistrement des requêtes utilisateur.
• Permissions minimales — S’exécute en tant que processus utilisateur standard, aucun privilège élevé requis.
• Open source — Code source complet disponible sur GitHub pour audit de sécurité.
• Paquets signés — Distribué sous forme de paquet NuGet signé.

Le serveur communique via stdio (entrée/sortie standard) en utilisant JSON-RPC 2.0 — un processus local uniquement, aucun port réseau ouvert.

Pour un modèle de menace détaillé et une analyse de conformité, consultez la page Sécurité et conformité.

Exemple concret : Construire un formulaire

Voici à quoi ressemble une interaction typique. Vous demandez :

Créer un formulaire d'inscription utilisateur avec Fluent UI Blazor avec des champs pour
le nom d'utilisateur, l'email, le mot de passe et la confirmation du mot de passe. Inclure la validation.

Copilot utilise les outils du serveur MCP pour rechercher les bons composants (FluentTextInput, FluentButton, FluentField), leurs paramètres, et génère un formulaire complet et fonctionnel avec EditForm, DataAnnotationsValidator et la syntaxe correcte de la v5 — sans approximation, sans résidus de la v4.

Liens et ressources

Essayez le serveur MCP et dites-nous comment il transforme votre flux de développement Fluent UI Blazor. Nous serions ravis d’avoir vos retours — ouvrez des issues sur GitHub ou contactez l’équipe.

Remerciements

Un grand merci à Adrien Clerbois pour l’énorme travail apporté à ces outils.

Bon Blazoring !