@redocly/theme 0.70.0-next.6 → 0.70.0-next.8

package/src/components/Search/SearchDialog.tsx

@@ -19,6 +19,7 @@ import {
   useSearchFilter,
   useRecentSearches,
   useModalScrollLock,
+  usePersistedQuickFilter,
 } from '@redocly/theme/core/hooks';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
@@ -81,6 +82,16 @@ export function SearchDialog({
     onFacetReset,
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
+  usePersistedQuickFilter({
+    filter,
+    setFilter,
+    facets,
+    groupField,
+    query,
+    isSearchLoading,
+    searchError,
+    enabled: initialMode === 'search',
+  });
   const { addSearchHistoryItem } = useRecentSearches();
   const aiSearch = useAiSearch({ filter: filter, product: product?.name });
   useModalScrollLock(true);

package/src/components/Search/SearchItem.tsx

@@ -78,7 +78,9 @@ export function SearchItem({
               <SearchItemOperationTag color={httpColor}>
                 {document.httpMethod.toUpperCase()}
               </SearchItemOperationTag>
-              {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
+              <span>
+                {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
+              </span>
             </SearchItemOperation>
           ) : null}
           <SearchItemTitleWrapper>

package/src/components/Search/SearchTrigger.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -9,6 +9,9 @@ import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 import { breakpoints, getUserAgent } from '@redocly/theme/core/utils';
 import { DEFAULT_KEYBOARD_SHORTCUTS } from '@redocly/theme/core/constants';
 
+const MAC_SHORTCUT_LABEL = '⌘K';
+const SHORTCUT_LABEL = 'Ctrl+K';
+
 export type SearchTriggerProps = {
   onClick: () => void;
   className?: string;
@@ -31,8 +34,8 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   }
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
-  // A page can be cached and served to every platform, so the server renders a hidden
-  // placeholder and the browser picks the label after hydration.
+  // A page can be cached and served to every platform, so the server renders an empty
+  // slot and the browser picks the label after hydration.
   const [isMac, setIsMac] = React.useState<boolean | undefined>(undefined);
   React.useEffect(() => setIsMac(getUserAgent().includes('Mac')), []);
 
@@ -56,8 +59,12 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
         <SearchIcon />
         {translate('search.navbar.label', 'Search')}
         {mainShortcutKey === DEFAULT_KEYBOARD_SHORTCUTS ? (
-          <SearchTriggerShortcut $isPending={isMac === undefined}>
-            {isMac ? '⌘K' : 'Ctrl+K'}
+          <SearchTriggerShortcut>
+            {isMac === undefined ? null : (
+              <SearchTriggerShortcutLabel>
+                {isMac ? MAC_SHORTCUT_LABEL : SHORTCUT_LABEL}
+              </SearchTriggerShortcutLabel>
+            )}
           </SearchTriggerShortcut>
         ) : (
           <span>{mainShortcutKey}</span>
@@ -85,8 +92,36 @@ const SearchTriggerButton = styled(Button)`
   }
 `;
 
-const SearchTriggerShortcut = styled.span<{ $isPending: boolean }>`
-  visibility: ${({ $isPending }) => ($isPending ? 'hidden' : 'visible')};
+// The hidden copy of the wider label keeps the slot the same width before and after
+// hydration on every platform, so the trigger does not shift when the label appears.
+const SearchTriggerShortcut = styled.span`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  &::after {
+    content: '${SHORTCUT_LABEL}';
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+`;
+
+const shortcutAppear = keyframes`
+  from {
+    opacity: 0;
+    filter: blur(2px);
+    transform: translateY(3px);
+  }
+`;
+
+const SearchTriggerShortcutLabel = styled.span`
+  animation: ${shortcutAppear} var(--search-trigger-shortcut-appear-duration)
+    var(--search-trigger-shortcut-appear-easing);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 `;
 
 const SearchTriggerInput = styled.div`

package/src/components/Search/variables.ts

@@ -145,6 +145,8 @@ export const search = css`
   --search-trigger-bg-color: var(--navbar-bg-color);
   --search-trigger-icon-size: 16px;
   --search-trigger-line-height: var(--line-height-base);
+  --search-trigger-shortcut-appear-duration: 300ms;
+  --search-trigger-shortcut-appear-easing: ease-out;
 
   /**
   * @tokens AI Search

package/src/core/constants/mcp.ts

@@ -4,6 +4,6 @@ export const MCP_ROUTE = '/mcp';
 
 export const PUBLIC_MCP_ROUTE = '/mcp-public';
 
-export const MCP_OPTIONS = ['cursor', 'vscode', 'claude-code', 'codex', 'copy'] as const;
+export const MCP_OPTIONS = ['cursor', 'vscode', 'claude', 'claude-code', 'codex', 'copy'] as const;
 
 export const DEFAULT_MCP_OPTIONS = [...MCP_OPTIONS];

package/src/core/contexts/PortalContainerContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+/** Where theme portals mount; set it inside a shadow root (the AI assistant web component), else `document.body`. */
+export const PortalContainerContext = createContext<HTMLElement | null>(null);

package/src/core/hooks/__mocks__/index.ts

@@ -24,6 +24,7 @@ export * from '../feedback/use-report-dialog';
 export * from '../use-product-picker';
 export * from '../search/use-search-dialog';
 export * from '../search/use-search-ai-activity';
+export * from '../search/use-persisted-quick-filter';
 export * from '../use-language-picker';
 export * from './use-element-size';
 export * from './use-time-ago';

package/src/core/hooks/code-walkthrough/use-code-panel.ts

@@ -4,7 +4,7 @@ import type {
   CodeWalkthroughFile,
   CodeWalkthroughNode,
   CodeWalkthroughConditionsObject,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { CodeWalkthroughControlsStateContext } from '../../contexts/CodeWalkthrough/CodeWalkthroughControlsContext';
 import { CodeWalkthroughStepsContext } from '../../contexts/CodeWalkthrough/CodeWalkthroughStepsContext';

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -10,7 +10,7 @@ import type {
   CodeWalkthroughFilterItem,
   CodeWalkthroughConditionsObject,
   CodeWalkthroughControlsState,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { downloadCodeWalkthrough } from '../../utils/download-code-walkthrough';
 import { matchCodeWalkthroughConditions } from '../../utils/match-code-walkthrough-conditions';
@@ -98,7 +98,7 @@ export function useCodeWalkthroughControls(
     Object.entries(newState).forEach(([id, control]) => {
       const existingControl = controlsState[id];
       if (existingControl && existingControl.type === control.type) {
-        // @ts-expect-error
+        // @ts-expect-error: TS2322 - the spread loses the link between `type` and `value` in the control union
         newState[id] = {
           ...control,
           value: existingControl.value,

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
-import type { CodeWalkthroughStepAttr } from '@redocly/config';
+import type { CodeWalkthroughStepAttr } from '@redocly/theme/core/types';
 import type { ActiveStep, WalkthroughStepsState } from '../../types/code-walkthrough';
 import type { MarkerArea } from '../../types/marker';
 

package/src/core/hooks/code-walkthrough/use-code-walkthrough.ts

@@ -1,9 +1,9 @@
 import type {
+  CodeWalkthroughAttr,
   CodeWalkthroughFile,
   CodeWalkthroughStepAttr,
-  CodeWalkthroughAttr,
-} from '@redocly/config';
-import type { WalkthroughStepsState } from '../../types/code-walkthrough';
+  WalkthroughStepsState,
+} from '../../types/code-walkthrough';
 
 import {
   useCodeWalkthroughControls,

package/src/core/hooks/code-walkthrough/use-renderable-files.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { findClosestCommonDirectory } from '../../utils/find-closest-common-directory';
 import { getFileIconByExt } from '../../utils/GetFileIcon';

package/src/core/hooks/index.ts

@@ -31,6 +31,7 @@ export * from './search/use-search-dialog';
 export * from './search/use-search-filter';
 export * from './search/use-feedback-tooltip';
 export * from './search/use-search-ai-activity';
+export * from './search/use-persisted-quick-filter';
 export * from './use-controlled-state';
 export * from './use-codeblock-tabs-controls';
 export * from './code-walkthrough/use-code-walkthrough';

package/src/core/hooks/search/use-persisted-quick-filter.ts

@@ -0,0 +1,125 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { Dispatch, SetStateAction } from 'react';
+import type { SearchFacet, SearchFilterItem } from '../../types/search';
+
+import { createStore, useStore } from '../use-store';
+
+type StoredQuickFilter = Pick<SearchFilterItem, 'field' | 'values'>;
+
+const quickFilterStore = createStore<StoredQuickFilter | null>({
+  storageKey: 'searchQuickFilter',
+  storageType: 'sessionStorage',
+});
+
+const findQuickFilter = (filter: SearchFilterItem[]) => filter.find((item) => item.isQuickFilter);
+
+const withQuickFilter = (filter: SearchFilterItem[], quickFilter: StoredQuickFilter) => [
+  ...filter.filter((item) => !item.isQuickFilter),
+  ...(quickFilter.values.length ? [{ ...quickFilter, isQuickFilter: true }] : []),
+];
+
+const groupFacetValues = (facets: SearchFacet[], field: string) => {
+  const facet = facets.find((item) => item.field === field);
+  const values = facet?.values ?? [];
+  return {
+    present: facet !== undefined,
+    values: values.map((item) => (typeof item === 'string' ? item : item.value)),
+    counted: values.some((item) => typeof item !== 'string' && item.isCounterVisible),
+  };
+};
+
+const isRestorable = (
+  stored: StoredQuickFilter | null,
+  groupField: string,
+): stored is StoredQuickFilter =>
+  !!stored &&
+  stored.field === groupField &&
+  Array.isArray(stored.values) &&
+  stored.values.length > 0 &&
+  stored.values.every((value) => typeof value === 'string');
+
+type UsePersistedQuickFilterOptions = {
+  filter: SearchFilterItem[];
+  setFilter: Dispatch<SetStateAction<SearchFilterItem[]>>;
+  facets: SearchFacet[];
+  groupField: string;
+  query: string;
+  isSearchLoading: boolean;
+  searchError: string | null;
+  enabled?: boolean;
+};
+
+/**
+ * Remembers the quick filter on `groupField` for the browser tab and restores it on mount unless
+ * one is already selected. Restored values are dropped once known not to exist: absent from the
+ * full value list, or from the `groupField` facet left by the first search that finishes without
+ * error on an empty query (the restored value is that search's filter, so a value without
+ * documents is not counted). Does nothing while `enabled` is false.
+ */
+export function usePersistedQuickFilter({
+  filter,
+  setFilter,
+  facets,
+  groupField,
+  query,
+  isSearchLoading,
+  searchError,
+  enabled = true,
+}: UsePersistedQuickFilterOptions): void {
+  const [stored, setStored] = useStore(quickFilterStore, null);
+  const [initial] = useState(() =>
+    enabled && isRestorable(stored, groupField) && !findQuickFilter(filter) ? stored.values : null,
+  );
+  const phaseRef = useRef<'restoring' | 'validating' | 'done'>(initial ? 'restoring' : 'done');
+  const searchedRef = useRef(false);
+
+  useEffect(() => {
+    if (!initial) return;
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the filter state belongs to the product's `useSearch` and starts empty on every mount
+    setFilter((current) => withQuickFilter(current, { field: groupField, values: initial }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- applies only to the initial state
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const quickFilter = findQuickFilter(filter);
+    // The commit that starts the restore still sees the empty initial filter.
+    if (phaseRef.current === 'restoring') {
+      if (!quickFilter) return;
+      phaseRef.current = 'validating';
+    }
+    if (phaseRef.current === 'validating' && initial) {
+      if (isSearchLoading) searchedRef.current = true;
+      const settled = searchedRef.current && !isSearchLoading && !searchError && !query.trim();
+      const { present, values: known, counted } = groupFacetValues(facets, groupField);
+      if ((known.length && !counted) || (settled && present)) {
+        phaseRef.current = 'done';
+        const values = quickFilter?.values.filter(
+          (value) => known.includes(value) || !initial.includes(value),
+        );
+        if (quickFilter && values && values.length !== quickFilter.values.length) {
+          // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the facets arrive after the restore
+          setFilter((current) => withQuickFilter(current, { field: groupField, values }));
+          return;
+        }
+      }
+    }
+    const next = quickFilter ? { field: quickFilter.field, values: quickFilter.values } : null;
+    if (JSON.stringify(next) !== JSON.stringify(stored)) {
+      setStored(next);
+    }
+  }, [
+    enabled,
+    filter,
+    facets,
+    groupField,
+    query,
+    isSearchLoading,
+    searchError,
+    initial,
+    stored,
+    setFilter,
+    setStored,
+  ]);
+}

package/src/core/hooks/use-connect-mcp-button.ts

@@ -7,7 +7,12 @@ import { useThemeHooks } from './use-theme-hooks';
 import { useMCPConfig } from './use-mcp-config';
 import { ClipboardService } from '../utils/clipboard-service';
 import { DEFAULT_MCP_OPTIONS } from '../constants/mcp';
-import { generateClaudeCodeCommand, generateCodexCommand, isMCPOption } from '../utils/mcp';
+import {
+  generateClaudeCodeCommand,
+  generateCodexCommand,
+  generateMCPDeepLink,
+  isMCPOption,
+} from '../utils/mcp';
 import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
 
 export type McpButtonOptions = {
@@ -68,6 +73,7 @@ export function useConnectMCPButton({
       const urlMap: Partial<Record<MCPOption, string>> = {
         cursor: cursorUrl,
         vscode: vscodeUrl,
+        claude: generateMCPDeepLink('claude', connection),
       };
 
       window.open(urlMap[action], '_blank');

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

@@ -31,6 +31,7 @@ const DEFAULT_ENABLED_ACTIONS = [
   'claude',
   'docs-mcp-cursor',
   'docs-mcp-vscode',
+  'docs-mcp-claude',
 ] as const;
 
 export type PageActionType =
@@ -40,6 +41,7 @@ export type PageActionType =
   | 'claude'
   | 'docs-mcp-cursor'
   | 'docs-mcp-vscode'
+  | 'docs-mcp-claude'
   // Used in OpenAPI docs x-mcp
   | 'mcp-cursor'
   | 'mcp-vscode';
@@ -114,6 +116,7 @@ export function usePageActions(
     const actionHandlers: Record<PageActionType, () => PageAction> = {
       'docs-mcp-cursor': createMCPHandler('cursor', false),
       'docs-mcp-vscode': createMCPHandler('vscode', false),
+      'docs-mcp-claude': createMCPHandler('claude', false),
       'mcp-cursor': createMCPHandler('cursor', true),
       'mcp-vscode': createMCPHandler('vscode', true),
 
@@ -261,6 +264,19 @@ function createMCPAction({
     };
   }
 
+  if (clientType === 'claude') {
+    return {
+      ...sharedProps,
+      buttonText: translate('page.actions.connectMcp.claude', 'Connect to Claude'),
+      title: translate('page.actions.connectMcp.claude', 'Connect to Claude'),
+      description: translate(
+        'page.actions.connectMcp.claudeDescription',
+        'Add MCP server to your Claude account',
+      ),
+      iconComponent: ClaudeIcon,
+    };
+  }
+
   return {
     ...sharedProps,
     buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'),
@@ -337,6 +353,7 @@ function shouldHideActionByType(
       return !isPublic;
     case 'docs-mcp-cursor':
     case 'docs-mcp-vscode':
+    case 'docs-mcp-claude':
       return Boolean(mcpUrl) || isMcpDisabled;
     case 'mcp-cursor':
     case 'mcp-vscode':

package/src/core/styles/global.ts

@@ -20,7 +20,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';
@@ -1343,6 +1343,7 @@ export const tokens = css`
   ${breadcrumbs}
   ${button}
   ${aiAssistantButton}
+  ${connectMcpButton}
   ${cards}
   ${catalog}
   ${catalogClassic}

package/src/core/types/code-walkthrough.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { MarkerArea } from './marker';
 
 export type ActiveStep = string | null;
@@ -13,3 +14,105 @@ export type WalkthroughStepsState = {
   lockObserver?: React.RefObject<boolean>;
   filtersElementRef?: React.RefObject<HTMLDivElement | null>;
 };
+
+export type CodeWalkthroughStepAttr = {
+  id: string;
+  title?: string;
+};
+
+export type FilesetsMarkdocAttr = WithConditions<{
+  files?: string[];
+  downloadAssociatedFiles?: string[];
+}>[];
+
+export type InputsMarkdocAttr = {
+  [id: string]: WithConditions<{ value: string }>;
+};
+
+export type TogglesMarkdocAttr = {
+  [id: string]: CodeWalkthroughConditionsObject;
+};
+
+export type CodeWalkthroughConditions = {
+  [key: string]: string | string[] | undefined | boolean;
+};
+
+export type CodeWalkthroughFileset = WithConditions<{
+  files?: CodeWalkthroughFile[];
+  downloadAssociatedFiles?: CodeWalkthroughFile[];
+}>;
+export type CodeWalkthroughFile = {
+  path: string;
+  content: CodeWalkthroughNode[];
+  basename: string;
+  metadata: CodeWalkthroughFileMetadata;
+  language: string;
+};
+
+export type CodeWalkthroughChunk = {
+  start: number;
+  children: CodeWalkthroughNode[];
+  condition: CodeWalkthroughChunkCondition;
+};
+
+export type CodeWalkthroughChunkCondition = WithConditions<{
+  steps: string[];
+}>;
+
+export type CodeWalkthroughNode = CodeWalkthroughChunk | string;
+
+export type CodeWalkthroughFileMetadata = {
+  steps: string[];
+};
+
+export type CodeWalkthroughFilter = WithConditions<{
+  id: string;
+  label?: string;
+  items: CodeWalkthroughFilterItem[];
+}>;
+
+export type CodeWalkthroughFilterItem = WithConditions<{
+  value: string;
+}>;
+
+export type CodeWalkthroughConditionsObject = {
+  when?: CodeWalkthroughConditions;
+  unless?: CodeWalkthroughConditions;
+};
+
+export type WithConditions<T> = T & CodeWalkthroughConditionsObject;
+
+export type CodeWalkthroughControls = {
+  toggle: boolean;
+  input: string;
+  filter: string;
+};
+
+export type CodeWalkthroughControlState = WithConditions<
+  | {
+      value: string;
+      render: boolean;
+      type: 'input';
+    }
+  | {
+      value: string;
+      render: boolean;
+      type: 'filter';
+    }
+  | {
+      value: boolean;
+      render: boolean;
+      type: 'toggle';
+    }
+>;
+export type CodeWalkthroughControlsState = Record<string, CodeWalkthroughControlState>;
+
+export type CodeWalkthroughAttr = {
+  steps: CodeWalkthroughStepAttr[];
+  filters: Record<string, CodeWalkthroughFilter>;
+  filesets: CodeWalkthroughFileset[];
+  preview: ReactNode[];
+  inputs: InputsMarkdocAttr;
+  toggles: TogglesMarkdocAttr;
+  __idx: number;
+};

package/src/core/types/hooks.ts

@@ -191,6 +191,7 @@ export type ThemeHooks = {
     | 'startSpan'
     | 'constructCloudEvent'
     | 'sendToOtelService'
+    | 'withTracer'
   > & {
     send<TEventType extends AsyncApiRealmUI.EventType>(
       event: TEventType,

package/src/core/types/l10n.ts

@@ -124,6 +124,9 @@ export type TranslationKey =
   | 'search.ai.error.header.forbidden'
   | 'search.ai.error.header.unauthorized'
   | 'search.ai.feedback.more'
+  | 'search.ai.actions.copy'
+  | 'search.ai.actions.like'
+  | 'search.ai.actions.dislike'
   | 'search.searchItem.deprecated'
   | 'search.searchItem.enum'
   | 'search.searchItem.example'
@@ -149,6 +152,7 @@ export type TranslationKey =
   | 'page.mcpNotAllowed.snippets.terminal.hint'
   | 'page.mcpNotAllowed.snippets.claudeCode.headline'
   | 'page.mcpNotAllowed.snippets.claudeDesktop.headline'
+  | 'page.mcpNotAllowed.snippets.claudeDesktop.accountHint'
   | 'page.mcpNotAllowed.snippets.claudeDesktop.instruction'
   | 'page.mcpNotAllowed.snippets.chatgptApp.headline'
   | 'page.mcpNotAllowed.snippets.chatgptApp.instruction'
@@ -296,6 +300,8 @@ export type TranslationKey =
   | 'page.actions.connectMcp.cursorDescription'
   | 'page.actions.connectMcp.vscode'
   | 'page.actions.connectMcp.vscodeDescription'
+  | 'page.actions.connectMcp.claude'
+  | 'page.actions.connectMcp.claudeDescription'
   | 'page.actions.connectMcp.claudeCode'
   | 'page.actions.connectMcp.claudeCodeDescription'
   | 'page.actions.connectMcp.codex'

package/src/core/types/mcp.ts

@@ -1,6 +1,6 @@
 import type { MCP_OPTIONS } from '../constants/mcp';
 
-export type MCPClientType = 'cursor' | 'vscode';
+export type MCPClientType = 'cursor' | 'vscode' | 'claude';
 
 export type MCPOption = (typeof MCP_OPTIONS)[number];
 

package/src/core/utils/download-code-walkthrough.ts

@@ -1,6 +1,6 @@
 import { saveAs } from 'file-saver';
 
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { removeLeadingSlash } from './urls';
 import { findClosestCommonDirectory } from './find-closest-common-directory';

package/src/core/utils/get-code-walkthrough-file-text.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughFile, CodeWalkthroughNode } from '@redocly/config';
+import type { CodeWalkthroughFile, CodeWalkthroughNode } from '@redocly/theme/core/types';
 
 import { matchCodeWalkthroughConditions } from './match-code-walkthrough-conditions';
 import { replaceInputsWithValue } from './replace-inputs-with-value';

package/src/core/utils/match-code-walkthrough-conditions.ts

@@ -1,4 +1,4 @@
-import type { CodeWalkthroughConditionsObject } from '@redocly/config';
+import type { CodeWalkthroughConditionsObject } from '@redocly/theme/core/types';
 
 import { isObject } from './type-guards';
 

package/src/core/utils/mcp.ts

@@ -25,6 +25,12 @@ function generateVSCodeMCPDeepLink(config: McpConnectionParams): string {
   return `vscode:mcp/install?${encodedConfig}`;
 }
 
+function generateClaudeConnectorLink(config: McpConnectionParams): string {
+  const connectorName = encodeURIComponent(config.serverName);
+  const connectorUrl = encodeURIComponent(config.url);
+  return `https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=${connectorName}&connectorUrl=${connectorUrl}`;
+}
+
 export function generateMCPDeepLink(
   clientType: MCPClientType,
   config: McpConnectionParams,
@@ -34,8 +40,8 @@ export function generateMCPDeepLink(
       return generateCursorMCPDeepLink(config);
     case 'vscode':
       return generateVSCodeMCPDeepLink(config);
-    default:
-      return generateCursorMCPDeepLink(config);
+    case 'claude':
+      return generateClaudeConnectorLink(config);
   }
 }
 

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { CodeWalkthroughFilter } from '@redocly/config';
+import type { CodeWalkthroughFilter } from '@redocly/theme/core/types';
 
 import { Tag, ContentWrapper as TagContentWrapper } from '@redocly/theme/components/Tag/Tag';
 

package/src/markdoc/components/CodeWalkthrough/CodePanel.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { useCodePanel } from '@redocly/theme/core/hooks';
 import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';