Dashboard: implement AI + MCP settings design updates by eoigal · Pull Request #109317 · Automattic/wp-calypso

eoigal · 2026-03-17T09:22:37Z

Part of https://linear.app/a8c/issue/AIINT-280/implement-ai-mcp-settings-redesign-i1i2

Proposed Changes

Add "AI and MCP" preference card to Dashboard Preferences page that links to /me/mcp, shows Enabled/Disabled status badge using hasEnabledAccountTools, and uses a sparkles icon. Gated by mcp-settings feature flag.
Fold Privacy and Blocked Sites into the Preferences page as navigation cards (PreferencesPrivacy, PreferencesBlockedSites); remove them from the top-level MeMenu navigation.
Replace FormTokenField in Dashboard MCP settings with PreferencesLoginSiteDropdown (visual site picker with site icon, name, and URL). Adds "Enabled sites" list (when account MCP is off) and "Disabled sites" list (when account MCP is on), each with Manage and Remove actions per site.
Add getEnabledSiteIds() utility to client/me/mcp/utils.js for retrieving sites with explicitly enabled MCP access.
Add an MCP access section to the site-level AI tools settings page with an enable/disable toggle and a "Manage at account level" link. Gated by mcp-settings feature flag.
Update "Jetpack AI assistant" string to "AI assistant" in the stats module.

TODO - Added global setting to gate AI Assistant (208364-ghe-Automattic/wpcom) but have to update where we load blue-sky plugin to check this setting.

Examples

Screen.Recording.2026-03-19.at.23.49.06.mov

Why are these changes being made?

Implements the i2 design updates for AI + MCP settings: improves discoverability by surfacing AI and MCP settings in Preferences, cleans up account navigation, replaces the token-based site selector with a more visual site picker, adds per-site MCP management in site-level AI tools settings, and simplifies AI assistant language.

Testing Instructions

Enable the mcp-settings feature flag locally - this is enabled in test/dev environments automatically.
Review code from new hosting dashboard, i.e. http://my.localhost:3000/me/mcp
Navigate to /me/preferences -- verify the "AI and MCP" card appears with correct icon, description, and Enabled/Disabled badge.
Verify Privacy and Blocked Sites no longer appear in the top-level account nav menu but do appear as cards on the Preferences page.
Navigate to /me/mcp -- verify the FormTokenField is replaced by the PreferencesLoginSiteDropdown.
Test adding a site (when account MCP is off) and confirm it appears in "Enabled sites" with Manage/Remove.
Test disabling a site (when account MCP is on) and confirm it appears in "Disabled sites" with Remove.
Navigate to a site's AI tools settings page -- verify the MCP access toggle appears below the AI assistant card with a "Manage at account level" link.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
Have you used memoizing on expensive computations?
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2026-03-17T09:22:47Z

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172712

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172712&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172712&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172712&env=dashboard

Dashboard Live (CIAB) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172712&env=dashboard-ciab

matticbot · 2026-03-17T09:22:48Z

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172241

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172241&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172241&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172241&env=dashboard

Dashboard Live (CIAB) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-172241&env=dashboard-ciab

matticbot · 2026-03-17T09:22:54Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

agents-manager
blaze-dashboard
help-center
notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/ai-mcp-settings-design-updates on your sandbox.

- Add "AI and MCP" preference card to Dashboard Preferences page (links to /me/mcp, shows Enabled/Disabled badge, sparkles icon); gated by `mcp-settings` feature flag - Fold Privacy and Blocked Sites into Preferences page as navigation cards; remove them from the top-level MeMenu - Replace FormTokenField in Dashboard MCP settings with PreferencesLoginSiteDropdown (visual site picker with site icon/name/URL); add Enabled/Disabled sites lists with Manage + Remove actions - Add MCP access section to site-level AI tools settings page with toggle and "Manage at account level" link; gated by `mcp-settings` flag - Add getEnabledSiteIds() utility to client/me/mcp/utils.js - Update "Jetpack AI assistant" string to "AI assistant" in stats module Made-with: Cursor

- Remove MCP from top nav (now accessed via Preferences) - Rewrite /me/mcp with 3-card layout: AI assistant, External AI agent access (MCP), and Connect external AI assistant - Add /me/mcp/read sub-page with per-category Enable all toggles - Add /me/mcp/write sub-page for write-type tools - Add /me/mcp/ai-sites sub-page for per-site AI assistant enablement - Add /me/mcp/mcp-sites sub-page for per-site MCP exceptions - Classify tools as read/write via isWriteTool() using tool ID keywords - Register all new routes in router/me.tsx Made-with: Cursor

