@redocly/theme/src/core/hooks/use-mcp-config.ts

Shared UI components lib

import { useMemo } from 'react';

import { useThemeHooks } from './use-theme-hooks';
import { IS_BROWSER } from '../utils/dom';
import { DEFAULT_MCP_SERVER_NAME } from '../constants';
import { generateMCPDeepLink } from '../utils/mcp';
import { withPathPrefix } from '../utils/urls';

export type McpConfig = {
  serverName: string;
  origin: string;
  serverUrl: string;
  cursorUrl: string;
  vscodeUrl: string;
  isMcpDisabled: boolean;
};

export function useMCPConfig(): McpConfig {
  const { useMcpData } = useThemeHooks();

  const {
    docs: { enabled, name },
  } = useMcpData();

  const origin = IS_BROWSER
    ? window.location.origin
    : ((globalThis as { SSR_HOSTNAME?: string })['SSR_HOSTNAME'] ?? '');
  const serverName = name || DEFAULT_MCP_SERVER_NAME;
  const serverUrl = `${origin}${withPathPrefix('/mcp')}`;
  const isMcpDisabled = !enabled || false;

  const cursorUrl = useMemo(
    () => generateMCPDeepLink('cursor', { serverName, url: serverUrl }),
    [serverName, serverUrl],
  );

  const vscodeUrl = useMemo(
    () => generateMCPDeepLink('vscode', { serverName, url: serverUrl }),
    [serverName, serverUrl],
  );

  return {
    serverName,
    origin,
    serverUrl,
    cursorUrl,
    vscodeUrl,
    isMcpDisabled,
  };
}