The WordPress Playground team just released the @wp-playground/mcp package, and it effectively turns your browser-based environment into a programmable sandbox. By leveraging the Model Context Protocol (MCP), you can now connect AI coding agents to WordPress Playground directly, allowing them to read files, execute PHP, and manipulate the database without you ever clicking a mouse. This isn’t just a “cool demo”—it’s a massive shift in how we handle local development and automated testing.
If you’ve been following my thoughts on WordPress Playground permanent instances, you know I’m a fan of zero-config dev environments. However, the manual step of “telling” an AI what to fix and then “pasting” that code into the browser was always the bottleneck. This bridge fixes that.
How the MCP Bridge Works
The architecture is surprisingly pragmatic. Instead of some bloated cloud middleware, the MCP server runs as a local Node.js process using stdio transport. Your AI client (like Claude Code or Gemini CLI) talks to this server, which then forwards those commands to the Playground instance in your browser via a WebSocket connection.
Basically, when you open Playground, the URL includes an mcp-port parameter. The server handles authentication and origin restrictions, ensuring that only your local agent can mess with your site. Specifically, it translates high-level natural language requests into specific tool calls: playground_execute_php, playground_write_file, or playground_request.
Quick Setup for Claude and Gemini
You can add this to your workflow with a single command. If you’re using Claude Code, the setup looks like this:
claude mcp add --transport stdio --scope user wordpress-playground -- npx -y @wp-playground/mcpFor those living in the Model Context Protocol ecosystem, this standardized transport means your agent immediately “sees” the WordPress filesystem and the PHP runtime as available tools.
Practical Workflows for AI Coding Agents in WordPress Playground
The “Gotcha” with standard AI assistants is context. They guess. With this bridge, they verify. Here are three ways I’ve started using this to save my own dev hours.
1. Headless Plugin Installation and Testing
Instead of manually downloading zips, you can simply tell your agent: “Install WooCommerce and confirm the ‘Store’ page is created.” The agent won’t just generate code; it will use playground_execute_php to run activate_plugin() and then perform a playground_request to check the front-end output.
2. Debugging wp_options via SQL (The Senior Way)
I hate hunting through the admin UI for transient errors or broken settings. I’d rather query the database. Here is how an agent might verify options using the $wpdb abstraction:
<?php
global $wpdb;
$bbioon_results = $wpdb->get_results(
"SELECT option_name, option_value FROM $wpdb->options
WHERE option_name LIKE '%rewrite_rules%'"
);
print_r($bbioon_results);Because Playground uses SQLite, the agent handles the translation through $wpdb, giving you immediate feedback in your terminal without opening phpMyAdmin.
3. Scaffolding Boilerplate
Building a child theme involves a lot of tedious directory creation. You can now prompt: “Scaffold a child theme for Twenty Twenty-Five with a custom header.php.” The agent uses playground_mkdir and playground_write_file to build the structure, then activates it to make sure it doesn’t trigger a fatal error.
I’ve written before about how AI agent skills are evolving, and this MCP implementation is the missing link for browser-based automation.
Look, if this AI coding agents WordPress Playground stuff is eating up your dev hours, let me handle it. I’ve been wrestling with WordPress since the 4.x days.
Ship Better Code, Faster
We are moving away from “writing code” toward “orchestrating agents.” By connecting your AI tools directly to the WordPress Playground, you eliminate the friction of manual testing. Check out the @wp-playground/mcp package on NPM and start automating your workflow today.
