docs: add Warp as a supported MCP client (#48838)

Adds [Warp](https://www.warp.dev/) as a supported client in the Supabase
MCP docs. Because [Warp speaks the native remote (Streamable HTTP)
transport](https://docs.warp.dev/agents/capabilities/mcp/), the standard
config connects to the hosted server directly, no `mcp-remote` proxy
needed:

```json
{ "mcpServers": { "supabase": { "url": "https://mcp.supabase.com/mcp" } } }
```

The MCP client list is data-driven, so this single addition surfaces in
the docs MCP panel, the generated markdown, and Studio's Connect panel.
Concretely: registers the `warp` client (config file
`~/.warp/.mcp.json`, docs link) under the IDE group, adds setup
instructions (auto-load + Settings → AI → MCP Servers, automatic OAuth),
and adds the official Warp logo in light and dark variants.

## What is Warp?

Warp is an agentic development environment built from the terminal: a
Rust-based, GPU-accelerated app that runs coding agents (Claude Code,
Codex, Gemini) directly in the terminal. It has first-class MCP support
with native remote (Streamable HTTP / SSE) transport and automatic OAuth
(no PAT required).

## Why add support for the Supabase MCP server?

Warp is a mainstream, widely-adopted client
([warpdotdev/warp](https://github.com/warpdotdev/warp) has 64k+ ⭐ on
GitHub) that natively supports MCP. Documenting it lets Warp users
connect the hosted Supabase MCP server with a copy-paste config,
matching the coverage we already provide for Cursor, VS Code, Windsurf,
and others.

## How to test

1. Run the docs app (`pnpm dev:docs`) and open the MCP guide
(`apps/docs/content/guides/ai-tools/mcp.mdx`). Warp appears under
**IDE** with its logo (verify both light and dark themes) and the config
snippet.
2. In Warp, add the shown config to `~/.warp/.mcp.json` (or **Settings →
Agents → MCP Servers → + Add**). Warp auto-spawns the `supabase` server.
4. Click **Start** on the `supabase` server → complete the Supabase
OAuth in the browser → the Supabase tools load.

<img width="859" height="606" alt="image"
src="https://github.com/user-attachments/assets/8c931ded-4ffe-4495-b4c8-183f93be812a"
/>


Verified end-to-end on Warp v0.2026.07.29 (macOS): the config auto-loads
and connects over Warp's native remote transport, and the OAuth flow
completes without a PAT.

Refs
[AI-1031](https://linear.app/supabase/issue/AI-1031/docs-add-warp-as-a-supported-mcp-client)


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

* **New Features**
  * Added Warp as a supported MCP client.
* Added setup guidance for connecting remote MCP servers in Warp,
including OAuth authentication and secure credential storage.
  * Added light and dark Warp icons to the client selection interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/ui-patterns/src/McpUrlBuilder/assets/warp-icon-dark.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>

packages/ui-patterns/src/McpUrlBuilder/assets/warp-icon.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>

packages/ui-patterns/src/McpUrlBuilder/clients.data.ts

@@ -240,6 +240,17 @@ export const MCP_CLIENT_DATA: McpClientData[] = [
       }
     },
   },
+  {
+    key: 'warp',
+    label: 'Warp',
+    icon: 'warp',
+    hasDistinctDarkIcon: true,
+    configFile: '~/.warp/.mcp.json',
+    externalDocsUrl: 'https://docs.warp.dev/agents/capabilities/mcp',
+    // No transformConfig: Warp natively supports remote MCP servers and accepts
+    // the standard `mcpServers` config, so the base `{ mcpServers: { supabase: { url } } }`
+    // shape works both in `~/.warp/.mcp.json` and when pasted into Warp's "+ Add" input.
+  },
   {
     key: 'goose',
     label: 'Goose',
@@ -394,7 +405,7 @@ export const MCP_CLIENT_GROUPS = [
   },
   {
     heading: 'IDE',
-    keys: ['cursor', 'vscode', 'antigravity', 'kiro', 'windsurf', 'kimi'],
+    keys: ['cursor', 'vscode', 'antigravity', 'kiro', 'windsurf', 'kimi', 'warp'],
   },
 ] as const
 

packages/ui-patterns/src/McpUrlBuilder/clients.instructions.md.tsx

@@ -203,6 +203,22 @@ export const MCP_CLIENT_INSTRUCTIONS: Record<string, McpClientInstructions> = {
       </paragraph>
     ),
   },
+  warp: {
+    alternate: () => (
+      <>
+        <paragraph>
+          Warp supports remote MCP servers natively, so no local proxy is needed. You can also add
+          the server from the UI: open the MCP servers page (<strong>Settings</strong> &gt;{' '}
+          <strong>Agents</strong> &gt; <strong>MCP Servers</strong>, or search for MCP in the
+          command palette), click <strong>+ Add</strong>, and paste the same JSON.
+        </paragraph>
+        <paragraph>
+          After adding the server, Warp opens a browser window to complete the Supabase OAuth flow
+          and stores the credentials securely on your device.
+        </paragraph>
+      </>
+    ),
+  },
   goose: {
     primary: ({ url }) => (
       <>

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

@@ -21,6 +21,8 @@ import opencodeIcon from '../assets/opencode-icon.svg'
 import perplexityDarkIcon from '../assets/perplexity-icon-dark.svg'
 import perplexityIcon from '../assets/perplexity-icon.svg'
 import vscodeIcon from '../assets/vscode-icon.svg'
+import warpDarkIcon from '../assets/warp-icon-dark.svg'
+import warpIcon from '../assets/warp-icon.svg'
 import windsurfDarkIcon from '../assets/windsurf-icon-dark.svg'
 import windsurfIcon from '../assets/windsurf-icon.svg'
 
@@ -45,6 +47,7 @@ const MCP_CLIENT_ICON_ASSETS = {
   opencode: { light: opencodeIcon, dark: opencodeDarkIcon },
   perplexity: { light: perplexityIcon, dark: perplexityDarkIcon },
   vscode: { light: vscodeIcon, dark: vscodeIcon },
+  warp: { light: warpIcon, dark: warpDarkIcon },
   windsurf: { light: windsurfIcon, dark: windsurfDarkIcon },
 } satisfies Record<string, McpClientIconAsset>