Ir al contenido principal

Usa WordPress Playground con asistentes de IA mediante MCP

El servidor MCP de WordPress Playground permite que un asistente de IA se conecte a un sitio real de Playground que se ejecuta en tu navegador. Una vez establecida la conexión, puedes pedirle al asistente que navegue por WordPress, inspeccione páginas, reproduzca problemas y explique lo que encuentra.

Usa esta guía para configurar el servidor MCP y trabajar con Playground mediante lenguaje natural. Para conocer la arquitectura, consulta Connect AI coding agents to WordPress Playground with MCP.

MCP es más útil cuando el propio sitio importa: un Playground guardado, un sitio persistente respaldado por el navegador, un sitio del estilo My WordPress o una demostración en la que quieres que el asistente actúe como un mando a distancia del navegador. Si trabajas desde un agente de código basado en terminal y necesitas principalmente automatización local, la CLI de Playground suele ser más sencilla y menos ambigua.

Qué aporta MCP a Playground​

MCP, o Model Context Protocol, le da a tu asistente de IA control sobre el sitio de Playground que está abierto en tu navegador. En lugar de solo describir una tarea, el asistente puede actuar sobre el sitio:

  • Abrir la URL exacta de Playground necesaria para conectarse al servidor MCP
  • Listar tus sitios de Playground disponibles
  • Abrir, renombrar o guardar un sitio de Playground
  • Cambiar entre sitios de Playground gestionados por el navegador
  • Navegar a las URL del administrador y de la parte pública de WordPress
  • Seguir redirecciones e informar de la URL final
  • Realizar peticiones autenticadas a la API REST de WordPress
  • Leer y escribir archivos dentro del sistema de archivos de Playground
  • Ejecutar PHP dentro del sitio de Playground
  • Solicitar páginas e inspeccionar la respuesta

Esto es especialmente útil cuando la tarea depende del estado del navegador: pantallas de administración con la sesión iniciada, páginas de ajustes, peticiones a la API REST y redirecciones.

Buenos casos de uso para MCP​

Usa MCP cuando quieras que un asistente trabaje con un sitio de WordPress visible y gestionado por el navegador:

  • Guiarte por una pantalla de ajustes: «Muéstrame cómo configurar esta opción de WooCommerce.»
  • Crear una demostración basada en el navegador: «Crea una página de recetas sencilla y muéstrame el resultado.»
  • Crear un tema de bloques: «Crea un tema de bloques con una cabecera personalizada y una plantilla de portada, actívalo y muéstrame el resultado.»
  • Trabajar con un sitio persistente: «Usa mi sitio de Playground guardado» o «Usa el sitio My WordPress conectado a mi suscripción.»
  • Reproducir un error: «Sigue estos pasos y resume el error.»
  • Probar una redirección o URL: «Abre esta página y dime dónde acaba el navegador.»
  • Inspeccionar un sitio en ejecución: «Encuentra la pantalla de administración que corresponde a esta función del plugin.»

MCP es menos útil cuando el trabajo consiste principalmente en automatización local, como ejecutar el mismo Blueprint repetidamente, montar un plugin desde tu sistema de archivos o probar una matriz de versiones. Usa la CLI de Playground para esos flujos de trabajo o escribe pruebas con runCli.

Antes de empezar​

Necesitas:

No necesitas abrir Playground ni crear un sitio de antemano. Durante la conexión, tu asistente proporciona la URL de Playground que debes abrir en el navegador. La URL predeterminada inicia un sitio temporal que puedes usar para hacer pruebas.

Guarda primero las demostraciones importantes

Si estás preparando una demostración, pídele a tu asistente que guarde el sitio actual de Playground en el almacenamiento del navegador antes de hacer muchos cambios. Los Playgrounds guardados pueden reabrirse desde el Panel de Lanzamiento de Playground.

Confirma qué sitio está usando el asistente

Puedes tener varios sitios de Playground y varias pestañas del navegador conectadas. También puedes conectar más de un servidor o herramienta de automatización del navegador al mismo asistente. Esa flexibilidad es útil, pero puede generar confusión. Antes de hacer cambios, pídele al asistente que liste los sitios conectados y confirme el nombre del sitio activo.

Configura el servidor MCP​

Elige la configuración para tu asistente de IA. El asistente inicia @wp-playground/mcp como un proceso local y se comunica con él mediante stdio.

Claude Code​

Ejecuta este comando en tu terminal:

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

Usa --scope user para que el servidor esté disponible en todos tus proyectos, o --scope local solo para el proyecto actual.

Codex​

Ejecuta este comando en tu terminal:

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

Configuración JSON​

Para Claude Code, añade lo siguiente a .mcp.json en tu proyecto. Para Claude Desktop, añádelo a claude_desktop_config.json. Si el archivo ya tiene un objeto mcpServers, añade la entrada wordpress-playground a ese objeto.

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

Después de guardar la configuración, reinicia tu asistente si es necesario para cargar el servidor y sigue los pasos de conexión que aparecen a continuación. No necesitas iniciar el servidor MCP por separado.

Conecta un asistente de IA al MCP de Playground​

  1. Abre tu asistente de IA.

  2. Pídele que se conecte a WordPress Playground:

    Abre WordPress Playground y conéctalo al servidor MCP.

  3. El asistente debería proporcionar o abrir una URL de Playground que incluya un parámetro mcp-port.

  4. Abre esa URL en tu navegador si el asistente no la abre automáticamente.

  5. Pídele al asistente que liste los sitios de Playground disponibles:

    Lista mis sitios de Playground disponibles y dime cuál está activo.

  6. Elige el sitio de Playground que quieres usar:

    Usa mi sitio de demostración de WooCommerce guardado y abre el escritorio de administración de WordPress.

Si el asistente indica que no hay ninguna pestaña del navegador conectada, abre la URL de Playground MCP que proporciona e inténtalo de nuevo.

MCP frente a CLI​

WordPress Playground tiene dos productos complementarios: el sitio web de Playground y la CLI de Playground. El sitio web es la experiencia en el navegador en playground.wordpress.net. La CLI es el entorno local para flujos de trabajo de desarrollo, scripts y CI.

La elección depende de qué quieras que controle el asistente de IA.

Con MCP, el asistente puede realizar peticiones autenticadas a la API REST de WordPress en el sitio conectado sin configurar manualmente la autenticación. También puede usar la herramienta playground_navigate para cambiar la página que se muestra en el navegador e informar de la URL final después de las redirecciones.

Desde la CLI, las peticiones HTTP equivalentes suelen requerir una herramienta como curl y no están autenticadas, a menos que configures manualmente la autenticación. La CLI tampoco controla la página que se muestra en el navegador del usuario.