@redocly/theme 0.59.0-next.4 → 0.59.0-rc.2

package/src/components/Tag/variables.dark.ts

@@ -1,11 +1,43 @@
 import { css } from 'styled-components';
 
 export const tagDarkMode = css`
-  --tag-close-button-bg-color-focus: var(--color-warm-grey-6); // @presenter Color
-
   --tag-border-color-focused: var(--color-blue-8); // @presenter Color
   --tag-badge-border-color: var(--border-color-secondary);
 
+  --tag-operation-color-delete: #fa82a2; // @presenter Color
+  --tag-operation-bg-color-delete: #77214C; // @presenter Color
+
+  --tag-operation-color-get: #68cc97; // @presenter Color
+  --tag-operation-bg-color-get: #1F4D2D; // @presenter Color
+
+  --tag-operation-color-post: #90b0f0; // @presenter Color
+  --tag-operation-bg-color-post: #233061; // @presenter Color
+
+  --tag-operation-color-put: #e0a663; // @presenter Color
+  --tag-operation-bg-color-put: #612729; // @presenter Color
+
+  --tag-operation-color-patch: #e0c363; // @presenter Color
+  --tag-operation-bg-color-patch: #5C3721; // @presenter Color
+
+  --tag-operation-color-head: #e6e1fe; // @presenter Color
+  --tag-operation-bg-color-head: #5b4ccc; // @presenter Color
+
+  --tag-operation-color-options: #1a1c21; // @presenter Color
+  --tag-operation-bg-color-options: #2a2b33; // @presenter Color
+
+  --tag-action-color-receive: #88CF82; // @presenter Color
+  --tag-action-color-sub: #88CF82; // @presenter Color
+  --tag-action-color-cons: #88CF82; // @presenter Color
+
+  --tag-action-color-send: #7779F8; // @presenter Color
+  --tag-action-color-pub: #7779F8; // @presenter Color
+  --tag-action-color-publish: #7779F8; // @presenter Color
+
+  --tag-action-color-channel: #F5AD5B; // @presenter Color
+  --tag-action-color-topic: #F5AD5B; // @presenter Color
+  --tag-action-color-queue: #F7A7CF; // @presenter Color
+  --tag-action-color-exchange: #C79CF2; // @presenter Color
+
   .tag-grey,
   .tag-draft,
   .tag-schema,
@@ -13,7 +45,6 @@ export const tagDarkMode = css`
     --tag-color: var(--color-warm-grey-8); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-4); // @presenter Color
     --tag-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
   }
 
   .tag-red {
@@ -21,7 +52,6 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-red-1); // @presenter Color
     --tag-border-color: var(--color-red-8); // @presenter Color
     --tag-border-color-hover: var(--color-red-6); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
   }
 
   .tag-green {
@@ -30,7 +60,6 @@ export const tagDarkMode = css`
     --tag-border-color: var(--color-green-3); // @presenter Color
     --tag-border-color-hover: var(--color-green-5); // @presenter Color
     --tag-bg-color-hover: var(--color-green-2); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-green-2); // @presenter Color
   }
 
   .tag-blue {
@@ -38,7 +67,6 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-blue-1); // @presenter Color
     --tag-border-color-hover: var(--color-blue-5); // @presenter Color
     --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-blue-2); // @presenter Color
   }
 
   .tag-magenta,
@@ -46,15 +74,14 @@ export const tagDarkMode = css`
     --tag-color: var(--color-magenta-4); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
     --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-magenta-2); // @presenter Color
   }
 
