What if your coding agent could read WordPress files, execute PHP, and manage sites directly in your browser? The @wp-playground/mcp package bridges AI coding agents and a browser-based Playground instance through the Model Context Protocol (MCP). Run one command to connect. No configuration needed in Playground.
How it works
The MCP server runs as a local Node.js process using stdio transport. Your AI client communicates with it directly, and the server forwards commands to a Playground instance running in your browser through a WebSocket connection.
AI Client (stdio) --> MCP Server (Node.js) --> WebSocket --> Browser (Playground)When you open Playground in your browser, a WebSocket links the browser tab to the MCP server. The server assigns a random local port at startup and passes it to the browser through the URL’s mcp-port parameter. The server translates your agent’s tool calls into direct Playground actions: reading files, executing PHP, and navigating pages.
The connection stays local to your machine. Origin restrictions and token-based authentication at startup prevent unauthorized access from other sites and browser extensions.
Set up the MCP server
Claude Code
claude mcp add --transport stdio --scope user wordpress-playground -- npx -y @wp-playground/mcpThe --scope user flag makes the server available across all your projects. Use --scope local to restrict it to the current project only.
Codex
Codex supports stdio MCP servers through the codex mcp command. Add WordPress Playground as a user-level MCP server with:
codex mcp add wordpress-playground -- npx -y @wp-playground/mcpThen ask Codex to open the Playground site. The MCP server provides the exact Playground URL when it connects, including the local mcp-port parameter needed to link the browser tab to the MCP server.
JSON configuration
You can also configure the server manually. Add this to your .mcp.json (Claude Code / Claude Desktop):
{
"mcpServers": {
"wordpress-playground": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@wp-playground/mcp"]
}
}
}After setup, open Playground in your browser. The agent provides the exact URL when it connects.
Three practical workflows
Once connected, your agent manages WordPress through natural language.
1. Install, test and build a plugin
Ask your agent to install and verify a plugin without touching the WordPress admin:
“Install the Classic Editor plugin on my Playground site and confirm it deactivates the block editor.”
The agent uses playground_execute_php to call wp_remote_get, download the plugin zip, and extract it to wp-content/plugins/. It activates the plugin with activate_plugin(), then fires playground_request against the post editor URL to confirm the classic interface loads. You see each step in your agent’s output.
2. Debug site options with PHP
Need to check what a plugin stored in the database? Skip the admin UI and query wp_options directly:
“Show me all autoloaded options that contain ‘woocommerce’ in the option name.”
The agent runs playground_execute_php with a short script:
global $wpdb;
$results = $wpdb->get_results(
"SELECT option_name, option_value FROM $wpdb->options
WHERE option_name LIKE '%woocommerce%'"
);
print_r($results);Playground uses SQLite instead of MySQL, so avoid MySQL-specific column values in your queries. The $wpdb abstraction handles the translation, but filter conditions like autoload = 'yes' may not return results as expected.
The output appears in your conversation. No phpMyAdmin or database client needed.
3. Scaffold theme files
Building a child theme from scratch involves creating directories, writing template files, and registering the theme. Let the agent handle the boilerplate:
“Create a child theme of Twenty Twenty-Five called ‘Studio Child’ with a custom header template part and a front-page template.”
The agent calls playground_mkdir to create the theme directory, playground_write_file to generate style.css, theme.json, and template files, then playground_execute_php to verify the theme appears in the admin. If a file contains an error, the agent reads it back with playground_read_file and corrects the mistake in the next step.
Available tools
The MCP server exposes these tools to your agent:
- Site management:
playground_get_website_url,playground_list_sites,playground_open_site,playground_rename_site,playground_save_site - Code execution:
playground_execute_php,playground_request - Navigation:
playground_navigate,playground_get_current_url,playground_get_site_info - Filesystem:
playground_read_file,playground_write_file,playground_list_files,playground_mkdir,playground_delete_file,playground_delete_directory,playground_file_exists
Share your feedback
Try the @wp-playground/mcp package and tell us what you build. Share your experience in the #playground channel on Making WordPress Slack or open an issue on GitHub to suggest new tools.
Props to @berislavgrgicak for building the MCP server and reviewing the post.