- [](https://insiders.vscode.dev/redirect/mcp/install?name=supabase&inputs=%5B%7B%22type%22%3A%22promptString%22%2C%22id%22%3A%22supabase-access-token%22%2C%22description%22%3A%22Supabase%20personal%20access%20token%22%2C%22password%22%3Atrue%7D%5D&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40supabase%2Fmcp-server-supabase%40latest%22%2C%22--readonly%22%2C%22--project-ref%3D%24SUPABASE_MCP_PROJECT_REF%22%5D%2C%22env%22%3A%7B%22SUPABASE_ACCESS_TOKEN%22%3A%22%24%7Binput%3Asupabase-access-token%7D%22%2C%22SUPABASE_MCP_PROJECT_REF%22%3A%22%24%7Binput%3Asupabase-project-ref%7D%22%7D%7D)
- [](https://insiders.vscode.dev/redirect/mcp/install?name=supabase&inputs=%5B%7B%22type%22%3A%22promptString%22%2C%22id%22%3A%22supabase-access-token%22%2C%22description%22%3A%22Supabase%20personal%20access%20token%22%2C%22password%22%3Atrue%7D%5D&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40supabase%2Fmcp-server-supabase%40latest%22%2C%22--readonly%22%2C%22--project-ref%3D%24SUPABASE_MCP_PROJECT_REF%22%5D%2C%22env%22%3A%7B%22SUPABASE_ACCESS_TOKEN%22%3A%22%24%7Binput%3Asupabase-access-token%7D%22%2C%22SUPABASE_MCP_PROJECT_REF%22%3A%22%24%7Binput%3Asupabase-project-ref%7D%22%7D%7D&quality=insiders)
-
-
-1. Open [VS Code](https://code.visualstudio.com/) and create a `.vscode` directory in your project root if it doesn't exist.
-2. Create a `.vscode/mcp.json` file if it doesn't exist and open it.
-3. Add the following configuration:
-
- <$Partial path="mcp_supabase_vscode_config.mdx" />
-
-4. Save the configuration file and click the **Start** button that appears inline above the Supabase server definition. VS Code prompts you to enter your personal access token. Enter the token that you created earlier.
-5. Open Copilot chat and switch to "Agent" mode. You should see a tool icon that you can tap to confirm the MCP tools are available.
-
-
{[
- {
- name: 'Digital Ocean',
- description: 'Deploys using Terraform.',
- href: 'https://docs.digitalocean.com/developer-center/hosting-supabase-on-digitalocean/',
- },
{
name: 'StackGres',
description: 'Deploys using Kubernetes.',
diff --git a/apps/docs/features/docs/MdxBase.shared.tsx b/apps/docs/features/docs/MdxBase.shared.tsx
index 7a5bb363be174..2e1fef8edc4b4 100644
--- a/apps/docs/features/docs/MdxBase.shared.tsx
+++ b/apps/docs/features/docs/MdxBase.shared.tsx
@@ -1,11 +1,11 @@
import { ArrowDown, Check, X } from 'lucide-react'
import Link from 'next/link'
import { Button, Image } from 'ui'
+import { Heading } from 'ui/src/components/CustomHTMLElements'
import { Admonition } from 'ui-patterns/admonition'
import { GlassPanel } from 'ui-patterns/GlassPanel'
import { IconPanel } from 'ui-patterns/IconPanel'
import SqlToRest from 'ui-patterns/SqlToRest'
-import { Heading } from 'ui/src/components/CustomHTMLElements'
import { AiPromptsIndex } from '~/app/guides/getting-started/ai-prompts/[slug]/AiPromptsIndex'
import { AppleSecretGenerator } from '~/components/AppleSecretGenerator'
import AuthProviders from '~/components/AuthProviders'
@@ -29,6 +29,7 @@ import InfoTooltip from '~/features/ui/InfoTooltip'
import { ShowUntil } from '~/features/ui/ShowUntil'
import { TabPanel, Tabs } from '~/features/ui/Tabs'
import { ErrorCodes } from '../ui/ErrorCodes'
+import { McpConfigPanel } from '../ui/McpConfigPanel'
const components = {
Accordion,
@@ -53,6 +54,7 @@ const components = {
Image: (props: any) =>
+
+
+
+ No results found.
+
+ {projects?.map((project) => (
+ {
+ onProjectSelect?.(project.ref === selectedProject?.ref ? null : project)
+ setOpen(false)
+ }}
+ className="flex gap-2 items-center"
+ >
+ {project.name}
+
+ ))}
+
+
+
+
+
+ )
+}
+
+function PlatformSelector({
+ className,
+ selectedPlatform,
+ onPlatformSelect,
+}: {
+ className?: string
+ selectedPlatform: PlatformType
+ onPlatformSelect?: (platform: PlatformType) => void
+}) {
+ const [open, setOpen] = useState(false)
+
+ return (
+
+
+
+
+
+ {PLATFORMS.map((platform) => (
+ {
+ onPlatformSelect?.(platform.value)
+ setOpen(false)
+ }}
+ className="flex gap-2 items-center"
+ >
+ {platform.label}
+
+ ))}
+
+
+
+
+
+ )
+}
+
+export function McpConfigPanel() {
+ const [selectedProject, setSelectedProject] = useState<{ ref: string; name: string } | null>(null)
+ const [selectedPlatform, setSelectedPlatform] = useState<'hosted' | 'local'>('hosted')
+ const { theme } = useTheme()
+
+ const isPlatform = selectedPlatform === 'hosted'
+ const project = isPlatform ? selectedProject : null
+
+ return (
+
+
+ )
+ }
+
return (
void
label: string
items: ConnectionType[]
+ iconFolder?: string
+ supportsDarkMode?: boolean
}
export const ConnectDropdown = ({
@@ -30,6 +32,8 @@ export const ConnectDropdown = ({
label,
items,
+ iconFolder,
+ supportsDarkMode,
}: ConnectDropdownProps) => {
const [open, setOpen] = useState(false)
@@ -54,7 +58,15 @@ export const ConnectDropdown = ({
iconRight={ {
+export const ConnectionIcon = ({ icon, iconFolder, supportsDarkMode }: ConnectionIconProps) => {
const { resolvedTheme } = useTheme()
- const imageFolder = ['ionic-angular'].includes(icon) ? 'icons/frameworks' : 'libraries'
+ const imageFolder =
+ iconFolder || (['ionic-angular'].includes(icon) ? 'icons/frameworks' : 'libraries')
+
const imageExtension = imageFolder === 'icons/frameworks' ? '' : '-icon'
+
+ const shouldUseDarkMode =
+ supportsDarkMode ||
+ ['expo', 'nextjs', 'prisma', 'drizzle', 'astro', 'remix'].includes(icon.toLowerCase())
+
const iconImgSrc = icon.startsWith('http')
? icon
: `${BASE_PATH}/img/${imageFolder}/${icon.toLowerCase()}${
- ['expo', 'nextjs', 'prisma', 'drizzle', 'astro', 'remix'].includes(icon.toLowerCase())
- ? resolvedTheme?.includes('dark')
- ? '-dark'
- : ''
- : ''
+ shouldUseDarkMode && resolvedTheme?.includes('dark') ? '-dark' : ''
}${imageExtension}.svg`
return (
diff --git a/apps/studio/components/interfaces/Connect/McpTabContent.tsx b/apps/studio/components/interfaces/Connect/McpTabContent.tsx
new file mode 100644
index 0000000000000..bbb9beeb64024
--- /dev/null
+++ b/apps/studio/components/interfaces/Connect/McpTabContent.tsx
@@ -0,0 +1,50 @@
+import { IS_PLATFORM, useParams } from 'common'
+import Panel from 'components/ui/Panel'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { BASE_PATH } from 'lib/constants'
+import { useTheme } from 'next-themes'
+import { McpConfigPanel } from 'ui-patterns/McpUrlBuilder'
+import type { projectKeys } from './Connect.types'
+
+export const McpTabContent = ({ projectKeys }: { projectKeys: projectKeys }) => {
+ const { ref: projectRef } = useParams()
+
+ return (
+
+ {projectRef ? (
+
+ )
+}
+
+const McpTabContentInnerLoading = () => {
+ return (
+
+
+ Project
+
+
+ {!isUserLoading && !isLoggedIn ? (
+
+ ) : (
+
+
+ }
+ >
+
+ )}
+
+
+ {isUserLoading || isLoading
+ ? 'Loading projects...'
+ : isError
+ ? 'Error fetching projects'
+ : selectedProject?.name ?? 'Select a project'}
+
+
+
+
+ Platform
+
+
+
+
+ }
+ >
+
+
+
+ {PLATFORMS.find((p) => p.value === selectedPlatform)?.label}
+
+
+
+
+ )
+}
diff --git a/apps/docs/public/img/mcp-clients/claude-dark-icon.svg b/apps/docs/public/img/mcp-clients/claude-dark-icon.svg
new file mode 100644
index 0000000000000..b68b27324e2cc
--- /dev/null
+++ b/apps/docs/public/img/mcp-clients/claude-dark-icon.svg
@@ -0,0 +1,16 @@
+
diff --git a/apps/docs/public/img/mcp-clients/claude-icon.svg b/apps/docs/public/img/mcp-clients/claude-icon.svg
new file mode 100644
index 0000000000000..135a8b9f33f30
--- /dev/null
+++ b/apps/docs/public/img/mcp-clients/claude-icon.svg
@@ -0,0 +1,16 @@
+
\ No newline at end of file
diff --git a/apps/docs/public/img/mcp-clients/cursor-dark-icon.svg b/apps/docs/public/img/mcp-clients/cursor-dark-icon.svg
new file mode 100644
index 0000000000000..48f85eb4d5ae0
--- /dev/null
+++ b/apps/docs/public/img/mcp-clients/cursor-dark-icon.svg
@@ -0,0 +1 @@
+
diff --git a/apps/docs/public/img/mcp-clients/cursor-icon.svg b/apps/docs/public/img/mcp-clients/cursor-icon.svg
new file mode 100644
index 0000000000000..48f85eb4d5ae0
--- /dev/null
+++ b/apps/docs/public/img/mcp-clients/cursor-icon.svg
@@ -0,0 +1 @@
+
diff --git a/apps/docs/public/img/mcp-clients/vscode-dark-icon.svg b/apps/docs/public/img/mcp-clients/vscode-dark-icon.svg
new file mode 100644
index 0000000000000..c453e633f349c
--- /dev/null
+++ b/apps/docs/public/img/mcp-clients/vscode-dark-icon.svg
@@ -0,0 +1,41 @@
+
diff --git a/apps/docs/public/img/mcp-clients/vscode-icon.svg b/apps/docs/public/img/mcp-clients/vscode-icon.svg
new file mode 100644
index 0000000000000..c453e633f349c
--- /dev/null
+++ b/apps/docs/public/img/mcp-clients/vscode-icon.svg
@@ -0,0 +1,41 @@
+
diff --git a/apps/docs/public/img/mcp-clients/windsurf-dark-icon.svg b/apps/docs/public/img/mcp-clients/windsurf-dark-icon.svg
new file mode 100644
index 0000000000000..2e4e4e4921d0d
--- /dev/null
+++ b/apps/docs/public/img/mcp-clients/windsurf-dark-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/docs/public/img/mcp-clients/windsurf-icon.svg b/apps/docs/public/img/mcp-clients/windsurf-icon.svg
new file mode 100644
index 0000000000000..386f8c035dc15
--- /dev/null
+++ b/apps/docs/public/img/mcp-clients/windsurf-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/docs/turbo.json b/apps/docs/turbo.json
index d980120ebdc86..5e22a06e3d6bc 100644
--- a/apps/docs/turbo.json
+++ b/apps/docs/turbo.json
@@ -36,6 +36,7 @@
"NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID",
"NEXT_PUBLIC_GOTRUE_URL",
"NEXT_PUBLIC_SUPABASE_ANON_KEY",
+ "NEXT_PUBLIC_MCP_URL",
// These envs are technically passthrough env vars because they're only used on the server side of Nextjs
"ASSET_CDN_S3_ENDPOINT",
"AWS_ACCESS_KEY_ID",
diff --git a/apps/studio/components/interfaces/Connect/Connect.constants.ts b/apps/studio/components/interfaces/Connect/Connect.constants.ts
index 33ff40fa88b6f..6636fdc76ca12 100644
--- a/apps/studio/components/interfaces/Connect/Connect.constants.ts
+++ b/apps/studio/components/interfaces/Connect/Connect.constants.ts
@@ -350,6 +350,7 @@ export const CONNECTION_TYPES = [
{ key: 'frameworks', label: 'App Frameworks', obj: FRAMEWORKS },
{ key: 'mobiles', label: 'Mobile Frameworks', obj: MOBILES },
{ key: 'orms', label: 'ORMs', obj: ORMS },
+ { key: 'mcp', label: 'MCP', obj: [] },
]
export const PGBOUNCER_ENABLED_BUT_NO_IPV4_ADDON_TEXT =
diff --git a/apps/studio/components/interfaces/Connect/Connect.tsx b/apps/studio/components/interfaces/Connect/Connect.tsx
index 7a6f1e2133358..5f207ea614ce6 100644
--- a/apps/studio/components/interfaces/Connect/Connect.tsx
+++ b/apps/studio/components/interfaces/Connect/Connect.tsx
@@ -5,6 +5,7 @@ import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
import { useEffect, useMemo, useState } from 'react'
import { DatabaseConnectionString } from 'components/interfaces/Connect/DatabaseConnectionString'
+import { McpTabContent } from 'components/interfaces/Connect/McpTabContent'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import Panel from 'components/ui/Panel'
import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
@@ -357,6 +358,18 @@ export const Connect = () => {
)
}
+ if (type.key === 'mcp') {
+ return (
+
+
+ + {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.'} +
+
- {selectedItem?.icon ?
@@ -76,7 +88,15 @@ export const ConnectDropdown = ({
}}
className="flex gap-2 items-center"
>
- {item.icon ?
+
+ )
+}
+
+const McpTabContentInnerLoaded = ({
+ projectRef,
+ projectKeys,
+}: {
+ projectRef: string
+ projectKeys: projectKeys
+}) => {
+ const { resolvedTheme } = useTheme()
+
+ return (
+ {dayjs(timestamp).format(DateTimeFormats.FULL_SECONDS)}
- {payload
- .reverse()
- .filter((entry: any) => entry.value !== 0)
- .map((entry: any, index: number) => (
-
Total
diff --git a/apps/studio/public/img/mcp-clients/claude-dark-icon.svg b/apps/studio/public/img/mcp-clients/claude-dark-icon.svg
new file mode 100644
index 0000000000000..b68b27324e2cc
--- /dev/null
+++ b/apps/studio/public/img/mcp-clients/claude-dark-icon.svg
@@ -0,0 +1,16 @@
+
diff --git a/apps/studio/public/img/mcp-clients/claude-icon.svg b/apps/studio/public/img/mcp-clients/claude-icon.svg
new file mode 100644
index 0000000000000..135a8b9f33f30
--- /dev/null
+++ b/apps/studio/public/img/mcp-clients/claude-icon.svg
@@ -0,0 +1,16 @@
+
\ No newline at end of file
diff --git a/apps/studio/public/img/mcp-clients/cursor-dark-icon.svg b/apps/studio/public/img/mcp-clients/cursor-dark-icon.svg
new file mode 100644
index 0000000000000..48f85eb4d5ae0
--- /dev/null
+++ b/apps/studio/public/img/mcp-clients/cursor-dark-icon.svg
@@ -0,0 +1 @@
+
diff --git a/apps/studio/public/img/mcp-clients/cursor-icon.svg b/apps/studio/public/img/mcp-clients/cursor-icon.svg
new file mode 100644
index 0000000000000..48f85eb4d5ae0
--- /dev/null
+++ b/apps/studio/public/img/mcp-clients/cursor-icon.svg
@@ -0,0 +1 @@
+
diff --git a/apps/studio/public/img/mcp-clients/vscode-dark-icon.svg b/apps/studio/public/img/mcp-clients/vscode-dark-icon.svg
new file mode 100644
index 0000000000000..c453e633f349c
--- /dev/null
+++ b/apps/studio/public/img/mcp-clients/vscode-dark-icon.svg
@@ -0,0 +1,41 @@
+
diff --git a/apps/studio/public/img/mcp-clients/vscode-icon.svg b/apps/studio/public/img/mcp-clients/vscode-icon.svg
new file mode 100644
index 0000000000000..c453e633f349c
--- /dev/null
+++ b/apps/studio/public/img/mcp-clients/vscode-icon.svg
@@ -0,0 +1,41 @@
+
diff --git a/apps/studio/public/img/mcp-clients/windsurf-dark-icon.svg b/apps/studio/public/img/mcp-clients/windsurf-dark-icon.svg
new file mode 100644
index 0000000000000..2e4e4e4921d0d
--- /dev/null
+++ b/apps/studio/public/img/mcp-clients/windsurf-dark-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/studio/public/img/mcp-clients/windsurf-icon.svg b/apps/studio/public/img/mcp-clients/windsurf-icon.svg
new file mode 100644
index 0000000000000..386f8c035dc15
--- /dev/null
+++ b/apps/studio/public/img/mcp-clients/windsurf-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/ui-patterns/index.tsx b/packages/ui-patterns/index.tsx
index 9685d8fff4f72..f33a01ebe8d70 100644
--- a/packages/ui-patterns/index.tsx
+++ b/packages/ui-patterns/index.tsx
@@ -11,6 +11,7 @@ export * from './src/ComputeBadge'
export * from './src/FilterBar'
export * from './src/GlassPanel'
export * from './src/InnerSideMenu'
+export * from './src/McpUrlBuilder'
export * from './src/PopupFrame'
export * from './src/ShimmeringLoader'
export * from './src/TimestampInfo'
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index fd886e8c6027b..5df8c48b9e3fa 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -314,6 +314,10 @@
"import": "./src/LogsBarChart/index.tsx",
"types": "./src/LogsBarChart/index.tsx"
},
+ "./McpUrlBuilder": {
+ "import": "./src/McpUrlBuilder/index.ts",
+ "types": "./src/McpUrlBuilder/index.ts"
+ },
"./MobileSheetNav/MobileSheetNav": {
"import": "./src/MobileSheetNav/MobileSheetNav.tsx",
"types": "./src/MobileSheetNav/MobileSheetNav.tsx"
diff --git a/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx b/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx
new file mode 100644
index 0000000000000..709130225f38a
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx
@@ -0,0 +1,110 @@
+'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([])
+ 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,
+ isPlatform,
+ apiUrl,
+ readonly,
+ features: selectedFeaturesSupported,
+ selectedClient,
+ })
+
+ const handleClientChange = (clientKey: string) => {
+ const client = MCP_CLIENTS.find((c) => c.key === clientKey)
+ if (client) {
+ setSelectedClient(client)
+ }
+ }
+ React.useEffect(() => {
+ onClientSelect?.(selectedClient)
+ }, [selectedClient, onClientSelect])
+
+ const innerPanelSpacing = 'px-4 py-3'
+
+ return (
+
+
+
+
+ No results found.
+
+ {clients.map((client) => (
+ {
+ onSelectClient(client.key)
+ setOpen(false)
+ }}
+ className="flex gap-2 items-center"
+ >
+ {client.icon ? (
+
+ ))}
+
+
+
+
+
+ )
+}
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/ConnectionIcon.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/ConnectionIcon.tsx
new file mode 100644
index 0000000000000..ec4d367e42cfb
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/ConnectionIcon.tsx
@@ -0,0 +1,26 @@
+interface ConnectionIconProps {
+ basePath: string
+ theme?: 'light' | 'dark'
+ supportsDarkMode?: boolean
+ iconFolder: string
+ connection: string
+}
+
+export const ConnectionIcon = ({
+ basePath,
+ theme = 'dark',
+ supportsDarkMode,
+ iconFolder,
+ connection,
+}: ConnectionIconProps) => {
+ return (
+ }${)
+ )
+}
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
new file mode 100644
index 0000000000000..5ea38d01fe644
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import { ExternalLink } from 'lucide-react'
+import Image from 'next/image'
+import { Button, cn } from 'ui'
+import { CodeBlock } from 'ui/src/components/CodeBlock'
+import type { McpClient, McpClientConfig } from '../types'
+import { getMcpButtonData } from '../utils/getMcpButtonData'
+
+interface McpConfigurationDisplayProps {
+ selectedClient: McpClient
+ clientConfig: McpClientConfig
+ className?: string
+ theme?: 'light' | 'dark'
+ basePath: string
+}
+
+export function McpConfigurationDisplay({
+ selectedClient,
+ clientConfig,
+ className,
+ theme = 'dark',
+ basePath,
+}: McpConfigurationDisplayProps) {
+ const mcpButtonData = getMcpButtonData({
+ basePath,
+ theme,
+ client: selectedClient,
+ clientConfig,
+ })
+
+ return (
+
+
+ )
+}
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
new file mode 100644
index 0000000000000..7c1111c2b78aa
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import { Bot, Check, ChevronDown } from 'lucide-react'
+import { useState } from 'react'
+import {
+ Button,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+ Command_Shadcn_,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+ Popover_Shadcn_,
+ cn,
+} from 'ui'
+import type { McpClient } from '../types'
+import { ConnectionIcon } from './ConnectionIcon'
+
+interface ClientSelectDropdownProps {
+ basePath: string
+ theme?: 'light' | 'dark'
+ label?: string
+ clients: McpClient[]
+ selectedClient: McpClient
+ onClientChange: (clientKey: string) => void
+}
+
+export const ClientSelectDropdown = ({
+ basePath,
+ theme = 'light',
+ label = 'Client',
+ clients,
+ selectedClient,
+ onClientChange,
+}: ClientSelectDropdownProps) => {
+ const [open, setOpen] = useState(false)
+
+ function onSelectClient(key: string) {
+ onClientChange(key)
+ setOpen(false)
+ }
+
+ return (
+
+
+ Options
+
+
+ + Configure your MCP client to connect with your Supabase project +
+
+
+
+
+ Installation
+
+
+ {label}
+
+
+
+ }
+ >
+
+
+
+ {selectedClient?.icon ? (
+
+
+
+ )
+}
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
new file mode 100644
index 0000000000000..5ea38d01fe644
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import { ExternalLink } from 'lucide-react'
+import Image from 'next/image'
+import { Button, cn } from 'ui'
+import { CodeBlock } from 'ui/src/components/CodeBlock'
+import type { McpClient, McpClientConfig } from '../types'
+import { getMcpButtonData } from '../utils/getMcpButtonData'
+
+interface McpConfigurationDisplayProps {
+ selectedClient: McpClient
+ clientConfig: McpClientConfig
+ className?: string
+ theme?: 'light' | 'dark'
+ basePath: string
+}
+
+export function McpConfigurationDisplay({
+ selectedClient,
+ clientConfig,
+ className,
+ theme = 'dark',
+ basePath,
+}: McpConfigurationDisplayProps) {
+ const mcpButtonData = getMcpButtonData({
+ basePath,
+ theme,
+ client: selectedClient,
+ clientConfig,
+ })
+
+ return (
+
+ {mcpButtonData && (
+ <>
+
+ )
+}
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationOptions.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationOptions.tsx
new file mode 100644
index 0000000000000..7d71e8a8f91ab
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationOptions.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import { cn, Switch } from 'ui'
+import { Label } from 'ui/src/components/shadcn/ui/label'
+import { InfoTooltip } from '../../info-tooltip'
+import {
+ MultiSelector,
+ MultiSelectorContent,
+ MultiSelectorItem,
+ MultiSelectorList,
+ MultiSelectorTrigger,
+} from '../../multi-select'
+import type { McpFeatureGroup } from '../types'
+
+interface McpConfigurationOptionsProps {
+ isPlatform: boolean
+ readonly: boolean
+ onReadonlyChange: (readonly: boolean) => void
+ selectedFeatures: string[]
+ onFeaturesChange: (features: string[]) => void
+ featureGroups: McpFeatureGroup[]
+ className?: string
+}
+
+export function McpConfigurationOptions({
+ isPlatform,
+ readonly,
+ onReadonlyChange,
+ selectedFeatures,
+ onFeaturesChange,
+ featureGroups,
+ className,
+}: McpConfigurationOptionsProps) {
+ return (
+ Install in one click:
+
+
+ )}
+
+ {selectedClient.configFile && (
+
+ {mcpButtonData ? 'Or add' : 'Add'} this configuration to{' '}
+
+ )}
+
+ {selectedClient.configFile}:
+
+ Need help?
+ {selectedClient.docsUrl && (
+
+ View setup guide
+
+ )}
+
+ {/* Readonly Mode */}
+ {isPlatform && (
+
+ )
+}
diff --git a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
new file mode 100644
index 0000000000000..67f6e7c8875a6
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
@@ -0,0 +1,180 @@
+import { CodeBlock } from 'ui/src/components/CodeBlock'
+import type {
+ ClaudeCodeMcpConfig,
+ McpClient,
+ McpFeatureGroup,
+ OtherMcpConfig,
+ VSCodeMcpConfig,
+ WindsurfMcpConfig,
+} from './types'
+
+export const FEATURE_GROUPS_PLATFORM: McpFeatureGroup[] = [
+ {
+ id: 'docs',
+ name: 'Documentation',
+ description: 'Access project documentation and guides',
+ },
+ {
+ id: 'account',
+ name: 'Account',
+ description: 'Manage account settings and preferences',
+ },
+ {
+ id: 'database',
+ name: 'Database',
+ description: 'Query and manage database schema and data',
+ },
+ {
+ id: 'debugging',
+ name: 'Debugging',
+ description: 'Debug and troubleshoot issues',
+ },
+ {
+ id: 'development',
+ name: 'Development',
+ description: 'Development tools and utilities',
+ },
+ {
+ id: 'functions',
+ name: 'Functions',
+ description: 'Manage and deploy Edge Functions',
+ },
+ {
+ id: 'branching',
+ name: 'Branching',
+ description: 'Manage database branches',
+ },
+ {
+ id: 'storage',
+ name: 'Storage',
+ description: 'Manage files and storage buckets',
+ },
+]
+
+export const FEATURE_GROUPS_NON_PLATFORM = FEATURE_GROUPS_PLATFORM.filter((group) =>
+ ['docs', 'database', 'development'].includes(group.id)
+)
+
+export const MCP_CLIENTS: McpClient[] = [
+ {
+ key: 'cursor',
+ label: 'Cursor',
+ icon: 'cursor',
+ configFile: '.cursor/mcp.json',
+ externalDocsUrl: 'https://docs.cursor.com/context/mcp',
+ generateDeepLink: (config) => {
+ const name = 'supabase'
+ const base64Config = Buffer.from(JSON.stringify(config.mcpServers.supabase)).toString(
+ 'base64'
+ )
+ return `cursor://anysphere.cursor-deeplink/mcp/install?name=${name}&config=${encodeURIComponent(base64Config)}`
+ },
+ },
+ {
+ key: 'vscode',
+ label: 'VS Code',
+ icon: 'vscode',
+ configFile: '.vscode/mcp.json',
+ externalDocsUrl: 'https://code.visualstudio.com/docs/copilot/chat/mcp-servers',
+ transformConfig: (config): VSCodeMcpConfig => {
+ return {
+ mcpServers: {
+ supabase: {
+ type: 'http',
+ url: config.mcpServers.supabase.url,
+ },
+ },
+ }
+ },
+ generateDeepLink: (_config) => {
+ const config = _config as VSCodeMcpConfig
+ const mcpConfig = { name: 'supabase', ...config.mcpServers.supabase }
+
+ return `vscode:mcp/install?${encodeURIComponent(JSON.stringify(mcpConfig))}`
+ },
+ },
+ {
+ key: 'windsurf',
+ label: 'Windsurf',
+ icon: 'windsurf',
+ configFile: '~/.codeium/windsurf/mcp_config.json',
+ externalDocsUrl: '',
+ transformConfig: (config): WindsurfMcpConfig => {
+ return {
+ mcpServers: {
+ supabase: {
+ command: 'npx',
+ args: ['-y', 'mcp-remote', config.mcpServers.supabase.url],
+ },
+ },
+ }
+ },
+ alternateInstructions: () => (
+
+
+ )}
+
+ {/* Feature Groups */}
+
+
+ Only allow read operations on your database
+
+
+
+
+
+
+
+ {featureGroups.map((feature) => (
+
+
+ ))}
+
+
+
+
+
+
+
+ Only enable a subset of features. Helps keep the number of tools within MCP client
+ limits
+
+
+
+
+ {feature.name}
+ {feature.description}
+
+ + Windsurf does not currently support remote MCP servers over HTTP transport. You need to use + the mcp-remote package as a proxy. +
+ ), + }, + { + key: 'claude-code', + label: 'Claude Code', + icon: 'claude', + configFile: '~/.claude.json', + externalDocsUrl: 'https://docs.anthropic.com/en/docs/claude-code/mcp', + transformConfig: (config): ClaudeCodeMcpConfig => { + return { + mcpServers: { + supabase: { + type: 'http', + url: config.mcpServers.supabase.url, + }, + }, + } + }, + alternateInstructions: (_config) => { + const config = _config as ClaudeCodeMcpConfig + const command = `claude mcp add --transport http supabase "${config.mcpServers.supabase.url}"` + return ( +
+
+ )
+ },
+ },
+ {
+ key: 'other',
+ label: 'Other',
+ transformConfig: (config): OtherMcpConfig => {
+ return {
+ mcpServers: {
+ supabase: {
+ type: 'http',
+ url: config.mcpServers.supabase.url,
+ },
+ },
+ }
+ },
+ alternateInstructions: (_config) => {
+ return (
+ + Alternatively, add the MCP server using the command line: +
++ These generic MCP settings may work with other MCP clients, but there are no guarantees, + due to differences between clients. Refer to your specific client docs for where to input + the configuration. +
+ ) + }, + }, +] + +export const DEFAULT_MCP_URL_PLATFORM = 'http://localhost:8080/mcp' +export const DEFAULT_MCP_URL_NON_PLATFORM = 'http://localhost:54321/mcp' diff --git a/packages/ui-patterns/src/McpUrlBuilder/index.ts b/packages/ui-patterns/src/McpUrlBuilder/index.ts new file mode 100644 index 0000000000000..a15b032d88468 --- /dev/null +++ b/packages/ui-patterns/src/McpUrlBuilder/index.ts @@ -0,0 +1,19 @@ +export { ClientSelectDropdown } from './components/ClientSelectDropdown' +export { ConnectionIcon } from './components/ConnectionIcon' +export { McpConfigurationDisplay } from './components/McpConfigurationDisplay' +export { McpConfigurationOptions } from './components/McpConfigurationOptions' +export { + DEFAULT_MCP_URL_PLATFORM, + DEFAULT_MCP_URL_NON_PLATFORM, + FEATURE_GROUPS_PLATFORM, + FEATURE_GROUPS_NON_PLATFORM, + MCP_CLIENTS, +} from './constants' +export { getMcpUrl } from './utils/getMcpUrl' +export { McpConfigPanel, type McpConfigPanelProps } from './McpConfigPanel' +export type { + McpClient, + McpClientBaseConfig as McpClientConfig, + McpFeatureGroup, + McpUrlBuilderConfig, +} from './types' diff --git a/packages/ui-patterns/src/McpUrlBuilder/types.ts b/packages/ui-patterns/src/McpUrlBuilder/types.ts new file mode 100644 index 0000000000000..7b6ae93001244 --- /dev/null +++ b/packages/ui-patterns/src/McpUrlBuilder/types.ts @@ -0,0 +1,88 @@ +export interface McpFeatureGroup { + id: string + name: string + description: string +} + +export interface McpClient { + key: string + label: string + icon?: string + docsUrl?: string + externalDocsUrl?: string + configFile?: string + generateDeepLink?: (config: McpClientConfig) => string | null + transformConfig?: (config: McpClientBaseConfig) => McpClientConfig + alternateInstructions?: (config: McpClientConfig) => React.ReactNode +} + +export interface McpUrlBuilderConfig { + projectRef: string + readonly?: boolean + features?: string[] +} + +export interface McpClientBaseConfig { + mcpServers: { + supabase: { + url: string + } + } +} + +export interface CursorMcpConfig extends McpClientBaseConfig {} + +export interface VSCodeMcpConfig extends McpClientBaseConfig { + mcpServers: { + supabase: { + type: 'http' + url: string + } + } +} + +export interface WindsurfMcpConfig { + mcpServers: { + supabase: { + command: 'npx' + args: ['-y', 'mcp-remote', string] + } + } +} + +export interface ClaudeCodeMcpConfig extends McpClientBaseConfig { + mcpServers: { + supabase: { + type: 'http' + url: string + } + } +} + +export interface ClaudeDesktopMcpConfig extends McpClientBaseConfig { + mcpServers: { + supabase: { + type: 'http' + url: string + } + } +} + +export interface OtherMcpConfig extends McpClientBaseConfig { + mcpServers: { + supabase: { + type: 'http' + url: string + } + } +} + +// Union of all possible config types +export type McpClientConfig = + | ClaudeCodeMcpConfig + | ClaudeDesktopMcpConfig + | CursorMcpConfig + | McpClientBaseConfig + | OtherMcpConfig + | VSCodeMcpConfig + | WindsurfMcpConfig diff --git a/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpButtonData.ts b/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpButtonData.ts new file mode 100644 index 0000000000000..b53d07c582890 --- /dev/null +++ b/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpButtonData.ts @@ -0,0 +1,31 @@ +import type { McpClient, McpClientConfig } from '../types' + +interface GetMcpButtonDataOptions { + basePath: string + theme?: 'light' | 'dark' + client: McpClient + clientConfig: McpClientConfig +} + +export function getMcpButtonData({ + basePath, + theme, + client, + clientConfig, +}: GetMcpButtonDataOptions) { + if (client.generateDeepLink) { + const deepLink = client.generateDeepLink(clientConfig) + if (!deepLink) return null + + const imageSrc = `${basePath}/img/mcp-clients/${client.icon}${ + theme === 'dark' ? '-dark' : '' + }-icon.svg` + + return { + deepLink, + imageSrc, + label: client.label, + } + } + return null +} diff --git a/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpUrl.ts b/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpUrl.ts new file mode 100644 index 0000000000000..94dc41f8cb7f7 --- /dev/null +++ b/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpUrl.ts @@ -0,0 +1,68 @@ +import { DEFAULT_MCP_URL_NON_PLATFORM, DEFAULT_MCP_URL_PLATFORM } from '../constants' +import type { McpClient, McpClientConfig } from '../types' + +interface GetMcpUrlOptions { + projectRef?: string + readonly?: boolean + features?: string[] + selectedClient?: McpClient + isPlatform: boolean + apiUrl?: string +} + +interface GetMcpUrlReturn { + mcpUrl: string + clientConfig: McpClientConfig +} + +export function getMcpUrl({ + projectRef, + isPlatform, + apiUrl, + readonly = false, + features = [], + selectedClient, +}: GetMcpUrlOptions): GetMcpUrlReturn { + // Generate the MCP URL based on current configuration + const url = new URL(getMcpUrlBase({ isPlatform, apiUrl })) + if (projectRef && isPlatform) { + url.searchParams.set('project_ref', projectRef) + } + if (readonly && isPlatform) { + url.searchParams.set('read_only', 'true') + } + if (features.length > 0) { + url.searchParams.set('features', features.join(',')) + } + const mcpUrl = url.toString() + + let clientConfig: McpClientConfig = { + mcpServers: { + supabase: { + url: mcpUrl, + }, + }, + } + // Apply client-specific transformation if available + if (selectedClient?.transformConfig) { + clientConfig = selectedClient.transformConfig(clientConfig) + } + + return { + mcpUrl, + clientConfig, + } +} + +/** + * Assembles base `/mcp` endpoint URL for the given environment + */ +function getMcpUrlBase({ isPlatform, apiUrl }: { isPlatform: boolean; apiUrl?: string }) { + // Hosted platform uses environment variable with fallback + if (isPlatform) { + return process.env.NEXT_PUBLIC_MCP_URL ?? DEFAULT_MCP_URL_PLATFORM + } + + // Self-hosted uses API URL with fallback + return apiUrl ? `${apiUrl}/mcp` : DEFAULT_MCP_URL_NON_PLATFORM +} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 78798e906acf3..397ad1df060e7 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -26,3 +26,6 @@ minimumReleaseAgeExclude: - '@ai-sdk/*' - '@supabase/mcp-server-supabase' - '@supabase/mcp-utils' + - '@supabase/auth-js' + - '@supabase/supabase-js' + - '@supabase/realtime-js' diff --git a/turbo.json b/turbo.json index 028863f609c95..a7c33bf553390 100644 --- a/turbo.json +++ b/turbo.json @@ -78,6 +78,7 @@ "NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID", "NEXT_PUBLIC_VERCEL_ENV", "NEXT_PUBLIC_USERCENTRICS_RULESET_ID", + "NEXT_PUBLIC_MCP_URL", // These envs are technically passthrough env vars because they're only used on the server side of Nextjs "PLATFORM_PG_META_URL", "STUDIO_PG_META_URL",