Repository: supabase/supabase
File: packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx (TypeScript)

Code before:
'use client'

import React, { useMemo, useState } from 'react'
import { cn, Separator } from 'ui'

import { ClientSelectDropdown } from './components/ClientSelectDropdown'
import { McpConfigurationDisplay } from './components/McpConfigurationDisplay'
import { McpConfigurationOptions } from './components/McpConfigurationOptions'
import { FEATURE_GROUPS_PLATFORM, FEATURE_GROUPS_NON_PLATFORM, MCP_CLIENTS } from './constants'
import type { McpClient } from './types'
import { getMcpUrl } from './utils/getMcpUrl'

export interface McpConfigPanelProps {
  basePath: string
  baseUrl?: string
  projectRef?: string
  initialSelectedClient?: McpClient
  onClientSelect?: (client: McpClient) => void
  theme?: 'light' | 'dark'
  className?: string
  isPlatform: boolean // For docs this is controlled by state, for studio by environment variable
  apiUrl: string | null
}

export function McpConfigPanel({
  basePath,
  projectRef,
  initialSelectedClient,
  onClientSelect,
  className,
  theme = 'dark',
  isPlatform,
  apiUrl,
}: McpConfigPanelProps) {
  const [readonly, setReadonly] = useState(false)
  const [selectedFeatures, setSelectedFeatures] = useState<string[]>([])
  const [selectedClient, setSelectedClient] = useState(initialSelectedClient ?? MCP_CLIENTS[0])

  const supportedFeatures = isPlatform ? FEATURE_GROUPS_PLATFORM : FEATURE_GROUPS_NON_PLATFORM
  const selectedFeaturesSupported = useMemo(() => {
    return selectedFeatures.filter((feature) =>
      supportedFeatures.some((group) => group.id === feature)
    )
  }, [selectedFeatures, supportedFeatures])

  const { clientConfig } = getMcpUrl({
    projectRef,

Review comment (suggestion):
Consider making this optional instead of `null`?

```suggestion
  apiUrl?: string
```

Code after:
'use client'

import React, { useMemo, useState } from 'react'
import { cn, Separator } from 'ui'

import { ClientSelectDropdown } from './components/ClientSelectDropdown'
import { McpConfigurationDisplay } from './components/McpConfigurationDisplay'
import { McpConfigurationOptions } from './components/McpConfigurationOptions'
import { FEATURE_GROUPS_PLATFORM, FEATURE_GROUPS_NON_PLATFORM, MCP_CLIENTS } from './constants'
import type { McpClient } from './types'
import { getMcpUrl } from './utils/getMcpUrl'

export interface McpConfigPanelProps {
  basePath: string
  baseUrl?: string
  projectRef?: string
  initialSelectedClient?: McpClient
  onClientSelect?: (client: McpClient) => void
  theme?: 'light' | 'dark'
  className?: string
  isPlatform: boolean // For docs this is controlled by state, for studio by environment variable
  apiUrl?: string
}

export function McpConfigPanel({
  basePath,
  projectRef,
  initialSelectedClient,
  onClientSelect,
  className,
  theme = 'dark',
  isPlatform,
  apiUrl,
}: McpConfigPanelProps) {
  const [readonly, setReadonly] = useState(false)
  const [selectedFeatures, setSelectedFeatures] = useState<string[]>([])
  const [selectedClient, setSelectedClient] = useState(initialSelectedClient ?? MCP_CLIENTS[0])

  const supportedFeatures = isPlatform ? FEATURE_GROUPS_PLATFORM : FEATURE_GROUPS_NON_PLATFORM
  const selectedFeaturesSupported = useMemo(() => {
    return selectedFeatures.filter((feature) =>
      supportedFeatures.some((group) => group.id === feature)
    )
  }, [selectedFeatures, supportedFeatures])

  const { clientConfig } = getMcpUrl({
    projectRef,