docs: add Grok plugin and MCP install instructions (#49212)

## What this does Adds **Grok** (Grok Build) across the Supabase AI-tools docs, and fixes two logo gaps. - **Plugin docs** (`AgentPluginsPanel`) — Grok client + `grok plugin install …` / in-session `/plugins` steps. - **MCP docs** (`McpUrlBuilder`) — Grok under "AI Agent CLI": `~/.grok/config.toml` (`[mcp_servers.supabase]`), `grok mcp add … --transport http`, OAuth steps. - **"Pick your agent" grid** — add the Grok logo, and fix **Warp**'s pre-existing missing logo (both were absent from the grid's `ICON_ASSETS` map). - **Fix**: the plugins-page Cursor entry was missing `hasDistinctDarkIcon`, so its dark-mode logo fell back to the light mark — aligned with the MCP list. - Adds Grok + Warp agent logos (light + dark). ## Testing Verified against grok `1.0.5`: `grok plugin install …` works; the generated `config.toml` and `grok mcp add` command are both parsed by `grok mcp list`. Pairs with supabase-community/supabase-plugin#45 (the `.grok-plugin` surface); merge after that lands. ## Preview [Agent Plugin page](https://docs-git-pedrorodrigues-ai-932-add-grok-agent-p-12402b-supabase.vercel.app/docs/guides/ai-tools/plugins#manual-installation) <img width="877" height="378" alt="image" src="https://github.com/user-attachments/assets/8fd9e112-5c11-412b-bd8c-611912043e6d" /> [MCP page](https://docs-git-pedrorodrigues-ai-932-add-grok-agent-p-12402b-supabase.vercel.app/docs/guides/ai-tools/mcp#remote-mcp-installation) <img width="877" height="513" alt="image" src="https://github.com/user-attachments/assets/459de070-5049-433a-929f-9902222e157d" /> [AI Tools main page](https://docs-git-pedrorodrigues-ai-932-add-grok-agent-p-12402b-supabase.vercel.app/docs/guides/ai-tools#pick-your-agent) <img width="877" height="642" alt="image" src="https://github.com/user-attachments/assets/e6ca40d2-e9c9-466c-a837-dbda4bdc09f7" /> Closes AI-932, AI-974  ## Summary by CodeRabbit ## New Features - Added Grok as a supported AI tool and MCP client. - Added Grok installation instructions, CLI setup, authentication, and connection verification guidance. - Added Grok icons for light and dark themes. - Added support for custom documentation link text in plugin panels. - Added Warp to the available icon assets.  --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-05 01:15:03 +03:00 · 2026-08-19 15:18:45 +01:00
1 parent b6abae6abe
commit d3146a1755
@@ -15,12 +15,14 @@ const ICON_ASSETS: Record<string, { icon: string; hasLightIcon?: boolean }> = {
  'claude-code': { icon: '/docs/img/icons/agent-claude-icon', hasLightIcon: false },
  codex: { icon: '/docs/img/icons/agent-openai-icon', hasLightIcon: true },
  cursor: { icon: '/docs/img/icons/agent-cursor-icon', hasLightIcon: true },
+  grok: { icon: '/docs/img/icons/agent-grok-icon', hasLightIcon: true },
  'gemini-cli': { icon: '/docs/img/icons/agent-gemini-cli-icon', hasLightIcon: false },
  'github-copilot': { icon: '/docs/img/icons/agent-copilot-icon', hasLightIcon: true },
  kimi: { icon: '/docs/img/icons/agent-kimi-icon', hasLightIcon: true },
  vscode: { icon: '/docs/img/icons/agent-vscode-icon', hasLightIcon: false },
  antigravity: { icon: '/docs/img/icons/agent-antigravity-icon', hasLightIcon: false },
  windsurf: { icon: '/docs/img/icons/agent-devin-icon', hasLightIcon: true },
+  warp: { icon: '/docs/img/icons/agent-warp-icon', hasLightIcon: true },
  goose: { icon: '/docs/img/icons/agent-goose-icon', hasLightIcon: true },
  factory: { icon: '/docs/img/icons/agent-factory-icon', hasLightIcon: true },
  opencode: { icon: '/docs/img/icons/agent-opencode-icon', hasLightIcon: true },
@@ -3,6 +3,7 @@ import type { McpClient } from 'ui-patterns/McpUrlBuilder'
 export interface PluginClient extends McpClient {
  repoUrl?: string
  docsUrl?: string
+  docsLinkText?: string
 }

 export const PLUGIN_CLIENTS: PluginClient[] = [
@@ -25,6 +26,7 @@ export const PLUGIN_CLIENTS: PluginClient[] = [
    key: 'cursor',
    label: 'Cursor',
    icon: 'cursor',
+    hasDistinctDarkIcon: true,
    repoUrl: 'https://github.com/supabase-community/cursor-plugin',
    docsUrl: 'https://cursor.com/docs/plugins',
  },
@@ -44,6 +46,15 @@ export const PLUGIN_CLIENTS: PluginClient[] = [
    docsUrl:
      'https://docs.github.com/en/copilot/how-tos/copilot-cli/customize-copilot/plugins-finding-installing',
  },
+  {
+    key: 'grok',
+    label: 'Grok',
+    icon: 'grok',
+    hasDistinctDarkIcon: true,
+    repoUrl: 'https://github.com/supabase-community/supabase-plugin',
+    docsUrl: 'https://docs.x.ai/build/features/skills-plugins-marketplaces#plugins',
+    docsLinkText: 'View Grok plugins docs',
+  },
  {
    key: 'kimi',
    label: 'Kimi Code',
@@ -150,6 +150,26 @@ function PluginInstructions({ client }: { client: PluginClient }) {
    )
  }

+  if (client.key === 'grok') {
+    return (
+      <div className="space-y-3">
+        <p className="text-sm text-foreground-light">
+          Install the Supabase plugin by running the following command in your terminal.
+        </p>
+        <CodeBlock
+          value="grok plugin install supabase-community/supabase-plugin"
+          language="bash"
+          focusable={false}
+          className="block"
+        />
+        <p className="text-xs text-foreground-lighter">
+          Browse and install plugins in a session: run <code>grok</code>, then <code>/plugins</code>{' '}
+          or <code>/marketplace</code>.
+        </p>
+      </div>
+    )
+  }
+
  if (client.key === 'vscode') {
    return (
      <div className="space-y-3">
@@ -240,7 +260,7 @@ export function AgentPluginsPanel() {
              rel="noopener noreferrer"
              className="text-brand-link hover:underline inline-flex items-center"
            >
-              View {selectedClient.label} extensions docs
+              {selectedClient.docsLinkText ?? `View ${selectedClient.label} extensions docs`}
              <ExternalLink className="h-3 w-3 ml-1" />
            </a>
          </div>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M395.479 633.828L735.91 381.105C752.599 368.715 776.454 373.548 784.406 392.792C826.26 494.285 807.561 616.253 724.288 699.996C641.016 783.739 525.151 802.104 419.247 760.277L303.556 814.143C469.49 928.202 670.987 899.995 796.901 773.282C896.776 672.843 927.708 535.937 898.785 412.476L899.047 412.739C857.105 231.37 909.358 158.874 1016.4 10.6326C1018.93 7.11771 1021.47 3.60279 1024 0L883.144 141.651V141.212L395.392 633.916" fill="#0A0A0A"/>
+<path d="M325.226 695.251C206.128 580.84 226.662 403.776 328.285 301.668C403.431 226.097 526.549 195.254 634.026 240.596L749.454 186.994C728.657 171.88 702.007 155.623 671.424 144.2C533.19 86.9942 367.693 115.465 255.323 228.382C147.234 337.081 113.244 504.215 171.613 646.833C215.216 753.423 143.739 828.818 71.7385 904.916C46.2237 931.893 20.6216 958.87 0 987.429L325.139 695.339" fill="#0A0A0A"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M395.479 633.828L735.91 381.105C752.599 368.715 776.454 373.548 784.406 392.792C826.26 494.285 807.561 616.253 724.288 699.996C641.016 783.739 525.151 802.104 419.247 760.277L303.556 814.143C469.49 928.202 670.987 899.995 796.901 773.282C896.776 672.843 927.708 535.937 898.785 412.476L899.047 412.739C857.105 231.37 909.358 158.874 1016.4 10.6326C1018.93 7.11771 1021.47 3.60279 1024 0L883.144 141.651V141.212L395.392 633.916" fill="white"/>
+<path d="M325.226 695.251C206.128 580.84 226.662 403.776 328.285 301.668C403.431 226.097 526.549 195.254 634.026 240.596L749.454 186.994C728.657 171.88 702.007 155.623 671.424 144.2C533.19 86.9942 367.693 115.465 255.323 228.382C147.234 337.081 113.244 504.215 171.613 646.833C215.216 753.423 143.739 828.818 71.7385 904.916C46.2237 931.893 20.6216 958.87 0 987.429L325.139 695.339" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.035 2.723h9.253A2.712 2.712 0 0 1 24 5.435v10.529a2.712 2.712 0 0 1-2.712 2.713H8.047Zm-1.681 2.6L6.766 19.677h5.598l-.399 1.6H2.712A2.712 2.712 0 0 1 0 18.565V8.036a2.712 2.712 0 0 1 2.712-2.712Z" fill="#0B100F"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.035 2.723h9.253A2.712 2.712 0 0 1 24 5.435v10.529a2.712 2.712 0 0 1-2.712 2.713H8.047Zm-1.681 2.6L6.766 19.677h5.598l-.399 1.6H2.712A2.712 2.712 0 0 1 0 18.565V8.036a2.712 2.712 0 0 1 2.712-2.712Z" fill="#FFFFFF"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M395.479 633.828L735.91 381.105C752.599 368.715 776.454 373.548 784.406 392.792C826.26 494.285 807.561 616.253 724.288 699.996C641.016 783.739 525.151 802.104 419.247 760.277L303.556 814.143C469.49 928.202 670.987 899.995 796.901 773.282C896.776 672.843 927.708 535.937 898.785 412.476L899.047 412.739C857.105 231.37 909.358 158.874 1016.4 10.6326C1018.93 7.11771 1021.47 3.60279 1024 0L883.144 141.651V141.212L395.392 633.916" fill="white"/>
+<path d="M325.226 695.251C206.128 580.84 226.662 403.776 328.285 301.668C403.431 226.097 526.549 195.254 634.026 240.596L749.454 186.994C728.657 171.88 702.007 155.623 671.424 144.2C533.19 86.9942 367.693 115.465 255.323 228.382C147.234 337.081 113.244 504.215 171.613 646.833C215.216 753.423 143.739 828.818 71.7385 904.916C46.2237 931.893 20.6216 958.87 0 987.429L325.139 695.339" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M395.479 633.828L735.91 381.105C752.599 368.715 776.454 373.548 784.406 392.792C826.26 494.285 807.561 616.253 724.288 699.996C641.016 783.739 525.151 802.104 419.247 760.277L303.556 814.143C469.49 928.202 670.987 899.995 796.901 773.282C896.776 672.843 927.708 535.937 898.785 412.476L899.047 412.739C857.105 231.37 909.358 158.874 1016.4 10.6326C1018.93 7.11771 1021.47 3.60279 1024 0L883.144 141.651V141.212L395.392 633.916" fill="#0A0A0A"/>
+<path d="M325.226 695.251C206.128 580.84 226.662 403.776 328.285 301.668C403.431 226.097 526.549 195.254 634.026 240.596L749.454 186.994C728.657 171.88 702.007 155.623 671.424 144.2C533.19 86.9942 367.693 115.465 255.323 228.382C147.234 337.081 113.244 504.215 171.613 646.833C215.216 753.423 143.739 828.818 71.7385 904.916C46.2237 931.893 20.6216 958.87 0 987.429L325.139 695.339" fill="#0A0A0A"/>
+</svg>
@@ -6,6 +6,7 @@ import type {
  FactoryMcpConfig,
  GeminiMcpConfig,
  GooseMcpConfig,
+  GrokMcpConfig,
  KimiMcpConfig,
  McpClientBaseConfig,
  McpClientConfig,
@@ -153,6 +154,23 @@ export const MCP_CLIENT_DATA: McpClientData[] = [
      }
    },
  },
+  {
+    key: 'grok',
+    label: 'Grok',
+    icon: 'grok',
+    hasDistinctDarkIcon: true,
+    configFile: '~/.grok/config.toml',
+    externalDocsUrl: 'https://docs.x.ai/build/features/mcp-servers',
+    transformConfig: (config): GrokMcpConfig => {
+      return {
+        mcp_servers: {
+          supabase: {
+            url: config.mcpServers.supabase.url,
+          },
+        },
+      }
+    },
+  },
  {
    key: 'kimi',
    label: 'Kimi Code',
@@ -375,6 +393,9 @@ export const MCP_CLI_COMMANDS: Record<string, McpCliCommands> = {
    install: (url) => `codex mcp add supabase --url "${url}"`,
    authenticate: 'codex mcp login supabase',
  },
+  grok: {
+    install: (url) => `grok mcp add supabase "${url}" --transport http`,
+  },
  'gemini-cli': {
    install: (url) => `gemini mcp add -t http supabase "${url}"`,
    authenticate: '/mcp auth supabase',
@@ -397,7 +418,7 @@ export const MCP_CLI_COMMANDS: Record<string, McpCliCommands> = {
 export const MCP_CLIENT_GROUPS = [
  {
    heading: 'AI Agent CLI',
-    keys: ['claude-code', 'codex', 'gemini-cli', 'copilot-cli', 'opencode', 'factory'],
+    keys: ['claude-code', 'codex', 'grok', 'gemini-cli', 'copilot-cli', 'opencode', 'factory'],
  },
  {
    heading: 'Web Clients',
@@ -88,6 +88,28 @@ export const MCP_CLIENT_INSTRUCTIONS: Record<string, McpClientInstructions> = {
      </>
    ),
  },
+  grok: {
+    primary: ({ url }) => (
+      <>
+        <paragraph>Add the Supabase MCP server to Grok:</paragraph>
+        <code lang="bash" value={MCP_CLI_COMMANDS['grok'].install!(url)} />
+      </>
+    ),
+    alternate: () => (
+      <>
+        <paragraph>
+          The command writes the server to your user config (
+          <inlineCode value="~/.grok/config.toml" />
+          ), making it available across all your projects. Start Grok and complete the Supabase
+          OAuth flow when prompted on first use.
+        </paragraph>
+        <paragraph>
+          Verify the connection by running <inlineCode value="/mcps" /> inside a Grok session, or{' '}
+          <inlineCode value="grok mcp doctor supabase" /> from your terminal.
+        </paragraph>
+      </>
+    ),
+  },
  kimi: {
    alternate: () => (
      <>
@@ -135,6 +135,19 @@ export interface CodexMcpConfig {
  }
 }

+/**
+ * Configuration format for Grok CLI MCP client.
+ * Grok reads a TOML config (`~/.grok/config.toml`) and, like Codex, keys
+ * servers under a `mcp_servers` table. HTTP transport is inferred from the URL.
+ */
+export interface GrokMcpConfig {
+  mcp_servers: {
+    supabase: {
+      url: string
+    }
+  }
+}
+
 /**
 * Configuration format for Gemini CLI MCP client.
 * Uses httpUrl instead of url to match Gemini CLI's expected format.
@@ -199,6 +212,7 @@ export type McpClientConfig =
  | FactoryMcpConfig
  | GeminiMcpConfig
  | GooseMcpConfig
+  | GrokMcpConfig
  | KimiMcpConfig
  | McpClientBaseConfig
  | OpenCodeMcpConfig
@@ -13,6 +13,8 @@ import factoryIcon from '../assets/factory-icon.svg'
 import geminiCliIcon from '../assets/gemini-cli-icon.svg'
 import gooseDarkIcon from '../assets/goose-icon-dark.svg'
 import gooseIcon from '../assets/goose-icon.svg'
+import grokDarkIcon from '../assets/grok-icon-dark.svg'
+import grokIcon from '../assets/grok-icon.svg'
 import kimiDarkIcon from '../assets/kimi-icon-dark.svg'
 import kimiIcon from '../assets/kimi-icon.svg'
 import kiroIcon from '../assets/kiro-icon.svg'
@@ -44,6 +46,7 @@ const MCP_CLIENT_ICON_ASSETS = {
  factory: { light: factoryIcon, dark: factoryDarkIcon },
  'gemini-cli': { light: geminiCliIcon, dark: geminiCliIcon },
  goose: { light: gooseIcon, dark: gooseDarkIcon },
+  grok: { light: grokIcon, dark: grokDarkIcon },
  kimi: { light: kimiIcon, dark: kimiDarkIcon },
  kiro: { light: kiroIcon, dark: kiroIcon },
  openai: { light: openaiIcon, dark: openaiDarkIcon },