-  .tag-purple {
+  .tag-purple,
+  .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
     --tag-border-color-hover: var(--color-purple-5); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-purple-2); // @presenter Color
   }
 
   .tag-carrot {
@@ -62,14 +89,12 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
     --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
     --tag-border-color: var(--color-carrot-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-carrot-2); // @presenter Color
   }
 
   .tag-raspberry {
     --tag-color: var(--color-raspberry-7); // @presenter Color
     --tag-bg-color: var(--color-raspberry-1); // @presenter Color
     --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-raspberry-2); // @presenter Color
   }
 
   .tag-orange {
@@ -78,7 +103,6 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
     --tag-border-color: var(--color-orange-3); // @presenter Color
     --tag-border-color-hover: var(--color-orange-5); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-orange-2); // @presenter Color
   }
 
   .tag-grass {
@@ -87,7 +111,6 @@ export const tagDarkMode = css`
     --tag-color: var(--color-grass-7); // @presenter Color
     --tag-border-color: var(--color-grass-3); // @presenter Color
     --tag-border-color-hover: var(--color-grass-5); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-grass-2); // @presenter Color
   }
 
   .tag-persian-green {
@@ -96,7 +119,6 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
     --tag-border-color: var(--color-persian-green-3); // @presenter Color
     --tag-border-color-hover: var(--color-persian-green-5); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-persian-green-2); // @presenter Color
   }
 
   .tag-turquoise,
@@ -105,7 +127,6 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
     --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
     --tag-border-color: var(--color-turquoise-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-turquoise-2); // @presenter Color
   }
 
   .tag-sky {
@@ -113,7 +134,6 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-sky-1); // @presenter Color
     --tag-border-color: var(--color-sky-4); // @presenter Color
     --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
   }
 
   .tag-blueberry {
@@ -121,7 +141,6 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-blueberry-1); // @presenter Color
     --tag-border-color-hover: var(--color-blueberry-5); // @presenter Color
     --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-blueberry-2); // @presenter Color
   }
 
   .tag-warning,
@@ -129,7 +148,6 @@ export const tagDarkMode = css`
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
   }
 
   .tag-processing,
@@ -137,7 +155,6 @@ export const tagDarkMode = css`
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
   }
 
   .tag-error,
@@ -145,7 +162,6 @@ export const tagDarkMode = css`
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
   }
 
   .tag-success,
@@ -153,126 +169,11 @@ export const tagDarkMode = css`
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
   }
 
   .tag-link {
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
-  }
-
-  .tag-delete {
-    --tag-color: #fa82a2; // @presenter Color
-    --tag-bg-color: #47252E; // @presenter Color
-    --tag-bg-color-hover: #653441; // @presenter Color
-  }
-
-  .tag-get {
-    --tag-color: #68cc97; // @presenter Color
-    --tag-bg-color: #1F3D2D; // @presenter Color
-    --tag-bg-color-hover: #34654B; // @presenter Color
-  }
-
-  .tag-post {
-    --tag-color: #90b0f0; // @presenter Color
-    --tag-bg-color: #2B3447; // @presenter Color
-    --tag-bg-color-hover: #3A465F; // @presenter Color
-  }
-
-  .tag-put {
-    --tag-color: #e0a663; // @presenter Color
-    --tag-bg-color: #3D2D1B; // @presenter Color
-    --tag-bg-color-hover: #674C2D; // @presenter Color
-  }
-
-  .tag-patch {
-    --tag-color: #e0c363; // @presenter Color
-    --tag-bg-color: #3D351B; // @presenter Color
-    --tag-bg-color-hover: #67592D; // @presenter Color
-  }
-
-  .tag-head {
-    --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-bg-color: #312B5A; // @presenter Color
-    --tag-bg-color-hover: #413875; // @presenter Color
-  }
-
-  .tag-channel {
-    --tag-color: #F5AD5B; // @presenter Color
-    --tag-bg-color: #4A3721; // @presenter Color
-    --tag-bg-color-hover: #64492B; // @presenter Color
-  }
-
-  .tag-topic {
-    --tag-color: #F5AD5B; // @presenter Color
-    --tag-bg-color: #4A3721; // @presenter Color
-    --tag-bg-color-hover: #64492B; // @presenter Color
-  }
-
-  .tag-send {
-    --tag-color: #7779F8; // @presenter Color
-    --tag-bg-color: #272754; // @presenter Color
-    --tag-bg-color-hover: #373776; // @presenter Color
-  }
-
-  .tag-pub {
-    --tag-color: #7779F8; // @presenter Color
-    --tag-bg-color: #272754; // @presenter Color
-    --tag-bg-color-hover: #373776; // @presenter Color
-  }
-
-  .tag-publish {
-    --tag-color: #7779F8; // @presenter Color
-    --tag-bg-color: #272754; // @presenter Color
-    --tag-bg-color-hover: #373776; // @presenter Color
-  }
-
-  .tag-receive {
-    --tag-color: #88CF82; // @presenter Color
-    --tag-bg-color: #23421F; // @presenter Color
-    --tag-bg-color-hover: #305A2A; // @presenter Color
-  }
-
-  .tag-sub {
-    --tag-color: #88CF82; // @presenter Color
-    --tag-bg-color: #23421F; // @presenter Color
-    --tag-bg-color-hover: #305A2A; // @presenter Color
-  }
-
-  .tag-cons {
-    --tag-color: #88CF82; // @presenter Color
-    --tag-bg-color: #23421F; // @presenter Color
-    --tag-bg-color-hover: #305A2A; // @presenter Color
-  }
-
-  .tag-exchange {
-    --tag-color: #C79CF2; // @presenter Color
-    --tag-bg-color: #472669; // @presenter Color
-    --tag-bg-color-hover: #5C3187; // @presenter Color
-  }
-      
-  // shorten alias for exchange tag:
-  .tag-exch {
-    --tag-color: #C79CF2; // @presenter Color
-    --tag-bg-color: #472669; // @presenter Color
-    --tag-bg-color-hover: #5C3187; // @presenter Color
-  }
-
-  .tag-queue {
-    --tag-color: #F7A7CF; // @presenter Color
-    --tag-bg-color: #622242; // @presenter Color
-    --tag-bg-color-hover: #882F5C; // @presenter Color
-  }
-
-  .tag-variant-filled {
-    --tag-border-color: transparent;
-    --tag-border-color-hover: transparent;
-  }
-
-  .tag-variant-outline {
-    --tag-bg-color: transparent;
-    --tag-bg-color-hover: transparent;
   }
 `;

