[pull] master from supabase:master

packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx

@@ -129,6 +129,7 @@ export function McpConfigPanel({
           clientConfig={clientConfig}
           onCopyCallback={onCopyCallback}
           onInstallCallback={onInstallCallback}
+          isPlatform={isPlatform}
         />
       </div>
     </div>

packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx

@@ -17,6 +17,7 @@ interface McpConfigurationDisplayProps {
   basePath: string
   onCopyCallback: (type?: McpOnCopyCallback) => void
   onInstallCallback?: () => void
+  isPlatform?: boolean
 }
 
 type ConfigFormat = CodeBlockLang | 'toml'
@@ -29,12 +30,14 @@ export function McpConfigurationDisplay({
   basePath,
   onCopyCallback,
   onInstallCallback,
+  isPlatform,
 }: McpConfigurationDisplayProps) {
   const mcpButtonData = getMcpButtonData({
     basePath,
     theme,
     client: selectedClient,
     clientConfig,
+    isPlatform,
   })
 
   // Extract file extension and determine format
@@ -69,7 +72,9 @@ export function McpConfigurationDisplay({
     <div className={cn('space-y-4', className)}>
       {mcpButtonData && (
         <>
-          <div className="text-xs text-foreground-light">Install in one click:</div>
+          <div className="text-xs text-foreground-light">
+            {selectedClient.deepLinkDescription ?? 'Install in one click:'}
+          </div>
           <Button type="secondary" size="small" asChild>
             <a
               href={mcpButtonData.deepLink}
@@ -95,25 +100,26 @@ export function McpConfigurationDisplay({
         selectedClient.primaryInstructions(clientConfig, onCopyCallback)}
 
       {selectedClient.configFile && (
-        <div className="text-xs text-foreground-light">
-          {selectedClient.primaryInstructions
-            ? 'Alternatively, add'
-            : mcpButtonData
-              ? 'Or add'
-              : 'Add'}{' '}
-          this configuration to{' '}
-          <code className="px-1 py-0.5 bg-surface-200 rounded">{selectedClient.configFile}</code>:
-        </div>
+        <>
+          <div className="text-xs text-foreground-light">
+            {selectedClient.primaryInstructions
+              ? 'Alternatively, add'
+              : mcpButtonData
+                ? 'Or add'
+                : 'Add'}{' '}
+            this configuration to{' '}
+            <code className="px-1 py-0.5 bg-surface-200 rounded">{selectedClient.configFile}</code>:
+          </div>
+          <CodeBlock
+            value={configValue}
+            language={displayLanguage}
+            className="max-h-64 overflow-y-auto"
+            focusable={false}
+            onCopyCallback={() => onCopyCallback?.('config')}
+          />
+        </>
       )}
 
-      <CodeBlock
-        value={configValue}
-        language={displayLanguage}
-        className="max-h-64 overflow-y-auto"
-        focusable={false}
-        onCopyCallback={() => onCopyCallback?.('config')}
-      />
-
       {selectedClient.alternateInstructions &&
         selectedClient.alternateInstructions(clientConfig, onCopyCallback)}
 

packages/ui-patterns/src/McpUrlBuilder/constants.tsx

@@ -438,6 +438,31 @@ export const MCP_CLIENTS: McpClient[] = [
       </div>
     ),
   },
+  {
+    key: 'kiro',
+    label: 'Kiro',
+    icon: 'kiro',
+    configFile: '~/.kiro/settings/mcp.json',
+    externalDocsUrl: 'https://kiro.dev/docs/mcp/',
+    generateDeepLink: (_config, options) => {
+      const power = options?.isPlatform ? 'supabase-hosted' : 'supabase-local'
+      return `https://kiro.dev/launch/powers/${power}`
+    },
+    deepLinkDescription: (
+      <>
+        Install the Supabase{' '}
+        <a
+          href="https://kiro.dev/docs/powers/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-brand hover:underline"
+        >
+          power
+        </a>{' '}
+        for Kiro. This bundles the Supabase MCP server and steering files for best practices.
+      </>
+    ),
+  },
 ]
 
 export const DEFAULT_MCP_URL_PLATFORM = 'http://localhost:8080/mcp'

packages/ui-patterns/src/McpUrlBuilder/types.ts

@@ -6,15 +6,21 @@ export interface McpFeatureGroup {
 
 export type McpOnCopyCallback = 'url' | 'config' | 'command'
 
+export interface McpClientDeepLinkOptions {
+  isPlatform?: boolean
+}
+
 export interface McpClient {
   key: string
   label: string
   icon?: string
   docsUrl?: string
   externalDocsUrl?: string
   configFile?: string
-  generateDeepLink?: (config: McpClientConfig) => string | null
+  generateDeepLink?: (config: McpClientConfig, options?: McpClientDeepLinkOptions) => string | null
   transformConfig?: (config: McpClientBaseConfig) => McpClientConfig
+  /** Optional custom description shown above the deep link button generated by generateDeepLink */
+  deepLinkDescription?: React.ReactNode
   primaryInstructions?: (
     config: McpClientConfig,
     onCopy: (type?: McpOnCopyCallback) => void

packages/ui-patterns/src/McpUrlBuilder/utils/getMcpButtonData.ts

@@ -5,16 +5,18 @@ interface GetMcpButtonDataOptions {
   theme?: 'light' | 'dark'
   client: McpClient
   clientConfig: McpClientConfig
+  isPlatform?: boolean
 }
 
 export function getMcpButtonData({
   basePath,
   theme,
   client,
   clientConfig,
+  isPlatform,
 }: GetMcpButtonDataOptions) {
   if (client.generateDeepLink) {
-    const deepLink = client.generateDeepLink(clientConfig)
+    const deepLink = client.generateDeepLink(clientConfig, { isPlatform })
     if (!deepLink) return null
 
     // If the theme is dark, the button background will be light and vice-versa