[Website] Add WebMCP support to the Playground website by bgrgicak · Pull Request #3298 · WordPress/wordpress-playground

bgrgicak · 2026-02-24T06:44:27Z

Motivation for the change, related issues

Adds WebMCP support to the Playground website, so browser-native AI agents (via Chrome's navigator.modelContext API) can interact with Playground directly — no WebSocket bridge or Node.js server needed.

The MCP server in #3290 requires a Node.js process as an intermediary between AI clients and the browser. Chrome's experimental WebMCP API (navigator.modelContext) lets the browser expose tools directly to built-in AI features, removing that hop entirely.

Implementation details

WebMCP tool registration

webmcp.ts — New module that registers all 16 playground tools with navigator.modelContext.registerTool(). Calls PlaygroundClient directly instead of going through the WebSocket bridge. Silently no-ops when navigator.modelContext is unavailable.
client.ts — Exports registerWebMCPTools alongside startMcpBridge from the @wp-playground/mcp/client entry point.
README.md — Adds a WebMCP section documenting the feature and its draft status.

Shared `mcpConfig` refactor

init-mcp-bridge.ts — Extracts the mcpConfig object (site listing, client lookup, save, rename) so it's created once and shared between registerWebMCPTools() and startMcpBridge(). WebMCP tools are registered unconditionally on page load; the WebSocket bridge still requires ?mcp=yes.

Test reorganization and infrastructure

Moves e2e tests from e2e/ to tests/e2e/ and unit tests from src/ to tests/unit/ for consistent structure.
Splits the test:mcp target in project.json into test:unit (Vitest) and test:e2e (Playwright), with test:mcp as a noop that depends on both.
Adds tsconfig.spec.json and Vitest config in vite.config.ts to support unit tests in the new tests/ directory.
webmcp.spec.ts — Playwright e2e tests that mock navigator.modelContext via addInitScript, then exercise tool registration and execution (PHP, filesystem, site management).

Testing Instructions

Go to chrome://flags and enable the "WebMCP for testing" flag in Chrome 148.0.7757.0 or higher
Install the WebMCP - Model Context Tool Inspector Chrome extension
Open the local version of the Playground website and start the Chrome extension
Run some test prompts like "Install plugin A", "Navigate to WP Admin"

Copilot

Pull request overview

Adds WebMCP (navigator.modelContext) support to the Playground website so browser-native AI agents can invoke Playground tools directly, while preserving the existing WebSocket MCP bridge as an opt-in path.

Changes:

Registers Playground toolset via a new registerWebMCPTools() API and wires it into the website initialization flow.
Refactors bridge initialization to share a single mcpConfig between WebMCP registration and the WebSocket bridge.
Reorganizes tests and adds Vitest/Playwright configuration plus new WebMCP e2e coverage.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/playground/website/src/lib/state/redux/init-mcp-bridge.ts	Creates shared `mcpConfig`, registers WebMCP tools on load, and gates only the WebSocket bridge behind `?mcp=yes`.
packages/playground/mcp/vite.config.ts	Adds Vitest configuration for unit tests under `tests/unit`.
packages/playground/mcp/tsconfig.spec.json	Introduces TS config for tests/spec compilation.
packages/playground/mcp/tsconfig.json	Adds project reference to `tsconfig.spec.json`.
packages/playground/mcp/tests/unit/bridge-server.spec.ts	Updates import path after test directory restructure.
packages/playground/mcp/tests/e2e/webmcp.spec.ts	Adds Playwright e2e tests for WebMCP tool registration/execution using a mocked `navigator.modelContext`.
packages/playground/mcp/tests/e2e/mcp-tools.spec.ts	Fixes relative paths for server startup after moving e2e tests under `tests/e2e`.
packages/playground/mcp/src/webmcp.ts	New module registering tools with `navigator.modelContext` and implementing site-management tools.
packages/playground/mcp/src/client.ts	Re-exports `registerWebMCPTools` from the package entry point.
packages/playground/mcp/project.json	Splits test target into `test:unit` (Vitest) and `test:e2e` (Playwright), with `test:mcp` depending on both.
packages/playground/mcp/playwright.config.ts	Updates Playwright `testDir` to `tests/e2e`.
packages/playground/mcp/README.md	Documents WebMCP support and draft-status caveat.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot · 2026-03-19T09:52:53Z

@bgrgicak I've opened a new pull request, #3416, to work on those changes. Once the pull request is ready, I'll request review from you.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…3416) `registerWebMCPTools()` would re-register tools on every call (HMR, re-initialization), potentially causing duplicate tool exposure. The fix checks `navigator.modelContext.tools` directly to skip already-registered tools. ## Changes - **`webmcp.ts`**: Add `readonly tools: ModelContextTool[]` to the `ModelContext` interface; guard each `registerTool()` call by checking `navigator.modelContext.tools` for an existing tool with the same name - **`webmcp.ts`**: Remove unused `clearContext()` and `unregisterTool()` from the `ModelContext` interface - **`webmcp.spec.ts`**: Add a `tools` getter to the test mock returning the registered tools array; remove the now-unused `clearContext` and `unregisterTool` stubs ```ts for (const tool of tools) { const alreadyRegistered = navigator.modelContext.tools.some( (t) => t.name === tool.name ); if (!alreadyRegistered) { navigator.modelContext.registerTool(tool); } } ```  --- 📍 Connect Copilot coding agent with [Jira](https://gh.io/cca-jira-docs), [Azure Boards](https://gh.io/cca-azure-boards-docs) or [Linear](https://gh.io/cca-linear-docs) to delegate work to Copilot in one click without leaving your project management tool. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: bgrgicak <1199991+bgrgicak@users.noreply.github.com> Co-authored-by: Bero <berislav.grgicak@gmail.com>

