@redocly/theme 0.59.0-next.10 → 0.59.0-next.12

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

@@ -1,24 +1,40 @@
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 
 import type { PageProps, UiAccessibleConfig } from '@redocly/config';
-import type { PageAction } from '../types';
+import type { PageAction, MCPClientType, McpConnectionParams } from '../types';
 
 import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { ChatGptIcon } from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
 import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
 import { MarkdownFullIcon } from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
+import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
+import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
 
 import { useThemeHooks } from './use-theme-hooks';
 import { useThemeConfig } from './use-theme-config';
+import { useMCPConfig } from './use-mcp-config';
 import { ClipboardService } from '../utils/clipboard-service';
 import { IS_BROWSER } from '../utils/dom';
-import { CursorIcon } from '../../icons/CursorIcon/CursorIcon';
-
-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';
+import { generateMCPDeepLink } from '../utils/mcp';
+
+const DEFAULT_ENABLED_ACTIONS = [
+  'copy',
+  'view',
+  'chatgpt',
+  'claude',
+  'docs-mcp-cursor',
+  'docs-mcp-vscode',
+] as const;
+
+export type PageActionType =
+  | 'copy'
+  | 'view'
+  | 'chatgpt'
+  | 'claude'
+  | 'docs-mcp-cursor'
+  | 'docs-mcp-vscode'
+  | 'mcp-cursor'
+  | 'mcp-vscode';
 
 export function usePageActions(
   pageSlug: string,
@@ -27,12 +43,12 @@ export function usePageActions(
 ): PageAction[] {
   const { useTranslate, usePageData, usePageProps, usePageSharedData } = useThemeHooks();
   const { translate } = useTranslate();
-
   const themeConfig = useThemeConfig();
   const pageProps = usePageProps();
   const openApiSharedData = usePageSharedData<
     { options: { excludeFromSearch: boolean } } | undefined
   >('openAPIDocsStore');
+  const mcpConfig = useMCPConfig();
 
   const shouldHideAllActions = shouldHidePageActions(
     pageProps,
@@ -41,148 +57,154 @@ export function usePageActions(
   );
   const { isPublic } = usePageData() || {};
 
+  const createMCPHandler = useCallback(
+    (clientType: MCPClientType, requiresMcpUrl: boolean = false) =>
+      () => {
+        if (requiresMcpUrl && !mcpUrl) return null;
+        if (!requiresMcpUrl && (mcpUrl || mcpConfig.isMcpDisabled)) return null;
+
+        const config = requiresMcpUrl
+          ? { serverName: mcpConfig.serverName, url: mcpUrl || '' }
+          : { serverName: mcpConfig.serverName, url: mcpConfig.serverUrl || '' };
+
+        return createMCPAction({ clientType, mcpConfig: config, translate });
+      },
+    [mcpUrl, mcpConfig, translate],
+  );
+
   const result: PageAction[] = useMemo(() => {
     if (shouldHideAllActions) {
       return [];
     }
 
     const origin = IS_BROWSER ? window.location.origin : (globalThis as any)['SSR_HOSTNAME'];
-
     const normalizedSlug = pageSlug.startsWith('/') ? pageSlug : '/' + pageSlug;
-
     const mdPageUrl = new URL(
       origin + normalizedSlug + (normalizedSlug === '/' ? 'index.html.md' : '.md'),
     ).toString();
 
-    function getExternalAiPromptLink(baseUrl: string): string {
-      const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
-
-      const url = new URL(baseUrl);
-      url.searchParams.set('q', externalAiPrompt);
-
-      return url.toString();
-    }
-
-    return (themeConfig.navigation?.actions?.items || actions || DEFAULT_ENABLED_ACTIONS)
-      .map((action) => {
-        function generateMCPConfig(isCursor?: boolean): string {
-          const jsonConfig = {
-            'mcp-server': {
-              url: mcpUrl,
-              description: 'MCP Server',
-            },
-          };
-          if (isCursor) {
-            const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace(
-              '$BASE64_ENCODED_CONFIG',
-              btoa(JSON.stringify(jsonConfig['mcp-server'])),
-            );
-            return url;
+    const actionHandlers: Record<PageActionType, () => PageAction | null> = {
+      'docs-mcp-cursor': createMCPHandler('cursor'),
+      'docs-mcp-vscode': createMCPHandler('vscode'),
+      'mcp-cursor': createMCPHandler('cursor', true),
+      'mcp-vscode': createMCPHandler('vscode', true),
+
+      copy: () => ({
+        buttonText: translate('page.actions.copyButtonText', 'Copy'),
+        title: translate('page.actions.copyTitle', 'Copy for LLM'),
+        description: translate('page.actions.copyDescription', 'Copy page as Markdown for LLMs'),
+        iconComponent: CopyIcon,
+        onClick: async () => {
+          try {
+            const result = await fetch(mdPageUrl);
+            if (result.status !== 200) {
+              return;
+            }
+            const text = await result.text();
+            ClipboardService.copyCustom(text);
+          } catch (error) {
+            console.error(error);
           }
-
-          return JSON.stringify(jsonConfig, null, 2);
+        },
+      }),
+
+      view: () => ({
+        buttonText: translate('page.actions.viewAsMdButtonText', 'View as Markdown'),
+        title: translate('page.actions.viewAsMdTitle', 'View as Markdown'),
+        description: translate('page.actions.viewAsMdDescription', 'Open this page as Markdown'),
+        iconComponent: MarkdownFullIcon,
+        link: mdPageUrl,
+      }),
+
+      chatgpt: () => {
+        if (!isPublic) {
+          return null;
         }
-
-        switch (action) {
-          case 'mcp-cursor':
-            if (!mcpUrl) {
-              return null;
-            }
-
-            return {
-              buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
-              title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
-              description: translate(
-                'page.actions.cursorMcpDescription',
-                'Install MCP server on Cursor',
-              ),
-              iconComponent: CursorIcon,
-              onClick: () => {
-                try {
-                  const url = generateMCPConfig(true);
-                  window.open(url, '_blank');
-                } catch (error) {
-                  console.error(error);
-                }
-              },
-            };
-          case 'copy':
-            return {
-              buttonText: translate('page.actions.copyButtonText', 'Copy'),
-              title: translate('page.actions.copyTitle', 'Copy for LLM'),
-              description: translate(
-                'page.actions.copyDescription',
-                'Copy page as Markdown for LLMs',
-              ),
-              iconComponent: CopyIcon,
-              onClick: async () => {
-                try {
-                  const result = await fetch(mdPageUrl);
-                  if (result.status !== 200) {
-                    throw new Error('Failed to fetch markdown content');
-                  }
-                  const text = await result.text();
-
-                  ClipboardService.copyCustom(text);
-                } catch (error) {
-                  console.error(error);
-                }
-              },
-            };
-          case 'view':
-            return {
-              buttonText: translate('page.actions.viewAsMdButtonText', 'View as Markdown'),
-              title: translate('page.actions.viewAsMdTitle', 'View as Markdown'),
-              description: translate(
-                'page.actions.viewAsMdDescription',
-                'Open this page as Markdown',
-              ),
-              iconComponent: MarkdownFullIcon,
-              link: mdPageUrl,
-            };
-          case 'chatgpt':
-            if (!isPublic) {
-              return null;
-            }
-
-            return {
-              buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
-              title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
-              description: translate(
-                'page.actions.chatGptDescription',
-                'Get insights from ChatGPT',
-              ),
-              iconComponent: ChatGptIcon,
-              link: getExternalAiPromptLink('https://chat.openai.com'),
-            };
-          case 'claude':
-            if (!isPublic) {
-              return null;
-            }
-
-            return {
-              buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
-              title: translate('page.actions.claudeTitle', 'Open in Claude'),
-              description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
-              iconComponent: ClaudeIcon,
-              link: getExternalAiPromptLink('https://claude.ai/new'),
-            };
+        return {
+          buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
+          title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
+          description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
+          iconComponent: ChatGptIcon,
+          link: getExternalAiPromptLink('https://chat.openai.com', mdPageUrl),
+        };
+      },
+
+      claude: () => {
+        if (!isPublic) {
+          return null;
         }
-      })
-      .filter((action) => action !== null);
+        return {
+          buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
+          title: translate('page.actions.claudeTitle', 'Open in Claude'),
+          description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
+          iconComponent: ClaudeIcon,
+          link: getExternalAiPromptLink('https://claude.ai/new', mdPageUrl),
+        };
+      },
+    };
+
+    return (themeConfig.navigation?.actions?.items || actions || DEFAULT_ENABLED_ACTIONS)
+      .map((action) => actionHandlers[action]?.())
+      .filter((action): action is PageAction => action !== null);
   }, [
     shouldHideAllActions,
     pageSlug,
     themeConfig.navigation?.actions?.items,
     actions,
-    mcpUrl,
     translate,
     isPublic,
+    createMCPHandler,
   ]);
 
   return result;
 }
 
+function getExternalAiPromptLink(baseUrl: string, mdPageUrl: string): string {
+  const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
+  const url = new URL(baseUrl);
+  url.searchParams.set('q', externalAiPrompt);
+  return url.toString();
+}
+
+type CreateMCPActionParams = {
+  clientType: MCPClientType;
+  mcpConfig: McpConnectionParams;
+  translate: (key: string, defaultValue: string) => string;
+};
+
+function createMCPAction({ clientType, mcpConfig, translate }: CreateMCPActionParams): PageAction {
+  const url = generateMCPDeepLink(clientType, mcpConfig);
+  const sharedProps = {
+    onClick: () => {
+      window.open(url, '_blank');
+    },
+  };
+
+  if (clientType === 'cursor') {
+    return {
+      ...sharedProps,
+      buttonText: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'),
+      title: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'),
+      description: translate(
+        'page.actions.connectMcp.cursorDescription',
+        'Install MCP server on Cursor',
+      ),
+      iconComponent: CursorIcon,
+    };
+  }
+
+  return {
+    ...sharedProps,
+    buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'),
+    title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'),
+    description: translate(
+      'page.actions.connectMcp.vscodeDescription',
+      'Install MCP server on VS Code',
+    ),
+    iconComponent: VSCodeIcon,
+  };
+}
+
 function shouldHidePageActions(
   pageProps: PageProps,
   themeConfig: UiAccessibleConfig,

package/src/core/openapi/index.ts

@@ -8,6 +8,7 @@ export type { UserClaims } from '../types/user-claims';
 export type { OperationParameter, ParameterHighlight } from '../types/search';
 export type { TFunction, TOptions } from '../types/l10n';
 export type { SelectOption, SelectProps } from '../types/select';
+export type { SegmentedOption, SegmentedProps } from '../types/segmented';
 export { IS_BROWSER } from '../utils/dom';
 export {
   addLeadingSlash,

package/src/core/styles/global.ts

@@ -19,7 +19,7 @@ import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
 import { admonition } from '@redocly/theme/components/Admonition/variables';
 import { footer } from '@redocly/theme/components/Footer/variables';
 import { button } from '@redocly/theme/components/Button/variables';
-import { aiAssistantButton } from '@redocly/theme/components/Buttons/variables';
+import { aiAssistantButton, connectMCPButton } from '@redocly/theme/components/Buttons/variables';
 import { navbar } from '@redocly/theme/components/Navbar/variables';
 import { search } from '@redocly/theme/components/Search/variables';
 import { menu, mobileMenu } from '@redocly/theme/components/Menu/variables';
@@ -1243,6 +1243,7 @@ export const styles = css`
     ${breadcrumbs}
     ${button}
     ${aiAssistantButton}
+    ${connectMCPButton}
     ${cards}
     ${catalog}
     ${catalogClassic}

package/src/core/types/index.ts

@@ -1,6 +1,7 @@
 export * from './breadcrumb';
 export * from './catalog';
 export * from './l10n';
+export * from './mcp';
 export * from './feedback';
 export * from './hooks';
 export * from './markdown';

package/src/core/types/l10n.ts

@@ -215,6 +215,13 @@ export type TranslationKey =
   | 'page.actions.cursorMcpButtonText'
   | 'page.actions.cursorMcpTitle'
   | 'page.actions.cursorMcpDescription'
+  | 'page.actions.connectMcp'
+  | 'page.actions.connectMcp.cursor'
+  | 'page.actions.connectMcp.cursorDescription'
+  | 'page.actions.connectMcp.vscode'
+  | 'page.actions.connectMcp.vscodeDescription'
+  | 'page.actions.connectMcp.copyConfig'
+  | 'page.actions.connectMcp.copyConfigDescription'
   | 'openapi.download.description.title'
   | 'openapi.info.title'
   | 'openapi.info.contact.url'
@@ -271,6 +278,8 @@ export type TranslationKey =
   | 'openapi.noResponseExample'
   | 'openapi.discriminator.searchPlaceholder'
   | 'openapi.discriminator.searchNoResults'
+  | 'openapi.discriminator.defaultMapping'
+  | 'openapi.discriminator.defaultMappingTooltip'
   | 'openapi.noResponseContent'
   | 'openapi.noRequestPayload'
   | 'openapi.hidePattern'

package/src/core/types/mcp.ts

@@ -0,0 +1,8 @@
+export type MCPClientType = 'cursor' | 'vscode';
+
+export type MCPOption = 'cursor' | 'vscode' | 'copy';
+
+export type McpConnectionParams = {
+  serverName: string;
+  url: string;
+};

package/src/core/types/segmented.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { SelectOption } from './select';
+
+export type SegmentedOption<T> = SelectOption<T> & {
+  divider?: React.ReactNode;
+};
+
+export type SegmentedProps<T = any> = {
+  options: SegmentedOption<T>[];
+  value: T;
+  onChange: ({ label, value }: SegmentedOption<T>) => void;
+  className?: string;
+  size?: 'regular' | 'small';
+};

package/src/core/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './clipboard-service';
 export * from './css-variables';
 export * from './add-line-numbers';
+export * from './mcp';
 export * from './media-css';
 export * from './theme-helpers';
 export * from './class-names';

package/src/core/utils/mcp.ts

@@ -0,0 +1,34 @@
+import type { MCPClientType, McpConnectionParams } from '../types';
+
+function generateCursorMCPDeepLink(config: McpConnectionParams): string {
+  const cursorConfig = {
+    url: config.url,
+    description: 'MCP Server',
+  };
+  const encodedConfig = btoa(JSON.stringify(cursorConfig));
+  return `cursor://anysphere.cursor-deeplink/mcp/install?name=${config.serverName}&config=${encodedConfig}`;
+}
+
+function generateVSCodeMCPDeepLink(config: McpConnectionParams): string {
+  const vscodeConfig = {
+    name: config.serverName,
+    url: config.url,
+    type: 'http',
+  };
+  const encodedConfig = encodeURIComponent(JSON.stringify(vscodeConfig));
+  return `vscode:mcp/install?${encodedConfig}`;
+}
+
+export function generateMCPDeepLink(
+  clientType: MCPClientType,
+  config: McpConnectionParams,
+): string {
+  switch (clientType) {
+    case 'cursor':
+      return generateCursorMCPDeepLink(config);
+    case 'vscode':
+      return generateVSCodeMCPDeepLink(config);
+    default:
+      return generateCursorMCPDeepLink(config);
+  }
+}

package/src/icons/ConnectIcon/ConnectIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.5 7.00875C9.74669 7.00947 9.01371 7.25321 8.40999 7.70375L6.29999 5.59375C6.75586 4.99443 7.00185 4.26175 6.99999 3.50875C7.00197 2.72021 6.73759 1.9541 6.24973 1.33459C5.76186 0.715073 5.07908 0.278462 4.31205 0.0955081C3.54502 -0.0874454 2.73868 -0.00601915 2.02371 0.326591C1.30874 0.659201 0.727035 1.2235 0.372873 1.92805C0.0187108 2.63259 -0.087157 3.43608 0.0724264 4.20832C0.23201 4.98055 0.647693 5.67627 1.25211 6.18272C1.85652 6.68917 2.61425 6.97668 3.4025 6.99864C4.19074 7.02061 4.96331 6.77576 5.59499 6.30375L7.69999 8.41375C7.22812 9.04527 6.98326 9.81759 7.00508 10.6056C7.0269 11.3937 7.31412 12.1512 7.82021 12.7557C8.32631 13.3601 9.02164 13.776 9.79358 13.9359C10.5655 14.0959 11.3688 13.9906 12.0735 13.637C12.7781 13.2834 13.3427 12.7024 13.6758 11.9879C14.009 11.2734 14.0912 10.4674 13.9091 9.70036C13.727 8.93334 13.2913 8.25026 12.6726 7.76174C12.0539 7.27323 11.2883 7.00791 10.5 7.00875ZM0.999993 3.50875C0.999993 3.0143 1.14662 2.53095 1.42132 2.11983C1.69602 1.70871 2.08647 1.38827 2.54328 1.19906C3.0001 1.00984 3.50277 0.960328 3.98772 1.05679C4.47267 1.15325 4.91813 1.39136 5.26776 1.74099C5.61739 2.09062 5.85549 2.53608 5.95196 3.02103C6.04842 3.50598 5.99891 4.00865 5.80969 4.46546C5.62047 4.92228 5.30004 5.31272 4.88892 5.58743C4.4778 5.86213 3.99445 6.00875 3.49999 6.00875C2.83695 6.00875 2.20107 5.74536 1.73223 5.27652C1.26339 4.80768 0.999993 4.1718 0.999993 3.50875Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const ConnectIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ConnectIcon/ConnectIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+`;

package/src/icons/VSCodeIcon/VSCodeIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 100 100"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="m70.9119 99.3171c1.575.6136 3.3709.5743 4.9606-.1907l20.5883-9.9067c2.1634-1.041 3.5392-3.2305 3.5392-5.6325v-67.1739c0-2.402-1.3757-4.5915-3.5391-5.6325l-20.5884-9.907044c-2.0863-1.003885-4.5279-.757996-6.359.573194-.2615.19016-.5107.40248-.7445.63646l-39.4139 35.95809-17.1679-13.0319c-1.5982-1.2131-3.83357-1.1137-5.31787.2365l-5.5063 5.0088c-1.815582 1.6515-1.817663 4.5078-.0045 6.1621l14.88857 13.5831-14.88857 13.5831c-1.813163 1.6542-1.811082 4.5106.0045 6.1621l5.5063 5.0088c1.4843 1.3502 3.71967 1.4496 5.31787.2364l17.1679-13.0318 39.4139 35.958c.6235.6239 1.3556 1.0937 2.1429 1.4004zm4.1033-72.0182-29.9061 22.7012 29.9061 22.7011z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+export const VSCodeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/VSCodeIcon/VSCodeIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/markdoc/components/ConnectMCP/ConnectMCP.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+import type { MCPOption } from '@redocly/theme/core/types';
+
+import { ConnectMCPButton } from '@redocly/theme/components/Buttons/ConnectMCPButton';
+import { useThemeConfig } from '@redocly/theme/core/hooks';
+
+export type ConnectMCPProps = {
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  options?: MCPOption[];
+};
+
+export function ConnectMCP({
+  placement = 'bottom',
+  alignment = 'start',
+  options,
+}: ConnectMCPProps): JSX.Element | null {
+  const themeConfig = useThemeConfig();
+  const isMcpDisabled = themeConfig.mcp?.hide || themeConfig.mcp?.docs?.hide;
+
+  if (isMcpDisabled) {
+    return null;
+  }
+
+  return <ConnectMCPButton placement={placement} alignment={alignment} options={options} />;
+}

package/src/markdoc/components/default.ts

@@ -20,3 +20,4 @@ export * from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeToggle';
 export * from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeContainer';
 export * from '@redocly/theme/markdoc/components/CodeGroup/CodeGroup';
 export * from '@redocly/theme/markdoc/components/Icon/Icon';
+export * from '@redocly/theme/markdoc/components/ConnectMCP/ConnectMCP';

package/src/markdoc/default.ts

@@ -25,6 +25,7 @@ import { input } from '@redocly/theme/markdoc/tags/input';
 import { toggle } from '@redocly/theme/markdoc/tags/code-toggle';
 import { codeGroup } from '@redocly/theme/markdoc/tags/code-group';
 import { icon } from '@redocly/theme/markdoc/tags/icon';
+import { connectMcp } from '@redocly/theme/markdoc/tags/connect-mcp';
 
 export const tags = {
   [admonition.tagName]: admonition.schema,
@@ -45,4 +46,5 @@ export const tags = {
   [input.tagName]: input.schema,
   [codeGroup.tagName]: codeGroup.schema,
   [icon.tagName]: icon.schema,
+  [connectMcp.tagName]: connectMcp.schema,
 };

package/src/markdoc/tags/connect-mcp.ts

@@ -0,0 +1,25 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const connectMcp: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'ConnectMCP',
+    attributes: {
+      placement: {
+        type: String,
+        default: 'bottom',
+        matches: ['top', 'bottom'],
+      },
+      alignment: {
+        type: String,
+        default: 'start',
+        matches: ['start', 'end'],
+      },
+      options: {
+        type: Array,
+        default: ['cursor', 'vscode', 'copy'],
+      },
+    },
+    selfClosing: true,
+  },
+  tagName: 'connect-mcp',
+};