McpConfigPanel() — supabase Function Reference

Architecture documentation for the McpConfigPanel() function in McpConfigPanel.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ McpConfigPanel() — supabase Function Reference

Dependency Diagram

graph TD
  205c5e0d_76ab_9095_1629_c46616c5ed02["McpConfigPanel()"]
  4b70e582_d1b2_fa26_b397_618941837a63["useSendTelemetryEvent()"]
  205c5e0d_76ab_9095_1629_c46616c5ed02 -->|calls| 4b70e582_d1b2_fa26_b397_618941837a63
  style 205c5e0d_76ab_9095_1629_c46616c5ed02 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/features/ui/McpConfigPanel.tsx lines 265–351

export function McpConfigPanel() {
  const [selectedProject, setSelectedProject] = useState<{ ref: string; name: string } | null>(null)
  const [selectedPlatform, setSelectedPlatform] = useState<'hosted' | 'local'>('hosted')
  const [selectedClient, setSelectedClient] = useState<McpClient | null>(null)
  const { resolvedTheme } = useTheme()
  const sendTelemetryEvent = useSendTelemetryEvent()

  const isPlatform = selectedPlatform === 'hosted'
  const project = isPlatform ? selectedProject : null

  const handleCopy = useMemo(
    () =>
      createMcpCopyHandler({
        selectedClient,
        source: 'docs',
        onTrack: (event) => {
          sendTelemetryEvent({
            action: event.action,
            properties: event.properties,
            groups: (event.groups || {}) as any,
          })
        },
        projectRef: project?.ref,
      }),
    [selectedClient, sendTelemetryEvent, project?.ref]
  )

  const handleInstall = () => {
    if (selectedClient?.label) {
      sendTelemetryEvent({
        action: 'mcp_install_button_clicked',
        properties: {
          client: selectedClient.label,
          source: 'docs',
        },
        groups: {
          ...(project?.ref && { project: project.ref }),
        } as any,
      })
    }
  }

  return (
    <>
      <div className="not-prose">
        <div className="flex flex-wrap gap-3 mb-3">
          <PlatformSelector
            selectedPlatform={selectedPlatform}
            onPlatformSelect={setSelectedPlatform}
          />
          {isPlatform && (
            <ProjectSelector selectedProject={project} onProjectSelect={setSelectedProject} />
          )}
        </div>
        <p className="text-xs text-foreground-lighter">
          {isPlatform
            ? 'Scope the MCP server to a project. If no project is selected, all projects will be accessible.'
            : 'Project selection is only available for the hosted platform.'}
        </p>
        <McpConfigPanelBase
          basePath="/docs"
          className="mt-6"
          projectRef={project?.ref}
          theme={resolvedTheme as 'light' | 'dark'}
          isPlatform={isPlatform}
          onCopyCallback={handleCopy}
          onInstallCallback={handleInstall}
          onClientSelect={setSelectedClient}
        />
      </div>
      {isPlatform && (
        <Admonition type="note" title="Authentication" className="mt-3">
          <p>
            {
              "Some MCP clients will automatically prompt you to login during setup, while others may require manual authentication steps. Either authentication method will open a browser window where you can login to your Supabase account and grant organization access to the MCP client. In the future, we'll offer more fine grain control over these permissions."
            }
          </p>
          <p>
            {
              'Previously Supabase MCP required you to generate a personal access token (PAT), but this is no longer required.'
            }
          </p>
        </Admonition>
      )}
    </>
  )
}