Made-with: Cursor

- isWriteTool now uses ability.readonly === false instead of type field or keyword matching on tool IDs - Filter out tools with visible === false from all MCP settings pages - Add readonly and visible fields to McpAbility interface Made-with: Cursor

- Add ai_assistant field to UserSettings type and saveableKeys - Wire account-level AI assistant toggle to userSettings.ai_assistant - Use pluginsQuery (big-sky slug) to derive per-site AI enabled list - Wire Remove button and site picker to bigSkyPluginMutation in ai-sites - Fix isAiEnabled to read from userSettings instead of hardcoded false - Switch site list rows to ActionList.ActionItem for consistent layout Made-with: Cursor

- Request big_sky_enabled in SITE_FIELDS for /me/sites payloads - Add big_sky_enabled to Site type (api-core) - ai-sites: derive enabled list from site.big_sky_enabled; invalidate sites query on Big Sky toggle; fix upsell Back button (tertiary, compact) - AI and MCP: replace pluginsQuery count with sites list + big_sky_enabled; use _n for 1 site vs N sites badge text Made-with: Cursor

eoigal · 2026-03-20T10:28:41Z

This PR doesn't update the site level AI settings yet. Those designs require a mechanism to enable/disable tools per site - this doesn't exist but we can add this in follow up and update this page.

https://linear.app/a8c/issue/AIINT-294/add-support-for-gating-mcp-tools-per-site

Design for AI Setting per site

Current page for AI Setting per site

fditrapani · 2026-03-20T12:41:05Z

Nice work on this @eoigal. I'm going to share my feedback in separate comments so it'll be easier for you to track.

Let's start with the sparkly AI icon. We should be using this AI icon that's already being used on the site settings:

Here are all the places where the sparkly one shows up:

fditrapani · 2026-03-20T12:46:03Z

Continuing with icons, it looks like you're using grid icons:

We need to use the WordPress design system icons:

More specifically:

seen
pencil
notAllowed
connection (This one needs to be added to the connect external assistant card and to the Add MCP to specific sites)

fditrapani · 2026-03-20T12:48:27Z

When I toggle the AI assistant on, the button still shows adding it to specific sites:

It should switch to exceptions like the MCP card.

Then after I toggle it back off, it shows that it's still added to all my sites. After I toggle the AI assistant off, it should be off for all sites.

I noticed something similar for MCP, when I toggle it on for the first time, I had a site excluded. If I toggle it on/off, it should apply to all sites and reset the exceptions back to 0.

fditrapani · 2026-03-20T12:52:56Z

When I toggle the MCP settings on for the first time, all the read and write permissions are turned on:

Since write permissions can be riskier to start, we discussed only turning on the read permissions and having people manually turn on the write permissions so that it's a more conscious choice.

fditrapani · 2026-03-20T12:54:34Z

The permissions screens are still long and hard to parse:

We can break them up further and introduce separators between groups of permissions within the same card to help people scan them easier. I documented the groupings in Figma here: sPVdxpaH8j2fZbvtApS7fH-fi-5092_7720

jom

Few minor things for now. I'll keep looking.

Minor:

Should we update the breadcrumb to be "AI and MCP Account Settings"

jom · 2026-03-20T12:51:30Z

client/dashboard/me/mcp/index.tsx