…ebsite-webmcp-support

zaerl

🚢

zaerl · 2026-03-31T13:27:10Z

+): ModelContextTool[] {
+	function getActiveSite() {
+		const sites = config.getSites();
+		const active = sites.find((s) => s.isActive);


We can have a generic getActiveSIte(config). We have the same code in getActiveClient

Good point, I added a shared getActiveSite in dccde37

zaerl · 2026-03-31T13:32:44Z

+	webmcpPage: async ({ page }, use) => {
+		// WebMCP (navigator.modelContext) is only available in
+		// Chrome 146+ Canary behind the "WebMCP for testing"
+		// flag. Playwright uses a stock Chromium that doesn't


Let's add chrome://flags/#enable-webmcp-testing

Done in b8ed695

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

bgrgicak self-assigned this Feb 24, 2026

bgrgicak added [Aspect] Website [Package][@wp-playground] Website labels Feb 24, 2026

bgrgicak force-pushed the explore/playground-website-webmcp-support branch from 9078c79 to 897f99b Compare February 24, 2026 11:45

bgrgicak force-pushed the add/playground-website-mcp-server branch from 5c3bd15 to 40515af Compare March 5, 2026 10:26

Base automatically changed from add/playground-website-mcp-server to trunk March 10, 2026 12:34

bgrgicak added 2 commits March 12, 2026 14:23

Add WebMCP support

00d6767

Move test files to tests directory

e6daa82

bgrgicak force-pushed the explore/playground-website-webmcp-support branch from e39ba48 to e6daa82 Compare March 12, 2026 13:29

bgrgicak marked this pull request as ready for review March 17, 2026 14:31

bgrgicak requested review from a team, ashfame and Copilot March 17, 2026 14:31

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Comment thread packages/playground/mcp/src/webmcp.ts Outdated

Comment thread packages/playground/mcp/src/webmcp.ts

Comment thread packages/playground/mcp/tests/e2e/webmcp.spec.ts Outdated

Potential fix for pull request finding

b899302

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI mentioned this pull request Mar 19, 2026

Make WebMCP tool registration idempotent via navigator.modelContext #3416

Merged

bgrgicak and others added 2 commits March 19, 2026 10:53

Potential fix for pull request finding

6072e20

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

bgrgicak requested a review from zaerl March 24, 2026 17:54

zaerl and others added 4 commits March 25, 2026 15:24

Merge branch 'trunk' into explore/playground-website-webmcp-support

e950fd2

Replace unregisterTool() with AbortSignal-based lifecycle in WebMCP

5679e89

Merge remote-tracking branch 'origin/trunk' into explore/playground-w…

e875380

…ebsite-webmcp-support

replace console.warn with logger in init-mcp-bridge

12a2872

zaerl approved these changes Mar 31, 2026

View reviewed changes

bgrgicak and others added 2 commits March 31, 2026 17:36

Extract shared getActiveSite() helper in webmcp.ts

dccde37

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Update WebMCP comment with correct Chrome flag URL

b8ed695

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

bgrgicak merged commit 8ce0a0d into trunk Mar 31, 2026
86 of 93 checks passed

bgrgicak deleted the explore/playground-website-webmcp-support branch March 31, 2026 16:25

fellyph mentioned this pull request Apr 2, 2026

What's new for developers? (April 2026) WordPress/developer-blog-content#458

Closed

Navigation Menu

Repository navigation

[Website] Add WebMCP support to the Playground website - #3298

[Website] Add WebMCP support to the Playground website#3298
bgrgicak merged 11 commits into
trunkfrom
explore/playground-website-webmcp-support

bgrgicak commented Feb 24, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Mar 19, 2026

Uh oh!

zaerl left a comment

Uh oh!

zaerl Mar 31, 2026

Uh oh!

bgrgicak Mar 31, 2026

Uh oh!

zaerl Mar 31, 2026

Uh oh!

bgrgicak Mar 31, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

bgrgicak commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation for the change, related issues

Implementation details

WebMCP tool registration

Shared mcpConfig refactor

Test reorganization and infrastructure

Testing Instructions

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Mar 19, 2026

Uh oh!

zaerl left a comment

Choose a reason for hiding this comment

Uh oh!

zaerl Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

bgrgicak Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

zaerl Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

bgrgicak Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bgrgicak commented Feb 24, 2026 •

edited

Loading

Shared `mcpConfig` refactor