PoC: Basic integration with Chrome DevTools for agents

[dkotter]

What?

Add a third-party integration with Chrome DevTools for agents that exposes the available AI Features and a lightweight log of which Features have recently run.

Why?

Chrome DevTools for agents recently added support for third-party integrations. This PR adds a fairly basic integration there to prove out the concept with the potential to expand the capabilities further in the future.

The two tools we expose are get_ai_capabilities and get_ai_request_history. The former will list out any available AI Features on the current page and the latter will give you a lightweight log of any Features that have been ran within that session.

How?

• Introduce a new exposeToDevTools function and have all of our features run this
• Add a lightweight store system to track available features and a log of which features have run
• Register two tools with Chrome DevTools: get_ai_capabilities and get_ai_request_history
• Anytime an Ability runs, track which Ability was used and how long it took to run, as well as the input and output data, so we can put this in our log

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Opus 4.8
Used for: Reviewing the Chrome DevTools for agents documentation, proposing a plan and executing on that plan. Code reviewed, refined and tested by me

Testing Instructions

Instructions using Claude Code + Chrome DevTools MCP

1. Install the MCP server

Add to your Claude Code MCP config:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--categoryExperimentalThirdParty=true"]
    }
  }
}

Restart Claude Code after saving.

2. Ask Claude to navigate to the post editor:

Open Chrome and navigate to https://example.com/wp-admin/post.php?post=1&action=edit

Provide your username and password or manually log in

3. In a Claude Code session, ask:

List the available developer tools on the current page accessible by Chrome DevTools

Claude will call list_3p_developer_tools. You should see two tools: get_ai_capabilities and
get_ai_request_history

4. Ask:

Invoke get_ai_capabilities

Will show all available Features accessible on that page

5. Trigger an AI action

If the post you're on has no content, add at least 50 words of content to the post body, then click "Generate excerpt" in the post settings sidebar and wait for it to complete.

6. Ask:

Invoke get_ai_request_history

Expect one record showing ability: "ai/excerpt-generation", status: "success", the input content, the generated excerpt, and a durationMs value.

Changelog Entry

Added - Expose two tools to Chrome DevTools for agents, get_ai_capabilities and get_ai_request_history, that can be triggered via the Chrome DevTools for agents MCP integration

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: swissspidy <swissspidy@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.24%. Comparing base (eae7cd3) to head (e8836ba).

Additional details and impacted files

@@            Coverage Diff             @@
##             develop     #760   +/-   ##
==========================================
  Coverage      76.24%   76.24%           
  Complexity      1765     1765           
==========================================
  Files             85       85           
  Lines           7591     7591           
==========================================
  Hits            5788     5788           
  Misses          1803     1803           

Flag	Coverage Δ
unit	76.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[swissspidy]

Thanks a lot for whipping up this proof of concept!

get_ai_capabilities and get_ai_request_history would definitely be useful tools. The individual experiments are more suitable to be exposed via WebMCP, as they are not really about debugging.

Looking at the additional examples at https://developer.chrome.com/docs/devtools/agents/use-cases/third-party-tools, I could also see us expose things like:

• list of enabled experiments
• list of enabled providers
• AI usage metrics from observability

get_ai_request_history could perhaps retrieve the history from the server-side via the REST API. No need for client-side recordStart, recordComplete, recordError.