Connect AI Coding Agents to WordPress Playground With MCP ![rw-book-cover](https://s.w.org/images/home/wordpress-default-ogimage.png) 🔗 **Source:** [Connect AI Coding Agents to WordPress Playground With MCP](https://make.wordpress.org/playground/2026/03/17/connect-ai-coding-agents-to-wordpress-playground-with-mcp/) > [!note]+ Document Notes > tags: [WordPress, AI-agents, Developer-tools] > author: WordPress Playground > source: make.wordpress.org > reference: [https://make.wordpress.org/playground/2026/03/17/connect-ai-coding-agents-to-wordpress-playground-with-mcp/] > date created: > > # 🏷️ Title: Connect AI coding agents to WordPress Playground with MCP > <!-- deep-read:sections start --> ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - What happened: WordPress Playground now exposes a Model Context Protocol (MCP) server via `@wp-playground/mcp`, letting AI coding agents control a browser-based WordPress instance locally. - Why it matters: Agents can read files, execute PHP, and manage sites safely without manual WP admin or DB tools. - Key stakeholders: WordPress developers, AI tooling vendors, WordPress Playground and Core/AI teams. - Risks and tradeoffs: Local-only scope and auth reduce risk, but agents gain powerful file/DB access; misconfigured prompts or tools could cause site changes. - Bottom line: This is a new bridge between AI coding environments (Claude Code, Gemini) and live WordPress sandboxes for automation, debugging, and scaffolding. ## 📖 Main Content - The package `@wp-playground/mcp` runs a local Node.js MCP server over stdio. Your AI client talks to it directly; the server forwards commands over WebSocket to a browser tab running Playground. - When Playground opens, it gets a random local port via an `mcp-port` URL parameter; origin checks and a startup token help ensure only the right tab and tools can connect. - Setup is one command in tools like Claude Code and Gemini CLI (or equivalent JSON config), after which the agent can obtain the correct Playground URL and start issuing tool calls. - The article walks through three workflows: - Installing and verifying a plugin purely via PHP execution and HTTP requests, without touching WP admin. - Debugging site options directly via `$wpdb` queries in PHP, with a caveat that Playground uses SQLite instead of MySQL. - Scaffolding a child theme by creating directories and theme files, then verifying via PHP and fixing errors by reading and rewriting files. - Finally, it documents the exposed tools grouped into site management, code execution, navigation, and filesystem operations, and invites feedback via Slack and GitHub. ### 🗒️ Notes - MCP server: - Local Node.js process, stdio transport. - AI client connects directly; server pipes commands to Playground via WebSocket. - Random port passed to Playground via `mcp-port` URL param. - Origin restrictions + token-based auth limit access to the active browser tab and prevent cross-site / extension abuse. - Setup for AI tools: - Claude Code: `claude mcp add --transport stdio --scope user wordpress-playground -- npx -y @wp-playground/mcp`. - Gemini CLI: `gemini mcp add wordpress-playground npx -y @wp-playground/mcp` (stdio default; `-s user` for user scope). - Optional manual config via `.mcp.json` or `settings.json`. - After server starts, you open Playground in the browser; the agent surfaces the URL. - Workflow 1 – Plugin install & verification: - Natural-language prompt asks agent to install Classic Editor and confirm the block editor is disabled. - Agent uses: - `playground_execute_php` with `wp_remote_get` to download plugin zip. - Unzips into `wp-content/plugins/`. - Calls `activate_plugin()` to activate. - Uses `playground_request` to hit the post editor URL and confirm classic UI loads. - User sees the step-by-step in the AI output, not in wp-admin. - Workflow 2 – Debug autoloaded options: - Prompt asks for all options whose names contain `woocommerce`. - Agent runs `playground_execute_php` with a `$wpdb->get_results()` query on `options`. - Playground uses SQLite, so MySQL-specific assumptions (e.g., `autoload = 'yes'`) may not behave as expected. - Query results (option name + value) appear directly in the conversation; no phpMyAdmin or DB client needed. - Workflow 3 – Scaffold a child theme: - Prompt: create a child theme of Twenty Twenty-Five called “Studio Child” with a custom header template part and front-page template. - Agent: - Uses `playground_mkdir` for the theme directory. - Uses `playground_write_file` for `style.css`, `theme.json`, and templates. - Uses `playground_execute_php` to confirm the theme shows in admin. - On error, it reads the file via `playground_read_file` and rewrites it. - Available tools: - 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`. - Community: - Authors encourage experiments and feedback via `#playground` on Making WordPress Slack. - Issues and tool suggestions invited via GitHub. - Props given to @berislavgrgicak for building the MCP server and reviewing. ## 📚 References - WordPress Playground MCP announcement: https://make.wordpress.org/playground/2026/03/17/connect-ai-coding-agents-to-wordpress-playground-with-mcp/ - NPM package: https://www.npmjs.com/package/@wp-playground/mcp - Model Context Protocol (MCP) background: https://modelcontextprotocol.io/ (for general MCP context) - WordPress Playground project: https://developer.wordpress.org/playground/ ## 🗣️ Paraphrase - Paragraph A: The article introduces `@wp-playground/mcp`, which lets AI coding agents directly interact with a WordPress Playground instance in your browser, including reading files, running PHP, and managing the site, all through MCP with minimal setup. - Paragraph B: It then explains the local architecture (Node MCP server + WebSocket to browser), shows copy-pastable commands to integrate with Claude Code and Gemini CLI, demonstrates three concrete agent workflows (plugin install, options debugging, theme scaffolding), and lists all the available tools for further experimentation. ## 📰 Newsletter WordPress Playground just gained a serious AI superpower. The new `@wp-playground/mcp` package exposes Playground over the Model Context Protocol so coding agents like Claude and Gemini can read files, execute PHP, and manage sandbox sites from right inside your editor. Think: “Install this plugin and confirm it works” or “Scaffold a child theme” as simple prompts. If you’re exploring AI-assisted WP dev, this is the perfect lab environment—local, reproducible, and scriptable. Check out the announcement on make.wordpress.org, install the NPM package, and swing by the `#playground` channel in Making WordPress Slack to share what you build. ## ✅ Action Items #### DevRel - Create quickstart guides for Claude Code and Gemini users showing end-to-end MCP + Playground flows. - Record short demos: plugin debugging, theme scaffolding, and site snapshots via `playground_save_site`. - Add sample prompts and workflows to DevHub/Playground docs; gather feedback via surveys in `#playground`. - Track adoption and issues from GitHub and Slack; funnel insights back into SDK and docs improvements. #### OSPO - Document MCP server usage expectations (local-only, no production secrets) in internal open-source policies. - Ensure license compliance for `@wp-playground/mcp` and dependencies; add it to scanning baselines. - Review security posture of exposing tooling that can read/write WordPress files, even in sandboxes. - Align with AI and security teams on guardrails before promoting usage in enterprise settings. #### Community - Run contributor sessions on building new MCP tools around Playground. - Offer “AI + Playground” office hours to lower the barrier for new WP contributors. - Encourage sponsors to support infrastructure and maintenance for Playground-based education labs. - Coordinate cross-project drills using Playground for incident reproduction and debugging exercises. #### WordPress - Core: Explore how MCP + Playground can become part of core dev workflows and triage (e.g., reproducible bug demos). - Core Performance: Use agent-powered Playground labs for automated performance regression tests. - Core AI: Define responsible usage patterns for AI agents manipulating WordPress instances. - Core Program Team: Integrate Playground MCP demos into contributor onboarding and flagship events. - Mobile: Prototype agent-driven repro steps for mobile-related bugs using Playground URLs. - Playground: Add pre-built MCP-ready blueprints and documentation; refine tool set based on community feedback. - Community: Ship meetup/WC kits featuring “AI + Playground” labs for hands-on sessions. - Training: Build lesson plans around agent workflows (plugin install, DB debugging, theme scaffolding). - Marketing: Highlight Playground MCP as a showcase of WordPress’ AI-readiness in campaigns. - Support: Use Playground snapshots plus MCP to script reproducible support scenarios. - Design: Provide UX guidance for AI-driven flows (status, error handling) surfaced to end users. - Documentation: Expand DevHub/HelpHub to cover MCP, tools, and best practices. - Photos/TV/Openverse/etc.: Use Playground MCP-based labs for contributor training where appropriate. #### The WPOCC - Fund microgrants for AI + WordPress tooling experiments built on Playground MCP. - Support maintainers who integrate MCP workflows into key community plugins/themes. - Pilot transparent funding rounds for reproducible teaching environments via Playground. ### FAIR - Encourage local, user-controlled Playground environments as default to preserve technical independence. - Document governance expectations for funding MCP-related infra (transparency, anti-capture). - Publish reusable governance artifacts for AI tooling projects (charters, contribution policies). ## 🧪 Hypotheses - H1: Providing a one-command MCP setup significantly increases Playground adoption among AI-tool-using developers. - H2: Agents using Playground MCP resolve common WP debugging tasks faster than manual WP admin/DB workflows. - H3: Clear tool documentation (filesystem, PHP, navigation) correlates with more sophisticated user workflows (themes, plugins). - H4: Local-only MCP connections reduce security incidents compared to remote or hosted sandboxes. ### 📊 Methodology - For H1: Track NPM downloads, MCP registrations, and Playground visits before and after launch; survey AI-tool users. - For H2: Run controlled usability tests comparing manual vs agent + MCP workflows; measure task completion time and error rates. - For H3: Analyze GitHub issues, shared prompts, and community examples; correlate complexity with doc engagement metrics. - For H4: Compare incident logs for local Playground usage vs any remote/hosted equivalents; review for unauthorized access attempts. ### ❓ Questions - How will MCP support evolve as more AI tools (beyond Claude/Gemini) adopt the protocol? - What additional tools (e.g., database migrations, multisite management) would most benefit developers? - How can Playground MCP be safely extended to semi-production or staging environments, if at all? - Can MCP-integrated Playground become a standard substrate for automated plugin/theme testing? ### 🔮 Future Research - Explore standardized test blueprints for plugins/themes that agents can execute in Playground. - Investigate integration with CI pipelines where MCP-driven agents run regression suites. - Study best UX patterns for surfacing agent actions (logs, diffs) to developers using Playground. - Evaluate the educational impact of agent-assisted labs for new WordPress developers. ### 💡 Implications - Practice: Developers can offload repetitive tasks (installation, scaffolding, simple debugging) to agents while staying in a safe sandbox. - Policy: Organizations may define boundaries for AI tools accessing local dev environments and repos. - Security: MCP’s local and token-based design is promising but needs clear threat models and safe defaults. - Education: Playground MCP could underpin curricula and workshops around modern WordPress and AI-assisted workflows. - Funding: Investment in Playground and MCP tooling becomes a leverage point for the broader WP ecosystem. ### 🧠 Learning Styles Assessment - Reading level: Roughly “documentation” level; Flesch-Kincaid Grade estimate around 10–11 (short sentences, technical terms). #### 👀 Visual learners - Present: Implicit architecture (MCP server ↔ Playground) described textually. - Improve: Diagrams of data flow (AI client → MCP server → WebSocket → Playground), and visual step-by-step plugin/theme workflows. #### 🔊 Aural learners - Present: None. - Improve: 2–5 minute audio summary or short screencast with narration walking through the three workflows. #### 🗣️ Verbal learners - Present: Clear descriptions of commands, tools, and workflows; definitions implied via usage. - Improve: Add glossary for MCP, stdio transport, WebSocket, and key tool names. #### 🧩 Kinesthetic learners - Present: Concrete commands and tasks to run in local environments. - Improve: Checklists and lab-style exercises (e.g., “Reproduce this scenario, then extend it with X”). #### 🧠 Logical learners - Present: Logical sequence (setup → architecture → workflows → tool catalog). - Improve: Tables comparing tools by category and capability; decision trees for choosing workflows. #### 🧑‍🤝‍🧑 Social learners - Present: Invitation to share experiences in Slack and GitHub. - Improve: Guided cohort exercises and sample discussion prompts for meetups. #### 🧘‍♀️ Solitary learners - Present: Self-paced reading and experimentation via Playground. - Improve: Reflection prompts (“What tasks would you offload to an agent?”) and self-check questions. #### 🌿 Naturalistic learners - Present: None. - Improve: Light analogies to ecosystems (e.g., Playground + MCP as a “sandbox habitat” for AI tools). ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Likely proper headings and lists (standard make.wordpress.org). - Improve: Ensure alt text for any future diagrams and clarify language attributes if localized. #### Keyboard navigation - Present: Core WP.org templates typically support basic keyboard nav. - Improve: Confirm visible focus states and logical tab order; add skip links if missing. #### Contrast and readability - Present: WP.org generally meets 4.5:1 contrast. - Improve: Verify line height and spacing in code blocks; avoid low-contrast inline links. #### Text resizing and reflow - Present: Responsive layout should reflow at moderate zoom. - Improve: Test at 200%+ with no clipping; support `prefers-reduced-motion` if animations are added to docs. #### Media and captions - Present: This article is text-only. - Improve: Provide captions/transcripts for any future demo videos; avoid autoplay media. #### Forms and interactions - Present: Minimal interactive elements. - Improve: If examples add forms (e.g., Playground blueprints), ensure clear labels and accessible validation. #### Standards reference - Map improvements against WCAG 2.2 AA, especially 1.4.x (contrast), 2.1.x (keyboard), 2.4.x (navigable). ### 🌍 DEIB Assessment #### Cultural breadth - Present: Neutral, technical content. - Improve: Showcase examples relevant to a global plugin/theme ecosystem, including non-English contexts. #### Inclusive language - Present: Gender-neutral, technical tone; jargon is present but domain-appropriate. - Improve: Add plain-language summaries and callouts for complex concepts. #### Neurodiversity support - Present: Structured with headings and lists. - Improve: Further chunk long sections; use consistent patterns for command examples and workflows. #### Representation - Present: Focus on tools, not people; minimal representation. - Improve: When adding illustrations or videos, ensure diverse examples and inclusive alt text. #### Psychological safety - Present: Respectful, non-confrontational tone. - Improve: When used in community spaces, pair with clear community guidelines and moderation expectations. ### ✅ Logical Validity #### Strong reasoning - Architecture explanation: Cause-and-effect from AI client → MCP server → Playground WebSocket is clearly described and matches common design patterns. - Workflows: Each example (plugin install, option debug, theme scaffold) logically shows how individual tools compose into a complete task. #### Fallacies - None apparent; the article is descriptive and instructional rather than argumentative. #### Tone of voice - Practical, developer-focused, and slightly promotional (“Run one command to connect. No configuration needed in Playground.”) but not salesy. ### 🛡️ DARVO Analysis - Deny: No denial or minimization of issues; security is briefly acknowledged. - Attack: No attacks on critics or alternative tools. - Reverse victim/offender: Not present; the piece is strictly technical and invitational. ## 🎯 Conclusion `@wp-playground/mcp` connects AI coding agents to WordPress Playground through MCP, enabling scripted control of a local browser-based WP instance. With one-command setup for tools like Claude Code and Gemini, developers can automate plugin management, database inspection, and theme scaffolding in a safe sandbox. Next steps: install the NPM package, wire it into your preferred AI IDE, run the example workflows, and share feedback via Slack or GitHub. ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ```markdown ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: **H3**. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] 5–10-word present-tense claim > [!quote] [{Title or entity}]({ARTICLE_URL}) by [[{Author or [MISSING]}]] via [[{Site or [MISSING]}]]. Published {DATE_OR_[MISSING]}. Accessed . > “Short quote, verbatim, ≤25 words.” Two lines: context and use. Cite data if relevant. [view highlight]({ARTICLE_URL}#H1) #xref #articleseed ID:rw_[MISSING] ### [H2] 5–10-word present-tense claim > [!quote] [{Title or entity}]({ARTICLE_URL}) > “Short quote, verbatim, ≤25 words.” Two lines: context and use. [view highlight]({ARTICLE_URL}#H2) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) - Purpose: Promote reusable claims into Atomic notes. - Split level: **H4**. - Each item: one idea, present tense, specific, testable. #### [Z1] 5–10-word present-tense claim - Scope/condition in one line. - Pointer to page/time or dataset. - Links: [[Parent-Concept]] [[Related-Idea]] #### [Z2] 5–10-word present-tense claim - Scope/condition in one line. - Pointer to page/time or dataset. - Links: [[Parent-Concept]] [[Related-Idea]] --- ### ✏️ Fleeting Queue (Extract by Selection) - Purpose: Capture quick actions or sparks for Fleeting notes. - Extraction: **Select one line** → “Refactor: Extract selection to new note (content only).” - Keep each line short and self-contained. - [F1] Short action — context/{ARTICLE_URL} #fleeting #inbox - [F2] Short action — context/{ARTICLE_URL} #fleeting #inbox - [F3] Short action — context/{ARTICLE_URL} #fleeting #inbox --- <!-- deep-read:sections end --> 📄 **Full text:** ![[Full Document Contents/Articles/Connect AI Coding Agents to WordPress Playground With MCP|Connect AI Coding Agents to WordPress Playground With MCP, WordPress Playground]] ## Highlights - 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. ([View Highlight](https://read.readwise.io/read/01kky3xm584ygpcz3hvwh5kpnc)) - Tags: 👻 ai highlighted