package/src/components/Tag/variables.ts

@@ -16,7 +16,6 @@ export const tag = css`
   --tag-badge-border-width: 2px;
   --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
   --tag-border-color-focused: var(--color-blue-4); // @presenter Color
-  --tag-close-button-bg-color-focus: var(--color-warm-grey-4); // @presenter Color
 
   /**
     * @tokens Tag spacing
@@ -63,7 +62,6 @@ export const tag = css`
   --tag-icon-width: 14px; // @presenter Spacing
   --tag-icon-height: 14px; // @presenter Spacing
 
-
   /**
     * @tokens Tag colors
     */
@@ -159,7 +157,8 @@ export const tag = css`
     --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
   }
 
-  .tag-purple {
+  .tag-purple,
+  .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-4); // @presenter Color
@@ -270,125 +269,109 @@ export const tag = css`
     * @tokens Operation tag colors
     */
 
-  .tag-head {
-    --tag-color: #6355CA; // @presenter Color
-    --tag-bg-color: #ECEBFA; // @presenter Color
-    --tag-bg-color-hover: #E0DEF7; // @presenter Color
-  }
+  --tag-operation-color-delete: #e70b46; // @presenter Color
+  --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
+  
+  --tag-operation-color-get: #25b869; // @presenter Color
+  --tag-operation-bg-color-get: #e5faef; // @presenter Color
+  
+  --tag-operation-color-post: #1e65f5; // @presenter Color
+  --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
+  
+  --tag-operation-color-put: #f5901d; // @presenter Color
+  --tag-operation-bg-color-put: #fef1e2; // @presenter Color
+  
+  --tag-operation-color-patch: #f5c31d; // @presenter Color
+  --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
+
+  --tag-operation-color-head: #5b4ccc; // @presenter Color
+  --tag-operation-bg-color-head: #e6e1fe; // @presenter Color
+
+  --tag-operation-color-options: #1a1c21; // @presenter Color
+  --tag-operation-bg-color-options: #ededf2; // @presenter Color
+  
+  --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
+
+  --tag-action-color-receive: #4db144; // @presenter Color
+  --tag-action-color-sub: #4db144; // @presenter Color
+  --tag-action-color-cons: #4db144; // @presenter Color
+
+  --tag-action-color-send: #4144f6; // @presenter Color
+  --tag-action-color-pub: #4144f6; // @presenter Color
+  --tag-action-color-publish: #4144f6; // @presenter Color
+
+  --tag-action-color-channel: #F0870E; // @presenter Color
+  --tag-action-color-topic: #F0870E; // @presenter Color
+  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-exchange: #9B51E0; // @presenter Color
 
   .tag-delete {
-    --tag-color: #e70b46; // @presenter Color
-    --tag-bg-color: #fee2e9; // @presenter Color
-    --tag-bg-color-hover: #fdd3dd; // @presenter Color
+      --tag-color: var(--tag-operation-color-delete); // @presenter Color
   }
 
   .tag-get {
-    --tag-color: #25b869; // @presenter Color
-    --tag-bg-color: #e5faef; // @presenter Color
-    --tag-bg-color-hover: #D4F7E5; // @presenter Color
+      --tag-color: var(--tag-operation-color-get); // @presenter Color
   }
 
   .tag-post {
-    --tag-color: #1e65f5; // @presenter Color
-    --tag-bg-color: #e2ebfe; // @presenter Color
-    --tag-bg-color-hover: #CEDDFD; // @presenter Color
+      --tag-color: var(--tag-operation-color-post); // @presenter Color
   }
 
   .tag-put {
-    --tag-color: #f5901d; // @presenter Color
-    --tag-bg-color: #fef1e2; // @presenter Color
-    --tag-bg-color-hover: #FDE2C4; // @presenter Color
+      --tag-color: var(--tag-operation-color-put); // @presenter Color
   }
