feat(mcp): Gemini CLI extension instructions (supabase#42622)

### Changes

- Adds instructions to install the [Supabase gemini
extension](https://github.com/supabase-community/gemini-extension) in
our MCP URL builder in docs / studio

Note this is only shown when "Hosted" platform selected since the
published extension [only bundles the hosted MCP
server](https://github.com/supabase-community/gemini-extension/blob/main/gemini-extension.json#L8).

### To verify

- Visit
https://docs-git-mattrossman-ai-341-gemini-cli-extension-docs-supabase.vercel.app/docs/guides/getting-started/mcp
and select Gemini client

<img width="1944" height="1524" alt="CleanShot 2026-02-09 at 15 31
47@2x"
src="https://github.com/user-attachments/assets/0e3cb54d-61f6-4857-b7f9-8e8d19b92158"
/>



Closes AI-341

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* MCP client installation instructions now adapt to deployment:
platform-specific guided setup with external links or simplified local
instructions.
* **Style**
  * Deep-link styling updated for clearer branded link appearance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>

Author: mattrossman

apps/docs/public/img/mcp-clients/gemini-cli-dark-icon.svg

@@ -98,7 +98,7 @@ export function McpConfigurationDisplay({
       )}
 
       {selectedClient.primaryInstructions &&
-        selectedClient.primaryInstructions(clientConfig, onCopyCallback)}
+        selectedClient.primaryInstructions(clientConfig, onCopyCallback, { isPlatform })}
 
       {selectedClient.configFile && (
         <>
@@ -122,7 +122,7 @@ export function McpConfigurationDisplay({
       )}
 
       {selectedClient.alternateInstructions &&
-        selectedClient.alternateInstructions(clientConfig, onCopyCallback)}
+        selectedClient.alternateInstructions(clientConfig, onCopyCallback, { isPlatform })}
 
       {(selectedClient.docsUrl || selectedClient.externalDocsUrl) && (
         <div className="flex items-center gap-2 text-xs text-foreground-light">
@@ -132,7 +132,7 @@ export function McpConfigurationDisplay({
               href={selectedClient.docsUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-brand hover:underline inline-flex items-center"
+              className="text-brand-link hover:underline inline-flex items-center"
             >
               View setup guide
               <ExternalLink className="h-3 w-3 ml-1" />
@@ -143,7 +143,7 @@ export function McpConfigurationDisplay({
               href={selectedClient.externalDocsUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-brand hover:underline inline-flex items-center"
+              className="text-brand-link hover:underline inline-flex items-center"
             >
               View {selectedClient.label} docs
               <ExternalLink className="h-3 w-3 ml-1" />

apps/docs/public/img/mcp-clients/gemini-cli-icon.svg

@@ -228,19 +228,56 @@ export const MCP_CLIENTS: McpClient[] = [
         },
       }
     },
-    primaryInstructions: (config, onCopy) => {
+    primaryInstructions: (config, onCopy, options) => {
       const mcpUrl = getMcpUrl(config)
-      const command = `gemini mcp add -t http supabase ${mcpUrl}`
+      const mcpCommand = `gemini mcp add -t http supabase ${mcpUrl}`
       return (
         <div className="space-y-2">
           <p className="text-xs text-warning">
             Ensure you are running Gemini CLI version <code>0.20.2</code> or higher.
           </p>
-          <p className="text-xs text-foreground-light">
-            Add the Supabase MCP server to Gemini CLI:
-          </p>
+          {options?.isPlatform && (
+            <>
+              <p className="text-xs text-foreground-light">
+                Install the Supabase{' '}
+                <a
+                  href="https://github.com/supabase-community/gemini-extension"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-brand-link hover:underline"
+                >
+                  extension
+                </a>{' '}
+                for Gemini CLI. This bundles the Supabase MCP server connection,{' '}
+                <a
+                  href="https://github.com/supabase/agent-skills"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-brand-link hover:underline"
+                >
+                  agent skills
+                </a>
+                , and other context.
+              </p>
+              <CodeBlock
+                value="gemini extensions install https://github.com/supabase-community/gemini-extension"
+                language="bash"
+                focusable={false}
+                className="block"
+                onCopyCallback={() => onCopy('command')}
+              />
+              <p className="text-xs text-foreground-light">
+                Or add just the MCP server to Gemini CLI:
+              </p>
+            </>
+          )}
+          {!options?.isPlatform && (
+            <p className="text-xs text-foreground-light">
+              Add the Supabase MCP server to Gemini CLI:
+            </p>
+          )}
           <CodeBlock
-            value={command}
+            value={mcpCommand}
             language="bash"
             focusable={false}
             className="block"
@@ -456,7 +493,7 @@ export const MCP_CLIENTS: McpClient[] = [
           href="https://kiro.dev/docs/powers/"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-brand hover:underline"
+          className="text-brand-link hover:underline"
         >
           power
         </a>{' '}

apps/studio/public/img/mcp-clients/gemini-cli-dark-icon.svg

@@ -15,6 +15,7 @@ export { McpConfigPanel, type McpConfigPanelProps } from './McpConfigPanel'
 export type {
   McpClient,
   McpClientBaseConfig as McpClientConfig,
+  McpClientInstructionOptions,
   McpOnCopyCallback,
   McpFeatureGroup,
   McpUrlBuilderConfig,

apps/studio/public/img/mcp-clients/gemini-cli-icon.svg

@@ -10,6 +10,10 @@ export interface McpClientDeepLinkOptions {
   isPlatform?: boolean
 }
 
+export interface McpClientInstructionOptions {
+  isPlatform?: boolean
+}
+
 export interface McpClient {
   key: string
   label: string
@@ -23,11 +27,13 @@ export interface McpClient {
   deepLinkDescription?: React.ReactNode
   primaryInstructions?: (
     config: McpClientConfig,
-    onCopy: (type?: McpOnCopyCallback) => void
+    onCopy: (type?: McpOnCopyCallback) => void,
+    options?: McpClientInstructionOptions
   ) => React.ReactNode
   alternateInstructions?: (
     config: McpClientConfig,
-    onCopy: (type?: McpOnCopyCallback) => void
+    onCopy: (type?: McpOnCopyCallback) => void,
+    options?: McpClientInstructionOptions
   ) => React.ReactNode
 }