diff --git a/apps/docs/public/img/mcp-clients/kiro-dark-icon.svg b/apps/docs/public/img/mcp-clients/kiro-dark-icon.svg new file mode 100644 index 0000000000000..ef4abd2d85d25 --- /dev/null +++ b/apps/docs/public/img/mcp-clients/kiro-dark-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/docs/public/img/mcp-clients/kiro-icon.svg b/apps/docs/public/img/mcp-clients/kiro-icon.svg new file mode 100644 index 0000000000000..ef4abd2d85d25 --- /dev/null +++ b/apps/docs/public/img/mcp-clients/kiro-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/studio/public/img/mcp-clients/kiro-dark-icon.svg b/apps/studio/public/img/mcp-clients/kiro-dark-icon.svg new file mode 100644 index 0000000000000..ef4abd2d85d25 --- /dev/null +++ b/apps/studio/public/img/mcp-clients/kiro-dark-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/studio/public/img/mcp-clients/kiro-icon.svg b/apps/studio/public/img/mcp-clients/kiro-icon.svg new file mode 100644 index 0000000000000..ef4abd2d85d25 --- /dev/null +++ b/apps/studio/public/img/mcp-clients/kiro-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx b/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx index 6697da68b1c65..c476dcf5fd5f4 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx +++ b/packages/ui-patterns/src/McpUrlBuilder/McpConfigPanel.tsx @@ -129,6 +129,7 @@ export function McpConfigPanel({ clientConfig={clientConfig} onCopyCallback={onCopyCallback} onInstallCallback={onInstallCallback} + isPlatform={isPlatform} /> diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx index dcc4a81de1f28..c72efd5455848 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationDisplay.tsx +++ b/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({
{mcpButtonData && ( <> -
Install in one click:
+
+ {selectedClient.deepLinkDescription ?? 'Install in one click:'} +
+ <> +
+ {selectedClient.primaryInstructions + ? 'Alternatively, add' + : mcpButtonData + ? 'Or add' + : 'Add'}{' '} + this configuration to{' '} + {selectedClient.configFile}: +
+ onCopyCallback?.('config')} + /> + )} - onCopyCallback?.('config')} - /> - {selectedClient.alternateInstructions && selectedClient.alternateInstructions(clientConfig, onCopyCallback)} diff --git a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx index b8d38e495c063..854cd2ec3642c 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx +++ b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx @@ -438,6 +438,31 @@ export const MCP_CLIENTS: McpClient[] = [ ), }, + { + 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{' '} + + power + {' '} + for Kiro. This bundles the Supabase MCP server and steering files for best practices. + + ), + }, ] export const DEFAULT_MCP_URL_PLATFORM = 'http://localhost:8080/mcp' diff --git a/packages/ui-patterns/src/McpUrlBuilder/types.ts b/packages/ui-patterns/src/McpUrlBuilder/types.ts index 6a2dee544244b..92a6913737b77 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/types.ts +++ b/packages/ui-patterns/src/McpUrlBuilder/types.ts @@ -6,6 +6,10 @@ export interface McpFeatureGroup { export type McpOnCopyCallback = 'url' | 'config' | 'command' +export interface McpClientDeepLinkOptions { + isPlatform?: boolean +} + export interface McpClient { key: string label: string @@ -13,8 +17,10 @@ export interface McpClient { 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 diff --git a/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpButtonData.ts b/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpButtonData.ts index 098dc8bcaaa77..357db14f09c30 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpButtonData.ts +++ b/packages/ui-patterns/src/McpUrlBuilder/utils/getMcpButtonData.ts @@ -5,6 +5,7 @@ interface GetMcpButtonDataOptions { theme?: 'light' | 'dark' client: McpClient clientConfig: McpClientConfig + isPlatform?: boolean } export function getMcpButtonData({ @@ -12,9 +13,10 @@ export function getMcpButtonData({ 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