-
+  
   .tag-patch {
-    --tag-color: #f5c31d; // @presenter Color
-    --tag-bg-color: #fdf6dd; // @presenter Color
-    --tag-bg-color-hover: #FCF0C5; // @presenter Color
+      --tag-color: var(--tag-operation-color-patch); // @presenter Color
   }
 
   .tag-http-deprecated {
-    --tag-color: var(--text-color-disabled); // @presenter Color
+      --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
+  }
+  
+  .tag-receive {
+      --tag-color: var(--tag-action-color-receive); // @presenter Color
   }
 
   .tag-send {
-    --tag-color: #4144F6; // @presenter Color
-    --tag-bg-color: #ECECFE; // @presenter Color
-    --tag-bg-color-hover: #CFCFFC; // @presenter Color
+      --tag-color: var(--tag-action-color-send); // @presenter Color
   }
 
   .tag-pub {
-    --tag-color: #4144F6; // @presenter Color
-    --tag-bg-color: #ECECFE; // @presenter Color
-    --tag-bg-color-hover: #CFCFFC; // @presenter Color
-  }
-
-  .tag-publish {
-    --tag-color: #4144F6; // @presenter Color
-    --tag-bg-color: #ECECFE; // @presenter Color
-    --tag-bg-color-hover: #CFCFFC; // @presenter Color
-  }
-
-  .tag-receive {
-    --tag-color: #4db144; // @presenter Color
-    --tag-bg-color:  #E5FDE2; // @presenter Color
-    --tag-bg-color-hover: #D4FCCF; // @presenter Color
+      --tag-color: var(--tag-action-color-pub); // @presenter Color
   }
 
   .tag-sub {
-    --tag-color: #4db144; // @presenter Color
-    --tag-bg-color:  #E5FDE2; // @presenter Color
-    --tag-bg-color-hover: #D4FCCF; // @presenter Color
+      --tag-color: var(--tag-action-color-sub); // @presenter Color
   }
 
   .tag-cons {
-    --tag-color: #4db144; // @presenter Color
-    --tag-bg-color:  #E5FDE2; // @presenter Color
-    --tag-bg-color-hover: #D4FCCF; // @presenter Color
+      --tag-color: var(--tag-action-color-cons); // @presenter Color
+  }
+
+  .tag-publish {
+      --tag-color: var(--tag-action-color-publish); // @presenter Color
   }
 
   .tag-channel {
-    --tag-color: #F0870E; // @presenter Color
-    --tag-bg-color: #FDF1E2; // @presenter Color
-    --tag-bg-color-hover: #FBE1C1; // @presenter Color
+      --tag-color: var(--tag-action-color-channel); // @presenter Color
   }
 
   .tag-topic {
-    --tag-color: #F0870E; // @presenter Color
-    --tag-bg-color: #FDF1E2; // @presenter Color
-    --tag-bg-color-hover: #FBE1C1; // @presenter Color
+      --tag-color: var(--tag-action-color-channel); // @presenter Color
   }
 
   .tag-queue {
-    --tag-color: #D72E81; // @presenter Color
-    --tag-bg-color: #FAE5F0; // @presenter Color
-    --tag-bg-color-hover: #F7D4E6; // @presenter Color
+      --tag-color: var(--tag-action-color-queue); // @presenter Color
   }
 
   .tag-exchange {
-    --tag-color: #9B51E0; // @presenter Color
-    --tag-bg-color: #F0E5FA; // @presenter Color
-    --tag-bg-color-hover: #E6D4F7; // @presenter Color
+      --tag-color: var(--tag-action-color-exchange); // @presenter Color
   }
       
   // shorten alias for exchange tag:
   .tag-exch {
-    --tag-color: #9B51E0; // @presenter Color
-    --tag-bg-color: #F0E5FA; // @presenter Color
-    --tag-bg-color-hover: #E6D4F7; // @presenter Color
-  }
-
-  /**
-    * @tokens Tag variants
-    */
-
-  .tag-variant-filled {
-    --tag-border-color: transparent;
-    --tag-border-color-hover: transparent;
-  }
-
-  .tag-variant-outline {
-    --tag-bg-color: transparent;
-    --tag-bg-color-hover: transparent;
+      --tag-color: var(--tag-action-color-exchange); // @presenter Color
   }
       
   // @tokens End

