Utiliser WordPress Playground avec des assistants IA via le MCP

Le serveur MCP de WordPress Playground permet à un assistant IA de se connecter à un véritable site Playground exécuté dans votre navigateur. Une fois la connexion établie, vous pouvez demander à l'assistant de naviguer dans WordPress, d'inspecter des pages, de reproduire des problèmes et d'expliquer ce qu'il trouve.

Utilisez ce guide pour configurer le serveur MCP et travailler avec Playground en langage naturel. Pour en savoir plus sur l'architecture, consultez Connect AI coding agents to WordPress Playground with MCP.

Le MCP est particulièrement utile lorsque le site lui-même compte : un Playground sauvegardé, un site persistant adossé au navigateur, un site de type My WordPress ou une démonstration dans laquelle vous voulez que l'assistant agisse comme une télécommande du navigateur. Si vous travaillez à partir d'un agent de code basé sur le terminal et que vous avez surtout besoin d'automatisation locale, la CLI Playground est généralement plus simple et moins ambiguë.

Ce que le MCP apporte à Playground

Le MCP, ou Model Context Protocol, donne à votre assistant IA le contrôle du site Playground ouvert dans votre navigateur. Au lieu de simplement décrire une tâche, l'assistant peut agir sur le site :

• Ouvrir l'URL Playground exacte nécessaire pour se connecter au serveur MCP
• Lister vos sites Playground disponibles
• Ouvrir, renommer ou sauvegarder un site Playground
• Basculer entre les sites Playground gérés par le navigateur
• Naviguer vers les URL de l'administration et de la partie publique de WordPress
• Suivre les redirections et signaler l'URL finale
• Effectuer des requêtes authentifiées à l'API REST de WordPress
• Lire et écrire des fichiers dans le système de fichiers de Playground
• Exécuter du PHP dans le site Playground
• Demander des pages et inspecter la réponse

C'est particulièrement utile lorsque la tâche dépend de l'état du navigateur : écrans d'administration avec une session ouverte, pages de réglages, requêtes vers l’API REST et redirections.

Bons cas d'usage pour le MCP

Utilisez le MCP lorsque vous voulez qu'un assistant travaille avec un site WordPress visible et géré par le navigateur :

• Vous guider à travers un écran de réglages : « Montre-moi comment configurer cette option WooCommerce. »
• Créer une démonstration dans le navigateur : « Construis une simple page de recette et montre-moi le résultat. »
• Créer un thème de blocs : « Crée un thème de blocs avec un en-tête personnalisé et un modèle de page d’accueil, active-le et montre-moi le résultat. »
• Travailler avec un site persistant : « Utilise mon site Playground sauvegardé » ou « Utilise le site My WordPress connecté à mon abonnement. »
• Reproduire un bogue : « Suis ces étapes et résume l'erreur. »
• Tester une redirection ou une URL : « Ouvre cette page et dis-moi où le navigateur aboutit. »
• Inspecter un site en cours d'exécution : « Trouve l'écran d'administration qui correspond à cette fonctionnalité de l'extension. »

Le MCP est moins utile lorsque le travail consiste surtout en de l'automatisation locale, comme exécuter le même Blueprint de façon répétée, monter une extension depuis votre système de fichiers ou tester une matrice de versions. Utilisez la CLI Playground pour ces flux de travail ou écrivez des tests avec runCli.

Avant de commencer

Il vous faut :

• Node.js et npm installés sur le même ordinateur que votre navigateur, avec npx accessible à votre assistant IA
• Un assistant IA ou un agent de code compatible avec les serveurs MCP locaux via stdio, configuré selon les instructions ci-dessous

Vous n'avez pas besoin d'ouvrir Playground ni de créer un site au préalable. Lors de la connexion, votre assistant fournit l'URL Playground à ouvrir dans votre navigateur. L'URL par défaut démarre un site temporaire que vous pouvez utiliser pour vos tests.

Sauvegardez d'abord les démonstrations importantes

Si vous préparez une démonstration, demandez à votre assistant de sauvegarder le site Playground actuel dans le stockage du navigateur avant d'effectuer de nombreuses modifications. Les Playgrounds sauvegardés peuvent être rouverts depuis le Panneau de lancement de Playground.

Confirmez quel site l'assistant utilise

Vous pouvez avoir plusieurs sites Playground et plusieurs onglets de navigateur connectés. Vous pouvez aussi connecter plus d'un serveur ou outil d'automatisation de navigateur au même assistant. Cette flexibilité est utile, mais elle peut prêter à confusion. Avant d'effectuer des modifications, demandez à l'assistant de lister les sites connectés et de confirmer le nom du site actif.

Configurer le serveur MCP

Choisissez la configuration de votre assistant IA. L'assistant démarre @wp-playground/mcp en tant que processus local et communique avec lui via stdio.

Claude Code

Exécutez cette commande dans votre terminal :

claude mcp add --transport stdio --scope user wordpress-playground -- npx -y @wp-playground/mcp

Utilisez --scope user pour rendre le serveur disponible dans tous vos projets, ou --scope local pour le projet actuel uniquement.

Codex

Exécutez cette commande dans votre terminal :

codex mcp add wordpress-playground -- npx -y @wp-playground/mcp

Configuration JSON

Pour Claude Code, ajoutez ce qui suit à .mcp.json dans votre projet. Pour Claude Desktop, ajoutez-le à claude_desktop_config.json. Si le fichier contient déjà un objet mcpServers, ajoutez-y l'entrée wordpress-playground.

{
	"mcpServers": {
		"wordpress-playground": {
			"command": "npx",
			"args": ["-y", "@wp-playground/mcp"]
		}
	}
}

Après avoir enregistré la configuration, redémarrez votre assistant si nécessaire pour charger le serveur, puis suivez les étapes de connexion ci-dessous. Vous n'avez pas besoin de démarrer le serveur MCP séparément.

Connecter un assistant IA au MCP de Playground

1. Ouvrez votre assistant IA.

2. Demandez-lui de se connecter à WordPress Playground :

   Ouvre WordPress Playground et connecte-le au serveur MCP.

3. L'assistant devrait fournir ou ouvrir une URL Playground qui inclut un paramètre mcp-port.

4. Ouvrez cette URL dans votre navigateur si l'assistant ne l'ouvre pas automatiquement.

5. Demandez à l'assistant de lister les sites Playground disponibles :

   Liste mes sites Playground disponibles et dis-moi lequel est actif.

6. Choisissez le site Playground que vous voulez utiliser :

   Utilise mon site de démonstration WooCommerce sauvegardé et ouvre le tableau de bord d'administration de WordPress.

Si l'assistant indique qu'aucun onglet de navigateur n'est connecté, ouvrez l'URL Playground MCP qu'il fournit et réessayez.

MCP ou CLI

WordPress Playground propose deux produits complémentaires : le site web Playground et la CLI Playground. Le site web est l'expérience dans le navigateur sur playground.wordpress.net. La CLI est l'environnement local pour les flux de travail de développement, de script et de CI.

Le choix dépend de ce que vous voulez que l'assistant IA contrôle.

Avec MCP, l'assistant peut effectuer des requêtes authentifiées vers l'API REST de WordPress sur le site connecté, sans configurer manuellement l'authentification. Il peut également utiliser l'outil playground_navigate pour changer la page affichée dans le navigateur et indiquer l'URL finale après les redirections.

Depuis la CLI, des requêtes HTTP équivalentes nécessitent généralement un outil tel que curl et ne sont pas authentifiées, sauf si vous configurez vous-même l'authentification. La CLI ne contrôle pas non plus la page affichée dans le navigateur de l'utilisateur.