Coretik Block Generator MCP Server

Un serveur MCP (Model Context Protocol) qui permet de générer des blocs Coretik Page Builder complets à partir d'une description en langage naturel.

Ce que ça fait

Demandez simplement : "Crée un bloc Texte et image avec un titre H2, un wysiwyg et une image à droite" et le serveur génère tous les fichiers :

| Fichier | Chemin | |---------|--------| | Classe PHP | src/Services/PageBuilder/Blocks/Block/TextImageBlock.php | | Template HTML | templates/blocks/block/text-image.php | | SCSS | assets/styles/components/blocks/_text-image.scss | | Thumbnail ACF | assets/images/admin/acf/text-image.svg |

Prérequis

• Node.js ≥ 18
• Un projet WordPress avec Coretik Page Builder installé

Installation

npm install -g coretik-block-generator-mcp

Ou utilisez directement via npx sans installation (voir configuration ci-dessous).

Configuration

Pour les projets wp-cubi

Un fichier .mcp.json est inclus à la racine des projets wp-cubi. Il suffit d'adapter le chemin du thème dans la variable CORETIK_PROJECT_ROOT.

Pour Claude Desktop

Ajoutez dans ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) ou %APPDATA%\Claude\claude_desktop_config.json (Windows) :

{
  "mcpServers": {
    "coretik-blocks": {
      "command": "npx",
      "args": ["coretik-block-generator-mcp"],
      "env": {
        "CORETIK_PROJECT_ROOT": "/chemin/vers/votre-theme-wordpress"
      }
    }
  }
}

Pour VS Code (avec extension MCP)

Dans .vscode/mcp.json à la racine de votre projet :

{
  "servers": {
    "coretik-blocks": {
      "command": "npx",
      "args": ["coretik-block-generator-mcp"],
      "env": {
        "CORETIK_PROJECT_ROOT": "${workspaceFolder}/web/app/themes/mon-theme"
      }
    }
  }
}

Pour Claude Code

Dans .mcp.json à la racine de votre projet :

{
  "mcpServers": {
    "coretik-blocks": {
      "command": "npx",
      "args": ["coretik-block-generator-mcp"],
      "env": {
        "CORETIK_PROJECT_ROOT": "./web/app/themes/mon-theme"
      }
    }
  }
}

Ou via la CLI :

claude mcp add coretik-blocks \
  npx coretik-block-generator-mcp \
  -e CORETIK_PROJECT_ROOT=./web/app/themes/mon-theme

Variables d'environnement

| Variable | Défaut | Description | |----------|--------|-------------| | CORETIK_PROJECT_ROOT | Répertoire courant | Racine du thème WordPress | | CORETIK_ROOT_NAMESPACE | App\Services\PageBuilder\Blocks | Namespace PHP des blocs | | CORETIK_BLOCKS_PHP_DIR | src/Services/PageBuilder/Blocks | Dossier des classes PHP | | CORETIK_TEMPLATES_DIR | templates/blocks | Dossier des templates | | CORETIK_SCSS_DIR | assets/styles/components/blocks | Dossier des fichiers SCSS | | CORETIK_THUMBNAILS_DIR | assets/images/admin/acf | Dossier des thumbnails admin | | CORETIK_ACF_ADMIN_DIR | templates/acf | Dossier des fichiers admin ACF |

Outils disponibles

get_conventions

Renvoie les conventions et patterns de code Coretik Page Builder. L'IA appelle cet outil en premier pour comprendre la structure attendue.

scan_blocks

Analyse le projet et liste tous les blocs existants avec leur type, leur nom et l'état de leurs fichiers (template ✓/✗, SCSS ✓/✗).

read_block

Lit tous les fichiers d'un bloc existant (PHP, template, SCSS) pour s'en inspirer.

generate_block

Génère les 4 fichiers d'un nouveau bloc. Paramètres :

• name : Nom en kebab-case (text-image)
• label : Label lisible ("Texte et image")
• type : component, block, ou composite
• fields : Définition des champs ACF
• components : Sous-composants (pour les composites)
• dryRun : Prévisualiser sans écrire (true/false)

get_project_config

Affiche la configuration courante du serveur et vérifie l'existence des dossiers.

Exemples d'utilisation

Scénario 1 : Bloc simple via conversation

Vous : Crée un bloc "Hero banner" avec un titre, un sous-titre, une image de fond et un bouton CTA.

L'IA va :

1. Appeler get_conventions pour charger les patterns
2. Appeler scan_blocks pour voir le style existant
3. Appeler generate_block avec les bons champs ACF
4. Vous confirmer les fichiers créés

Scénario 2 : Bloc composite

Vous : J'ai besoin d'un bloc FAQ composé d'un TitleComponent et d'un repeater de questions/réponses.

Scénario 3 : Dry-run pour valider

Vous : Montre-moi le code que tu génèrerais pour un bloc "Témoignages" avec photo, nom, rôle et citation, sans écrire les fichiers.

Scénario 4 : S'inspirer d'un bloc existant

Vous : Lis le bloc block.hero et crée un bloc similaire mais avec une vidéo en fond au lieu d'une image.

Structure des champs supportés

Le générateur supporte tous les types de champs ACF courants :

text, textarea, wysiwyg, image, file, gallery, number, url, email,
link, oembed, true_false, radio, select, checkbox, repeater, group,
post_object, relationship, page_link, color_picker

Chaque champ accepte les options : required, instructions, defaultValue, returnFormat, choices, width, conditional, subFields (pour group/repeater).

Développement

# Mode watch pendant le développement
npm run dev

# Tester le serveur (affiche la config)
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | node dist/index.js

Roadmap

• [ ] Support de l'analyse de maquettes (image → bloc)
• [ ] Génération des fichiers ACF admin (CSS/JS preview)
• [ ] Import/export de définitions de blocs (JSON)
• [ ] Intégration WP-CLI pour wp page-builder build-block-types

Licence

GPL-3.0 — Compatible avec Coretik et WordPress.