MCP Designer

MCP Designer est un serveur MCP local dédié à l’intégration de thèmes graphiques Kiubi.

Il permet à un agent IA compatible, comme Claude Code, Codex, Gemini ou Mistral Vibe, d’accéder directement à une documentation et à des fonctionnalités propres à Kiubi. L’agent peut ainsi comprendre la structure du thème, consulter les règles du moteur de templates, analyser les fichiers existants et vous assister pendant l’intégration.

MCP Designer s’exécute localement, dans le dossier de votre projet. Il travaille sur les fichiers du thème présents dans votre environnement de développement.

MCP Designer n’est pas un agent IA. Il fournit à votre agent les outils et le contexte nécessaires pour travailler sur un thème Kiubi.

Les prérequis, l’installation, la configuration et les informations techniques sont disponibles dans le dépôt GitHub du projet.

➡️ Accéder au dépôt GitHub MCP Designer

L’intégration d’un thème Kiubi repose sur plusieurs éléments spécifiques :

• la syntaxe du moteur de templates
• les balises, filtres et blocs propres à Kiubi
• les fichiers de configuration des types de contenus
• les conventions déjà utilisées dans le thème
• les widgets et templates existants
• la cohérence entre les fichiers XML et HTML.

Sans MCP Designer, l’agent doit se baser sur ses connaissances générales ou sur les informations que vous lui fournissez manuellement.

Avec MCP Designer, il peut consulter la documentation Kiubi à la demande, analyser le thème courant et s’appuyer sur les éléments réellement présents dans le projet plutôt que de deviner le fonctionnement attendu.

Il peut notamment :

• rechercher la syntaxe d’une balise ou d’un filtre
• consulter la documentation d’intégration
• analyser les types de contenus présents dans le thème
• afficher les champs, zones et collections d’un type
• identifier les widgets et templates déjà disponibles
• créer ou modifier un type de contenu, comme un billet, un composant ou un widget
• valider la syntaxe et la cohérence du thème

MCP Designer apporte à l’agent une connaissance technique de Kiubi, mais il ne lui donne pas la maîtrise de la stratégie de contenu du projet.

L’agent peut comprendre la différence technique entre un composant, un billet, un symbole ou un bloc d’extrait. En revanche, le choix d’utiliser l’un plutôt que l’autre dépend souvent de la manière dont les contenus seront administrés.

L’agent n’a pas accès aux contenus du site ni aux règles éditoriales définies avec le client. La stratégie d’intégration reste donc sous la responsabilité de l’intégrateur.

L’intégrateur définit la structure attendue. L’agent l’aide ensuite à la mettre en œuvre dans le thème.

Une fois MCP Designer installé et connecté à votre agent, aucune commande particulière n’est nécessaire pour utiliser ses fonctionnalités.

Vous pouvez formuler votre demande normalement depuis la racine du projet, dans le dossier qui contient le répertoire theme/.

Vous pouvez par exemple demander :

• Quels champs sont disponibles dans le type produit ?
• Comment fonctionne le filtre mapvalue du moteur de templates ?
• Crée un billet témoignage avec un titre, un texte, une photographie et une note
• Ajoute un nouveau champ au billet existant
• Valide le thème avant son déploiement
• Convertis ce fichier HTML en composant

L’agent détermine lui-même les actions nécessaires en fonction de la demande.

MCP Designer peut accompagner la conversion d’un fichier HTML en différents éléments d’un thème Kiubi.

Selon la stratégie définie par l’intégrateur, le fichier peut notamment être converti en :

• billet CMS ou blog
• composant
• symbole
• widget
• template principal
• autre template propre au projet

Pour les tâches de création ou de conversion, l’agent présente son plan d’action avant de produire ou de modifier les fichiers. Il peut notamment détailler le mode de conversion — préserver le HTML tel quel, adapter le HTML au thème ou créer le HTML de manière complètement autonome — ainsi que les champs envisagés, les zones prévues, etc.

Il est conseiller de travailler sur 1 seul élément simultanément (comme le convertion/création d'1 billet, d'1 composant, etc.).

Pour créer un nouveau template principal à partir d’une intégration HTML existante, déposez les fichiers sources dans un répertoire temp/ placé à la racine du projet, au même niveau que le répertoire theme/.

