What if your coding agent could read WordPress files, execute PHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. https://www.php.net/manual/en/preface.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 A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org’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.
Gemini CLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress.
gemini mcp add wordpress-playground npx -y @wp-playground/mcpThe default transport is stdio. Use -s user for a user-wide scope.
JSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. 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"]
}
}
}Gemini CLI uses the same structure in settings.json but without the "type" field.
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 A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
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 Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 UI is an acronym for User Interface – the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. 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 MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com, so avoid MySQL-specific column values in your queries. The $wpdb abstraction handles the translation, but filter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. 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 A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/ 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 The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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.
Leave a Reply