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

Code before:
      setSelectedClient(client)
    }
  }
  React.useEffect(() => {
    onClientSelect?.(selectedClient)
  }, [selectedClient, onClientSelect])

  const innerPanelSpacing = 'px-4 py-3'

  return (
    <div className={cn('space-y-6', className)}>
      <div className={cn('border rounded-lg')}>
        <h3 className={innerPanelSpacing}>Options</h3>
        <Separator />
        <McpConfigurationOptions
          className={innerPanelSpacing}
          isPlatform={isPlatform}
          readonly={readonly}
          onReadonlyChange={setReadonly}
          selectedFeatures={selectedFeaturesSupported}
          onFeaturesChange={setSelectedFeatures}
          featureGroups={isPlatform ? FEATURE_GROUPS_PLATFORM : FEATURE_GROUPS_NON_PLATFORM}
        />
        <div className={innerPanelSpacing}>
          <CodeBlock
            focusable={false}
            title="Server URL"
            hideLineNumbers
            language="http"
            className="max-h-64 overflow-y-auto"
          >
            {mcpUrl}
          </CodeBlock>
        </div>
      </div>
      <div className="flex flex-col gap-y-3">
        <ClientSelectDropdown
          label="Client"
          clients={MCP_CLIENTS}
          selectedClient={selectedClient}
          onClientChange={handleClientChange}
          basePath={basePath}
          theme={theme}
        />
        <p className="text-xs text-foreground-lighter">
          Configure your MCP client to connect with your Supabase project
        </p>
      </div>
      <div className={cn('border rounded-lg')}>
        <div className={innerPanelSpacing}>
          <h3>Installation</h3>

Review comment (suggestion):
I've added this in the "Options" section right below the inputs because it seems like it belongs before any client-specific instructions and felt weird to have floating around in a new section.

Code after:
    if (client) {
      setSelectedClient(client)
    }
  }
  React.useEffect(() => {
    onClientSelect?.(selectedClient)
  }, [selectedClient, onClientSelect])

  const innerPanelSpacing = 'px-4 py-3'

  return (
    <div className={cn('space-y-6', className)}>
      <div className={cn('border rounded-lg')}>
        <h3 className={innerPanelSpacing}>Options</h3>
        <Separator />
        <McpConfigurationOptions
          className={innerPanelSpacing}
          isPlatform={isPlatform}
          readonly={readonly}
          onReadonlyChange={setReadonly}
          selectedFeatures={selectedFeaturesSupported}
          onFeaturesChange={setSelectedFeatures}
          featureGroups={isPlatform ? FEATURE_GROUPS_PLATFORM : FEATURE_GROUPS_NON_PLATFORM}
        />
        <div className={innerPanelSpacing}>
          <CodeBlock
            focusable={false}
            title={
              <div className="flex items-center gap-2">
                Server URL
                <InfoTooltip>
                  {`MCP clients should support the Streamable HTTP transport${isPlatform ? ' and OAuth 2.1 with dynamic client registration' : ''}`}
                </InfoTooltip>
              </div>
            }
            hideLineNumbers
            language="http"
            className="max-h-64 overflow-y-auto"
          >
            {mcpUrl}
          </CodeBlock>
        </div>
      </div>
      <div className="flex flex-col gap-y-3">
        <ClientSelectDropdown
          label="Client"
          clients={MCP_CLIENTS}
          selectedClient={selectedClient}
          onClientChange={handleClientChange}
          basePath={basePath}
          theme={theme}