L’agent peut alors analyser les fichiers contenus dans temp/, les utiliser comme base de travail, puis les déplacer ou les réorganiser dans le thème afin de créer un nouveau template principal.

Cette méthode lui permet notamment de :

• préserver les dépendances entre les fichiers HTML, CSS, JavaScript et les ressources
• adapter les chemins vers les images, les feuilles de styles et les scripts
• répartir les fichiers dans les répertoires appropriés du thème
• transformer le fichier HTML en template principal Kiubi
• conserver autant que possible la structure et le fonctionnement de l’intégration d’origine

Avant de lancer la conversion, vérifiez que le dossier temp/ contient bien l’ensemble des fichiers nécessaires au fonctionnement de l’intégration.

MCP Designer permet à l’agent d’examiner la structure du projet avant d’intervenir.

Il peut notamment :

• lister les types de billets, composants, produits ou autres éléments
• consulter le détail de leurs champs et de leurs zones
• identifier les widgets disponibles
• repérer leurs templates alternatifs
• rechercher une convention déjà utilisée dans le thème

Cette analyse aide l’agent à s’aligner sur l’existant plutôt qu’à recréer inutilement un champ, un type ou une convention de nommage.

Elle ne remplace toutefois pas les indications de l’intégrateur. Avant une intervention importante, précisez à l’agent les choix fonctionnels et éditoriaux déjà définis pour le projet.

MCP Designer dispose d’une fonction de validation statique du thème.

L’agent peut l’utiliser pour contrôler la syntaxe (blocs, balises, filtres, etc.) et la cohérence des fichiers avant leur déploiement. Il peut ainsi repérer certaines erreurs dans les fichiers XML ou identifier des incohérences entre les fichiers du thème.

Vous pouvez simplement lui demander :

• Valide le thème et explique-moi les erreurs trouvées

Cette validation constitue une vérification supplémentaire, mais elle ne remplace pas le contrôle du résultat dans Kiubi.

Après chaque intervention, l’intégrateur doit vérifier :

• les fichiers modifiés
• le résultat dans le site
• le fonctionnement dans le back-office
• la conformité avec la stratégie de contenu
• le comportement responsive
• les éventuelles interactions JavaScript et CSS

MCP Designer travaille sur les fichiers locaux du thème.

Il ne remplace pas kiubi-sync, qui reste l’outil chargé de synchroniser les fichiers entre l’environnement local et le serveur Kiubi.

Les deux outils ont des rôles distincts :

• MCP Designer fournit à l’agent le contexte et les capacités nécessaires pour accompagner l’intégration du thème
• kiubi-sync synchronise les fichiers du thème avec le site Kiubi

Consultez la documentation de kiubi-sync pour connaître son installation, sa configuration et son utilisation.

MCP Designer sait travailler avec les différents répertoires de langues présents dans un thème Kiubi.

Il est toutefois préférable de ne conserver dans le thème que les répertoires réellement utiles au projet. Lorsqu’un thème contient plusieurs langues inutilisées, l’agent peut être amené à analyser ou à modifier plusieurs répertoires simultanément, sans que cela soit nécessaire.

Par exemple, si le site est uniquement disponible en français, il est recommandé de ne conserver que le répertoire correspondant à cette langue.

Si certains répertoires doivent rester présents dans le thème sans être utilisés pour les travaux en cours, précisez à l’agent de les exclure. Cette consigne peut être ajoutée dans le fichier d’instructions du projet, comme AGENTS.md, CLAUDE.md, ou son équivalent selon l’agent utilisé.

Certains widgets complexes ne sont pas encore aussi simples à créer ou à manipuler avec l’agent.

C’est notamment le cas :

• des menus déroulants
• des méga-menus
• des navigations dont la structure HTML dépend fortement de l’arborescence et du comportement JavaScript et CSS

Pour ces éléments, la meilleure approche consiste à partir d’un widget déjà fonctionnel, par exemple celui du thème par défaut utilisé comme base pour le projet, puis à demander à l’agent de le personnaliser.

Vous pouvez par exemple lui demander :

• À partir du widget de menu vertical existant, adapte le menu déroulant au nouveau thème sans modifier son fonctionnement

Cette méthode permet de conserver une base fonctionnelle tout en utilisant l’agent pour adapter le HTML, les classes CSS, les styles et les interactions au projet.