Utiliser l'IA pour créer des thèmes personnalisés (Serveur MCP)

Aperçu

Larapen est livré avec un serveur MCP (Model Context Protocol) qui permet aux assistants IA (comme Claude, ChatGPT, Cursor ou tout outil compatible MCP) de comprendre et de travailler avec le système de thèmes de Larapen. Au lieu de lire manuellement la documentation et d'étudier les thèmes existants, l'IA se connecte directement à votre projet et obtient des informations structurées sur l'architecture des thèmes, les conventions de fichiers, les règles de validation et plus encore.

Cela signifie que vous pouvez décrire le thème que vous souhaitez en langage naturel: et l'IA générera des fichiers de thème valides et complets qui respectent toutes les conventions de Larapen.

À qui s'adresse ce guide ?

1. Clients souhaitant un thème unique

Vous n'avez pas besoin d'être développeur. Ouvrez votre assistant IA (Claude Desktop, Cursor, VS Code avec Copilot, etc.), assurez-vous que le serveur MCP est configuré, et décrivez ce que vous souhaitez :

« J'ai besoin d'un thème sombre et luxueux appelé nightfall avec des accents dorés, une typographie élégante en serif et un header transparent. Je veux qu'il prenne en charge les pages portfolio et équipe. »

L'IA utilisera les outils MCP pour comprendre les exigences de Larapen et générera tous les fichiers nécessaires: theme.json, config.php, SCSS, JavaScript, vues Blade et templates de sections: le tout correctement structuré et conforme aux conventions de la plateforme.

2. Freelances et agences créant des thèmes pour leurs clients

Si vous créez des sites web pour vos clients sur Larapen, le serveur MCP accélère considérablement votre flux de travail :

• Scaffolding en quelques secondes: Générez un squelette de thème complet avec une seule instruction au lieu de créer manuellement des dizaines de fichiers.
• Étude des thèmes existants: Demandez à l'IA de comparer comment différents thèmes implémentent la même vue, ou de vous montrer la structure exacte de n'importe quel fichier de thème.
• Validation avant livraison: Exécutez l'outil de validation intégré pour détecter les fichiers manquants, les manifestes invalides ou les chemins d'assets incorrects avant de livrer à votre client.
• Qualité constante: L'IA applique automatiquement les conventions Larapen : pas de jQuery, intégration Bootstrap correcte, chemins Vite valides, support du mode sombre, etc.

Configuration du serveur MCP

Étape 1 : Installer les dépendances

Naviguez vers le répertoire mcp-server/ dans votre projet Larapen et installez les dépendances PHP :

cd mcp-server
composer install

Étape 2 : Configurer votre assistant IA

