From d3146a17550b99f90df0615bb4faf2992f152693 Mon Sep 17 00:00:00 2001 From: Pedro Rodrigues <44656907+Rodriguespn@users.noreply.github.com> Date: Wed, 19 Aug 2026 15:18:45 +0100 Subject: [PATCH] docs: add Grok plugin and MCP install instructions (#49212) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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) image [MCP page](https://docs-git-pedrorodrigues-ai-932-add-grok-agent-p-12402b-supabase.vercel.app/docs/guides/ai-tools/mcp#remote-mcp-installation) image [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) image 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) --- .../data/content-listings/ai-tools.data.ts | 2 ++ .../features/ui/AgentPluginsPanel.data.ts | 11 +++++++++ apps/docs/features/ui/AgentPluginsPanel.tsx | 22 +++++++++++++++++- .../img/icons/agent-grok-icon-light.svg | 4 ++++ .../docs/public/img/icons/agent-grok-icon.svg | 4 ++++ .../img/icons/agent-warp-icon-light.svg | 3 +++ .../docs/public/img/icons/agent-warp-icon.svg | 3 +++ .../McpUrlBuilder/assets/grok-icon-dark.svg | 4 ++++ .../src/McpUrlBuilder/assets/grok-icon.svg | 4 ++++ .../src/McpUrlBuilder/clients.data.ts | 23 ++++++++++++++++++- .../McpUrlBuilder/clients.instructions.md.tsx | 22 ++++++++++++++++++ .../ui-patterns/src/McpUrlBuilder/types.ts | 14 +++++++++++ .../src/McpUrlBuilder/utils/mcpIconAssets.ts | 3 +++ 13 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 apps/docs/public/img/icons/agent-grok-icon-light.svg create mode 100644 apps/docs/public/img/icons/agent-grok-icon.svg create mode 100644 apps/docs/public/img/icons/agent-warp-icon-light.svg create mode 100644 apps/docs/public/img/icons/agent-warp-icon.svg create mode 100644 packages/ui-patterns/src/McpUrlBuilder/assets/grok-icon-dark.svg create mode 100644 packages/ui-patterns/src/McpUrlBuilder/assets/grok-icon.svg diff --git a/apps/docs/data/content-listings/ai-tools.data.ts b/apps/docs/data/content-listings/ai-tools.data.ts index 6b4bf347d78..4b555dc87bc 100644 --- a/apps/docs/data/content-listings/ai-tools.data.ts +++ b/apps/docs/data/content-listings/ai-tools.data.ts @@ -15,12 +15,14 @@ const ICON_ASSETS: Record = { '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 }, diff --git a/apps/docs/features/ui/AgentPluginsPanel.data.ts b/apps/docs/features/ui/AgentPluginsPanel.data.ts index 7678b94d615..91902ae6412 100644 --- a/apps/docs/features/ui/AgentPluginsPanel.data.ts +++ b/apps/docs/features/ui/AgentPluginsPanel.data.ts @@ -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', diff --git a/apps/docs/features/ui/AgentPluginsPanel.tsx b/apps/docs/features/ui/AgentPluginsPanel.tsx index c5ebcf3e437..7df6f067d13 100644 --- a/apps/docs/features/ui/AgentPluginsPanel.tsx +++ b/apps/docs/features/ui/AgentPluginsPanel.tsx @@ -150,6 +150,26 @@ function PluginInstructions({ client }: { client: PluginClient }) { ) } + if (client.key === 'grok') { + return ( +
+

+ Install the Supabase plugin by running the following command in your terminal. +

+ +

+ Browse and install plugins in a session: run grok, then /plugins{' '} + or /marketplace. +

+
+ ) + } + if (client.key === 'vscode') { return (
@@ -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`}
diff --git a/apps/docs/public/img/icons/agent-grok-icon-light.svg b/apps/docs/public/img/icons/agent-grok-icon-light.svg new file mode 100644 index 00000000000..8ac6121911a --- /dev/null +++ b/apps/docs/public/img/icons/agent-grok-icon-light.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/docs/public/img/icons/agent-grok-icon.svg b/apps/docs/public/img/icons/agent-grok-icon.svg new file mode 100644 index 00000000000..1b71ff1ab24 --- /dev/null +++ b/apps/docs/public/img/icons/agent-grok-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/docs/public/img/icons/agent-warp-icon-light.svg b/apps/docs/public/img/icons/agent-warp-icon-light.svg new file mode 100644 index 00000000000..ea1212cbc64 --- /dev/null +++ b/apps/docs/public/img/icons/agent-warp-icon-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/public/img/icons/agent-warp-icon.svg b/apps/docs/public/img/icons/agent-warp-icon.svg new file mode 100644 index 00000000000..9799154c284 --- /dev/null +++ b/apps/docs/public/img/icons/agent-warp-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui-patterns/src/McpUrlBuilder/assets/grok-icon-dark.svg b/packages/ui-patterns/src/McpUrlBuilder/assets/grok-icon-dark.svg new file mode 100644 index 00000000000..1b71ff1ab24 --- /dev/null +++ b/packages/ui-patterns/src/McpUrlBuilder/assets/grok-icon-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/ui-patterns/src/McpUrlBuilder/assets/grok-icon.svg b/packages/ui-patterns/src/McpUrlBuilder/assets/grok-icon.svg new file mode 100644 index 00000000000..8ac6121911a --- /dev/null +++ b/packages/ui-patterns/src/McpUrlBuilder/assets/grok-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/ui-patterns/src/McpUrlBuilder/clients.data.ts b/packages/ui-patterns/src/McpUrlBuilder/clients.data.ts index b6b60aae141..996f4157b86 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/clients.data.ts +++ b/packages/ui-patterns/src/McpUrlBuilder/clients.data.ts @@ -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 = { 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 = { 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', diff --git a/packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx b/packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx index d768b97f660..f45aa6bedcd 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx +++ b/packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx @@ -88,6 +88,28 @@ export const MCP_CLIENT_INSTRUCTIONS: Record = { ), }, + grok: { + primary: ({ url }) => ( + <> + Add the Supabase MCP server to Grok: + + + ), + alternate: () => ( + <> + + The command writes the server to your user config ( + + ), making it available across all your projects. Start Grok and complete the Supabase + OAuth flow when prompted on first use. + + + Verify the connection by running inside a Grok session, or{' '} + from your terminal. + + + ), + }, kimi: { alternate: () => ( <> diff --git a/packages/ui-patterns/src/McpUrlBuilder/types.ts b/packages/ui-patterns/src/McpUrlBuilder/types.ts index 97a03ae103b..f1bdc14acc3 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/types.ts +++ b/packages/ui-patterns/src/McpUrlBuilder/types.ts @@ -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 diff --git a/packages/ui-patterns/src/McpUrlBuilder/utils/mcpIconAssets.ts b/packages/ui-patterns/src/McpUrlBuilder/utils/mcpIconAssets.ts index 9b9ea2d02dd..7795c45bd6a 100644 --- a/packages/ui-patterns/src/McpUrlBuilder/utils/mcpIconAssets.ts +++ b/packages/ui-patterns/src/McpUrlBuilder/utils/mcpIconAssets.ts @@ -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 },