Modifier avec l’IA et MCP

Dans ce tutoriel, vous créez une section en la décrivant, vous l’affinez, vous laissez l’IA rédiger les textes de référencement et d’images, puis vous connectez Claude pour qu’il puisse modifier votre site depuis l’extérieur de l’éditeur. Il vous faut le rôle Editor, Admin ou Owner sur le site. Créer une clé API demande un propriétaire ou un administrateur de l’espace de travail.

Créer une section avec le panneau IA

1. Ouvrir le panneau

   Ouvrez une page dans l’éditeur et cliquez sur Ask AI en bas du canevas. L’en-tête du panneau indique sur quoi l’IA va travailler : Whole page quand rien n’est sélectionné.

2. Décrire la section

   Quand rien n’est sélectionné, le menu de tâche à côté de Send est réglé sur Generate. Tapez ce que vous voulez, par exemple :

   Ajoute une section de tarifs avec trois forfaits côte à côte : Free, Pro et Team. Chaque forfait a un nom, un prix, trois fonctionnalités et un bouton.

   Cliquez sur Send, ou appuyez sur ⌘↵.

3. La regarder travailler

   Le panneau liste chaque étape au moment où l’IA l’effectue, comme Inserted elements ou Created class. Rien ne change sur le canevas tant que l’IA n’a pas terminé ; ensuite, toute la modification arrive d’un coup. Cliquez sur Stop pour annuler : rien n’est appliqué.

Affiner le résultat

1. Sélectionner et demander

   Sélectionnez la section de tarifs. L’en-tête affiche maintenant 1 element selected et la tâche passe sur Edit. Demandez une modification :

   Empile les forfaits verticalement sur téléphone et fais ressortir le forfait Pro avec la couleur d’accent.

2. Utiliser vos propres styles

   L’IA connaît vos classes, vos jetons et vos composants. Nommez-les dans la demande pour garder la page cohérente, par exemple « utilise ma classe button-primary pour les boutons ».

3. Annuler toute une modification

   Ce n’est pas ce que vous vouliez ? Appuyez sur ⌘Z. Une demande à l’IA correspond à une seule étape d’annulation : toute la modification revient en arrière d’un coup. Essayez ensuite une demande plus précise.

Laisser l’IA rédiger les textes

1. Rédiger le texte alternatif

   Sélectionnez les images de la page. La tâche passe sur Alt text. Tapez « Décris chaque image pour les lecteurs d’écran » et cliquez sur Send.

2. Rédiger les textes de référencement

   Cliquez sur une zone vide du canevas, choisissez SEO dans le menu de tâche et tapez « Rédige un titre et une description de référencement pour cette page ». Le résultat apparaît dans la section SEO des paramètres de la page. Relisez-le et ajustez-le avant de publier.

Le menu de tâche propose aussi Binding, pour relier un élément à des données, et Workflow, pour ajouter de la logique à la page.

Connecter Claude avec MCP

MCP (Model Context Protocol) permet à un agent IA comme Claude de lire et de modifier vos sites depuis l’extérieur de l’éditeur. L’agent se connecte avec une clé API et utilise les mêmes outils que le panneau IA.

1. Créer une clé API

   Dans le panneau IA, cliquez sur l’icône de clé (API keys). Tapez un nom comme Claude Code, cochez Write pour que l’agent puisse faire des modifications, et cliquez sur Create.

2. Copier la clé

   La clé commence par mk_. Cliquez sur Copy maintenant : elle ne sera plus affichée. Conservez-la en lieu sûr, par exemple dans les réglages de secrets de votre agent.

3. Ajouter le serveur à votre agent

   L’adresse MCP est l’hôte MCP de votre installation Malla suivi de /mcp, par exemple https://mcp.example.com/mcp. Envoyez la clé comme jeton bearer. Dans Claude Code :

   bash

   claude mcp add --transport http malla https://mcp.example.com/mcp \
     --header "Authorization: Bearer mk_your_key"
   

   Dans les autres clients MCP, ajoutez un serveur HTTP avec la même adresse et un en-tête Authorization avec la même valeur.

4. Essayer une lecture

   Demandez à votre agent « Liste mes sites Malla », puis « Liste les pages du site Demo ». Il utilise les outils list_sites et list_pages.

5. Faire une modification

   Gardez la page ouverte dans l’éditeur et demandez : « Ajoute une section FAQ avec trois questions sous la section de tarifs de la page d’accueil. » La section apparaît sur le canevas sous vos yeux, et toute autre personne qui a la page ouverte la voit aussi.

Demandes à essayer

• « Transforme cette rangée en grille de trois colonnes sur ordinateur et d’une colonne sur téléphone. »
• « Ajoute une section de témoignages avec trois citations, en utilisant ma classe de carte. »
• « Agrandis le titre du hero et ajoute plus d’espace au-dessus du bouton. »
• « Rédige le texte alternatif de ces images. »
• Via MCP : « Montre-moi les classes et les jetons de mon site », puis « Restylise le pied de page avec ces jetons. »

Ce que vous avez appris

• Le panneau IA travaille sur la sélection, ou sur toute la page quand rien n’est sélectionné, et chaque demande correspond à une étape d’annulation.
• Le menu de tâche choisit le type de modification : Generate, Edit, Binding, Workflow, Alt text ou SEO.
• Une clé API connecte un agent au serveur MCP ; elle agit en votre nom, et Write décide si elle peut faire des modifications.

Lisez les guides sur lesquels ce tutoriel s’appuie :