Créez ou modifiez le fichier .mcp.json dans le répertoire racine de votre projet Larapen (pas à l'intérieur de mcp-server/) :

{
    "mcpServers": {
        "larapen": {
            "command": "php",
            "args": ["mcp-server/server.php"],
            "cwd": "."
        }
    }
}

Cela indique à votre assistant IA compatible MCP comment lancer le serveur Larapen. L'emplacement exact dépend de votre outil :

Étape 3 : Vérifier la connexion

Ouvrez votre assistant IA et demandez quelque chose comme :

« Liste tous les thèmes Larapen installés »

Si le serveur MCP est correctement configuré, l'IA appellera l'outil list_themes et retournera la liste de vos thèmes installés avec leurs manifestes et le nombre de fichiers. Si vous voyez cela, tout fonctionne correctement.

Ce que l'IA peut faire avec le serveur MCP

Le serveur MCP expose 13 outils et 4 ressources que l'IA utilise en arrière-plan. Vous n'avez pas besoin de connaître les noms des outils: décrivez simplement ce que vous voulez et l'IA choisira automatiquement les bons outils.

Outils disponibles

Ressources disponibles (données de référence)

Exemple de flux de travail : Créer un thème de zéro

Voici une conversation typique que vous pourriez avoir avec votre assistant IA :

Décrivez votre vision

Vous : « Je veux créer un nouveau thème Larapen appelé 'nightfall'. Il doit avoir un aspect sombre et luxueux: fond bleu marine profond, accents dorés, titres en serif élégant (Playfair Display), texte du corps en sans-serif propre (Lato). Le header doit être transparent avec un effet sticky au défilement. Je veux un footer moderne et minimaliste. »

L'IA analyse votre projet

En arrière-plan, l'IA automatiquement :

1. Lit le guide de développement de thèmes pour comprendre toutes les exigences
2. Liste les thèmes existants pour voir ce qui est déjà installé
3. Étudie le layout principal, le header et le footer du thème par défaut
4. Vérifie quels add-ons sont installés (pour créer les templates de pages correspondants)
5. Examine la configuration Vite pour les chemins d'assets corrects

L'IA génère votre thème

L'IA génère tous les fichiers du thème avec vos spécifications appliquées :

• theme.json: Manifeste avec le nom, la description et les paramètres de couleurs de votre thème
• config.php: Paramètres avec vos couleurs (#0a0f1e, #d4a853), polices et préférences de mise en page
• assets/scss/theme.scss: SCSS complet avec import Bootstrap, propriétés personnalisées, styles mode sombre, styles header/footer/sections
• assets/js/theme.js: JS complet avec scroll du header, menu mobile, basculement mode sombre, retour en haut, animations d'apparition
• views/layouts/master.blade.php: Layout HTML complet avec toutes les directives Blade requises
• views/partials/header.blade.php: Header transparent avec comportement sticky au défilement
• views/partials/footer.blade.php: Footer sombre et minimaliste
• Tous les templates de pages et de sections requis

Vous affinez

Vous : « La section hero est bien, mais je veux que les boutons CTA aient une bordure en dégradé doré au lieu d'un fond plein. Aussi, mets la section témoignages en disposition cartes au lieu du carrousel. »

L'IA lit les fichiers actuels et effectue des modifications ciblées tout en gardant le reste cohérent.

Validation

Vous : « Valide mon thème nightfall pour vérifier que tout est correct. »

L'IA exécute 10 catégories de vérifications de validation et signale les erreurs ou avertissements :

{
    "theme": "nightfall",
    "valid": true,
    "summary": "0 errors, 2 warnings, 18 checks passed",
    "errors": [],
    "warnings": [
        "Missing section templates (will fall back to default theme): countdown, before-after",
        "Missing recommended view: views/layouts/auth.blade.php"
    ],
    "passed": [
        "theme.json: Valid manifest structure",
        "config.php: Valid configuration",
        "View exists: views/layouts/master.blade.php",
        "View exists: views/partials/header.blade.php",
        "..."
    ]
}

Compilation et activation

Vous : « Compile les assets et dis-moi comment activer le thème. »

L'IA vous rappelle d'exécuter :

npx vite build

Puis allez dans Apparence → Thèmes dans le panneau d'administration, cliquez sur « Synchroniser » pour découvrir le nouveau thème, et cliquez sur « Activer ».

Comment le flux de travail fonctionne en pratique

  Vous (langage naturel)            Assistant IA                     Serveur MCP
  ────────────────────────     ────────────────────────        ────────────────────────

  « Crée un thème sombre   ──→  Appelle get_theme_               Lit les fichiers du
   luxueux appelé nightfall »    development_guide,       ←──    projet et retourne les
                                   list_themes,                     données structurées
                                   list_addons

                              ──→  Appelle scaffold_theme    ──→   Crée les répertoires
                                   avec vos spécifications         et fichiers de base

  « Mets des bordures      ──→   Appelle read_theme_file   ──→  Retourne le contenu
   dorées en dégradé »           puis modifie le SCSS            du fichier

  « Valide mon thème »    ──→   Appelle validate_theme    ──→  Exécute 10 vérifications
                                                                   de validation

  « Mes assets sont-ils   ──→   Appelle check_theme_      ──→  Vérifie le manifeste
   compilés ? »                  assets_built                    Vite

Vérifications de validation expliquées

Quand vous demandez à l'IA de valider votre thème, elle effectue ces vérifications :

Conseils pour de meilleurs résultats

• Soyez précis sur votre vision de design: Mentionnez les couleurs (codes hex), les polices (noms Google Fonts), le style de mise en page (large/encadré), le comportement du header (sticky/transparent) et l'ambiance (luxe, ludique, corporate, minimaliste).
• Référencez les thèmes existants: Dites « similaire au thème elegant mais avec une palette de couleurs plus sombre »: l'IA étudiera d'abord ce thème.
• Demandez la validation tôt et souvent: Lancez la validation après le scaffolding et à nouveau après les modifications.
• Itérez en conversation: L'IA se souvient du contexte, vous pouvez donc dire « agrandis le header » ou « change la couleur d'accent en corail » sans tout répéter.
• Compilez toujours après les modifications: N'oubliez pas d'exécuter npx vite build après tout changement de fichier SCSS ou JS.