-	account_tools_enabled?: boolean;
-	abilities?: Record< string, unknown >;
+// Inline sparkles icon to avoid restricted @automattic/components/src imports
+const sparklesIcon = (


Could we share the sparkles between mcp/index.tsx and preferences-ai-mcp/index.tsx? Are they the same?

I left a comment about the sparkles. We're using the wrong ones.

jom · 2026-03-20T12:51:53Z

client/dashboard/me/mcp/read/index.tsx

+import PageLayout from '../../../components/page-layout';
+import { CATEGORY_ORDER, getDisplayCategory, isWriteTool } from '../categories';
+
+interface McpAbility {


This is duplicated across a few files. Not sure if worth sharing.

fditrapani · 2026-03-20T13:10:21Z

The add site/site exception screen has some minor issues:

1. The add site card and section below it are spaced too closely together:

Can we increase the space between them to 32px:

2. When I add a site, there's no feedback that the system is thinking. It makes the interface feel unresponsive:

After you pick a site, can we disable the input and add an activity indicator to the card to show that something is happening?

fditrapani · 2026-03-20T13:16:23Z

We're currently using the default badges except for the success ones when everything is enabled.

Can we update the badges to show info badges for when there's data, warning ones for exceptions, and keep the default ones if there's no data:

fditrapani · 2026-03-20T13:18:28Z

When the MCP setting is off, we're still showing the connection card:

If you don't have MCP on, it's not necessary. Can we hide it:

This would also save us from having this screen:

fditrapani · 2026-03-20T13:21:19Z

The connection instructions are overloaded with lots of uneccessary content:

Let's clean them up to make them easier to scan and use:

fditrapani · 2026-03-20T13:25:20Z

When you add the AI assistant to specific sites, it's not clear which ones are eligible or not. Can we add a badge to differentiate the two:

Or short term, we can exclude those sites depending on how hard the next part is.

After selecting one of the ineligible sites, we show an upsell card which feels out of context:

Instead, can we take people to the plans page, checkout, and then come back here to have the site enabled?

fditrapani · 2026-03-20T13:28:30Z

When you navigate to a subpage, the breadcrumb reads "MCP Account Settings":

The breadcrumb should include Preferences and read "AI and MCP" to match the main page title:

Similarly, the preferences breadcrumb is missing from the AI and MCP, blocked sites, and privacy screens:

fditrapani · 2026-03-20T13:34:01Z

The preferences page is hard to scan with the mix of cards and buttons:

Eventually, we'll want these all to be the same type of navigation card. In the short term, let's group the navigation cards at the top and follow with the other settings below:

We'll also want to reflect the blocked page and privacy settings on the preferences page:

fditrapani · 2026-03-20T13:37:07Z

The Learn more link in the page heading is for MCP settings only:

With the improved copy, it doesn't really add any value. Can we remove it?

fditrapani · 2026-03-20T13:42:18Z

At the site level, the manage link doesn't look well considered:

If it's temporary while you work on adding the site level permissions, you can ignore this but if we want to keep it a little longer, can we update it to one of those navigation cards like below?

fditrapani · 2026-03-20T13:47:43Z

The way our other settings screens work is that if you navigate to a child screen, the parent navigation item remains active:

That's not the case for our preferences screens

Can we make sure the preferences link is active on those child pages:

eoigal force-pushed the add/ai-mcp-settings-design-updates branch from 51442a3 to 8aaae34 Compare March 17, 2026 09:25

eoigal added 7 commits March 19, 2026 23:21

Dashboard: add isWriteTool to MCP categories

6880712

Made-with: Cursor

fix missing check icon

346512d

eoigal force-pushed the add/ai-mcp-settings-design-updates branch from a5c6b7e to e20b4d7 Compare March 19, 2026 23:21

remove hideLabelFromVision

9a6bd80

eoigal marked this pull request as ready for review March 19, 2026 23:34

eoigal requested a review from a team as a code owner March 19, 2026 23:34

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 19, 2026

jom requested review from a team, jcheringer and wellyshen and removed request for jcheringer and wellyshen March 20, 2026 10:16

fix typo

5b668a8

eoigal added 2 commits March 20, 2026 10:45

fix row size

201fe23

add manage link to add mcp to site

eaca7f9

jom reviewed Mar 20, 2026

View reviewed changes

Conversation

eoigal commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Examples

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Mar 17, 2026 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Mar 17, 2026

Uh oh!

matticbot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eoigal commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design for AI Setting per site

Current page for AI Setting per site

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fditrapani commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

jom left a comment

Choose a reason for hiding this comment

Uh oh!

jom Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

fditrapani Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

jom Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

fditrapani commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

eoigal commented Mar 17, 2026 •

edited

Loading

github-actions bot commented Mar 17, 2026 •

edited by matticbot

Loading

matticbot commented Mar 17, 2026 •

edited

Loading

eoigal commented Mar 20, 2026 •

edited

Loading

fditrapani commented Mar 20, 2026 •

edited

Loading

fditrapani commented Mar 20, 2026 •

edited

Loading

fditrapani commented Mar 20, 2026 •

edited

Loading

fditrapani commented Mar 20, 2026 •

edited

Loading