package/src/core/constants/search.ts

@@ -7,14 +7,10 @@ export enum AiSearchError {
   EmptyResponse = 'empty_response',
   ErrorProcessingResponse = 'error_processing_response',
 }
-
-export const AiSearchConversationRole = {
-  USER: 'user',
-  ASSISTANT: 'assistant',
-} as const;
-
-export type AiSearchConversationRole =
-  (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
+export const enum AiSearchConversationRole {
+  USER = 'user',
+  ASSISTANT = 'assistant',
+}
 
 const defaultErrorConfig: AiSearchErrorConfig = {
   headerKey: 'search.ai.error.header',

package/src/core/hooks/use-page-actions.ts

@@ -18,7 +18,14 @@ const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'] as const;
 const CURSOR_URL =
   'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
 
-export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
+export type PageActionType =
+  | 'copy'
+  | 'view'
+  | 'chatgpt'
+  | 'claude'
+  | 'mcp-cursor'
+  | 'mcp-claude'
+  | 'mcp-json';
 
 export function usePageActions(
   pageSlug: string,
@@ -42,7 +49,7 @@ export function usePageActions(
   const { isPublic } = usePageData() || {};
 
   const result: PageAction[] = useMemo(() => {
-    if (shouldHideAllActions) {
+    if (shouldHideAllActions && !actions?.length) {
       return [];
     }
 
@@ -106,6 +113,30 @@ export function usePageActions(
                 }
               },
             };
+          case 'mcp-claude':
+            if (!mcpUrl) {
+              return null;
+            }
+
+            return {
+              buttonText: 'Copy Claude configuration',
+              title: 'Copy Claude configuration',
+              description: 'Copy MCP configuration for Claude',
+              iconComponent: ClaudeIcon,
+              onClick: async () => {
+                ClipboardService.copyCustom(`claude mcp add --transport http server ${mcpUrl}`);
+              },
+            };
+          case 'mcp-json':
+            return {
+              buttonText: 'Copy MCP configuration',
+              title: 'Copy MCP JSON configuration',
+              description: 'Copy MCP JSON configuration',
+              iconComponent: CopyIcon,
+              onClick: async () => {
+                ClipboardService.copyCustom(generateMCPConfig());
+              },
+            };
           case 'copy':
             return {
               buttonText: translate('page.actions.copyButtonText', 'Copy'),