Use o WordPress Playground com assistentes de IA através do MCP

O servidor MCP do WordPress Playground permite que um assistente de IA se conecte a um site real do Playground em execução no seu navegador. Depois que a conexão é estabelecida, você pode pedir ao assistente para navegar pelo WordPress, inspecionar páginas, reproduzir problemas e explicar o que encontra.

Use este guia para configurar o servidor MCP e trabalhar com o Playground usando linguagem natural. Para saber mais sobre a arquitetura, consulte Connect AI coding agents to WordPress Playground with MCP.

O MCP é mais útil quando o próprio site importa: um Playground salvo, um site persistente baseado no navegador, um site no estilo My WordPress ou uma demonstração em que você quer que o assistente atue como um controle remoto do navegador. Se você estiver trabalhando a partir de um agente de código baseado em terminal e precisar principalmente de automação local, a Playground CLI costuma ser mais simples e menos ambígua.

O que o MCP adiciona ao Playground

O MCP, ou Model Context Protocol, dá ao seu assistente de IA controle sobre o site do Playground aberto no seu navegador. Em vez de apenas descrever uma tarefa, o assistente pode agir sobre o site:

• Abrir a URL exata do Playground necessária para se conectar ao servidor MCP
• Listar os seus sites do Playground disponíveis
• Abrir, renomear ou salvar um site do Playground
• Alternar entre sites do Playground gerenciados pelo navegador
• Navegar até URLs do painel administrativo e do front-end do WordPress
• Seguir redirecionamentos e informar a URL final
• Fazer solicitações autenticadas à API REST do WordPress
• Ler e gravar arquivos dentro do sistema de arquivos do Playground
• Executar PHP dentro do site do Playground
• Solicitar páginas e inspecionar a resposta

Isso é especialmente útil quando a tarefa depende do estado do navegador: telas administrativas com sessão iniciada, páginas de configurações, solicitações à API REST e redirecionamentos.

Bons casos de uso para o MCP

Use o MCP quando você quiser que um assistente trabalhe com um site WordPress visível e gerenciado pelo navegador:

• Orientar você por uma tela de configurações: "Mostre-me como configurar esta opção do WooCommerce."
• Criar uma demonstração baseada no navegador: "Crie uma página de receita simples e mostre-me o resultado."
• Criar um tema de blocos: "Crie um tema de blocos com um cabeçalho personalizado e um modelo de página inicial, ative-o e mostre o resultado."
• Trabalhar com um site persistente: "Use o meu site do Playground salvo" ou "Use o site My WordPress conectado à minha assinatura."
• Reproduzir um bug: "Siga estes passos e resuma o erro."
• Testar um redirecionamento ou uma URL: "Abra esta página e diga-me onde o navegador termina."
• Inspecionar um site em execução: "Encontre a tela administrativa correspondente a este recurso do plugin."

O MCP é menos útil quando o trabalho é principalmente automação local, como executar repetidamente o mesmo Blueprint, montar um plugin a partir do seu sistema de arquivos ou testar uma matriz de versões. Use a Playground CLI para esses fluxos de trabalho ou escreva testes com runCli.

Antes de começar

Você precisa de:

• Node.js e npm instalados no mesmo computador que o seu navegador, com npx disponível para o seu assistente de IA
• Um assistente de IA ou agente de código compatível com servidores MCP locais via stdio, configurado conforme as instruções abaixo

Você não precisa abrir o Playground nem criar um site antes de começar. Durante a conexão, seu assistente fornece a URL do Playground para abrir no navegador. A URL padrão inicia um site temporário que você pode usar para testes.

Salve as demonstrações importantes primeiro

Se você estiver preparando uma demonstração, peça ao seu assistente para salvar o site atual do Playground no armazenamento do navegador antes de fazer muitas alterações. Playgrounds salvos podem ser reabertos a partir do Painel de Lançamento do Playground.

Confirme qual site o assistente está usando

Você pode ter vários sites do Playground e várias abas de navegador conectadas. Você também pode conectar mais de um servidor ou ferramenta de automação de navegador ao mesmo assistente. Essa flexibilidade é útil, mas pode gerar confusão. Antes de fazer alterações, peça ao assistente para listar os sites conectados e confirmar o nome do site ativo.

Configure o servidor MCP

Escolha a configuração para o seu assistente de IA. O assistente inicia @wp-playground/mcp como um processo local e se comunica com ele via stdio.

Claude Code

Execute este comando no terminal:

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

Use --scope user para disponibilizar o servidor em todos os seus projetos ou --scope local apenas no projeto atual.

Codex

Execute este comando no terminal:

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

Configuração JSON

Para o Claude Code, adicione o conteúdo abaixo ao arquivo .mcp.json do seu projeto. Para o Claude Desktop, adicione-o ao arquivo claude_desktop_config.json. Se o arquivo já tiver um objeto mcpServers, adicione a entrada wordpress-playground a ele.

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

Depois de salvar a configuração, reinicie o assistente, se necessário, para carregar o servidor e siga as etapas de conexão abaixo. Você não precisa iniciar o servidor MCP separadamente.

Conecte um assistente de IA ao MCP do Playground

1. Abra o seu assistente de IA.

2. Peça a ele para se conectar ao WordPress Playground:

   Abra o WordPress Playground e conecte-o ao servidor MCP.

3. O assistente deve fornecer ou abrir uma URL do Playground que inclui um parâmetro mcp-port.

4. Abra essa URL no seu navegador caso o assistente não a abra automaticamente.

5. Peça ao assistente para listar os sites do Playground disponíveis:

   Liste os meus sites do Playground disponíveis e diga-me qual está ativo.

6. Escolha o site do Playground que você quer usar:

   Use o meu site de demonstração do WooCommerce salvo e abra o painel administrativo do WordPress.

Se o assistente disser que nenhuma aba do navegador está conectada, abra a URL do Playground MCP que ele fornece e tente novamente.

MCP vs CLI

O WordPress Playground tem dois produtos complementares: o site do Playground e a Playground CLI. O site é a experiência no navegador em playground.wordpress.net. A CLI é o ambiente local para fluxos de trabalho de desenvolvimento, scripts e CI.

A escolha depende do que você quer que o assistente de IA controle.

Com o MCP, o assistente pode fazer solicitações autenticadas à API REST do WordPress no site conectado sem configurar a autenticação manualmente. Ele também pode usar a ferramenta playground_navigate para alterar a página exibida no navegador e informar a URL final após os redirecionamentos.

Na CLI, solicitações HTTP equivalentes normalmente exigem uma ferramenta como curl e não são autenticadas, a menos que você configure a autenticação. A CLI também não controla a página exibida no navegador do usuário.