Se o seu agente de programação pudesse ler arquivos do WordPress, executar PHP e gerenciar sites diretamente no seu navegador? O pacote @wp-playground/mcp conecta agentes de código de IA e uma instância do Playground baseada no navegador através do Model Context Protocol (MCP). Execute um comando para conectar. Nenhuma configuração é necessária no Playground.
Como funciona
O servidor MCP roda como um processo local do Node.js utilizando o transporte stdio. O seu cliente de IA se comunica diretamente com ele, e o servidor encaminha os comandos para uma instância do Playground rodando no seu navegador por meio de uma conexão WebSocket.
Cliente de IA (stdio) –> Servidor MCP (Node.js) –> WebSocket –> Navegador (Playground)
Quando você abre o Playground no seu navegador, um WebSocket conecta a aba do navegador ao servidor MCP. O servidor atribui uma porta local aleatória na inicialização e a repassa para o navegador através do parâmetro de URL mcp-port. O servidor traduz as chamadas de ferramentas (tool calls) do seu agente em ações diretas no Playground: leitura de arquivos, execução de PHP e navegação pelas páginas.
A conexão permanece local na sua máquina. Restrições de origem e autenticação baseada em tokens na inicialização evitam o acesso não autorizado de outros sites e extensões do navegador.
Configure o servidor MCP
Claude Code
claude mcp add --transport stdio --scope user wordpress-playground -- npx -y @wp-playground/mcp
A flag --scope user torna o servidor disponível em todos os seus projetos. Use --scope local para restringi-lo apenas ao projeto atual.
Gemini CLI
gemini mcp add wordpress-playground npx -y @wp-playground/mcp
O transporte padrão é o stdio. Use -s user para um escopo de nível de usuário.
Configuração JSON
Você também pode configurar o servidor manualmente. Adicione o seguinte código ao seu .mcp.json (Claude Code / Claude Desktop):
{
"mcpServers": {
"wordpress-playground": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@wp-playground/mcp"]
}
}
}
A Gemini CLI usa a mesma estrutura no arquivo settings.json, mas sem o campo "type".
Após a configuração, abra o Playground no seu navegador. O agente fornecerá a URL exata assim que se conectar.
Três fluxos de trabalho práticos
Depois de conectado, o seu agente gerencia o WordPress através de linguagem natural.
1. Instalar, testar e fazer o build de um plugin
Peça ao seu agente para instalar e verificar um plugin sem precisar tocar no painel de administração do WordPress:
“Instale o plugin Classic Editor no meu site do Playground e confirme se ele desativa o editor de blocos.”
O agente utiliza o playground_execute_php para chamar a função wp_remote_get, baixar o arquivo zip do plugin e extraí-lo para a pasta wp-content/plugins/. Em seguida, ele ativa o plugin usando activate_plugin() e dispara o playground_request na URL do editor de postagens para confirmar que a interface clássica foi carregada. Você consegue ver cada etapa no output (saída) do seu agente.
2. Depurar opções do site com PHP
Precisa verificar o que um plugin salvou no banco de dados? Pule a interface do admin e faça uma consulta (query) diretamente na tabela wp_options:
“Mostre-me todas as opções carregadas automaticamente (autoloaded) que contenham ‘woocommerce’ no nome da opção.”
O agente executa o playground_execute_php com um script curto:
global $wpdb;
$results = $wpdb->get_results(
"SELECT option_name, option_value FROM $wpdb->options WHERE option_name LIKE '%woocommerce%'"
);
print_r($results);
O Playground usa SQLite em vez de MySQL, portanto, evite usar valores de coluna específicos do MySQL nas suas consultas. A abstração do $wpdb cuida da tradução, mas condições de filtro como autoload = 'yes' podem não retornar os resultados esperados.
A saída aparece diretamente na sua conversa. Não é necessário usar o phpMyAdmin ou qualquer outro cliente de banco de dados.
3. Criar a estrutura de arquivos de um tema
Construir um tema filho (child theme) do zero envolve criar diretórios, escrever arquivos de template e registrar o tema. Deixe o agente cuidar de todo esse código base (boilerplate):
“Crie um tema filho (child theme) do Twenty Twenty-Five chamado ‘Studio Child’ com um template part de cabeçalho personalizado e um template de página inicial (front-page).”
O agente chama a ferramenta playground_mkdir para criar o diretório do tema, a playground_write_file para gerar o style.css, o theme.json e os arquivos de template, e depois usa a playground_execute_php para verificar se o tema aparece no painel de administração. Se um arquivo contiver algum erro, o agente faz a leitura dele com a playground_read_file e corrige o erro na etapa seguinte.
Ferramentas disponíveis
O servidor MCP expõe estas ferramentas ao seu agente:
- Gerenciamento de sites:
playground_get_website_url,playground_list_sites,playground_open_site,playground_rename_site,playground_save_site - Execução de código:
playground_execute_php,playground_request - Navegação:
playground_navigate,playground_get_current_url,playground_get_site_info - Sistema de arquivos:
playground_read_file,playground_write_file,playground_list_files,playground_mkdir,playground_delete_file,playground_delete_directory,playground_file_exists
Compartilhe seu feedback
Experimente o pacote @wp-playground/mcp e conte-nos o que você construiu. Compartilhe sua experiência no canal #playground no Making WordPress Slack ou abra uma issue noGitHub para sugerir novas ferramentas.
Props (agradecimentos) a @berislavgrgicak por criar o servidor MCP e revisar o post original.
Fonte: Wordpress Brasil