Files
supabase/packages/ui-patterns
Pedro RodriguesandClaude Sonnet 4.6 ac8dab4283 feat(mcp): add Claude.ai and ChatGPT connectors with grouped client dropdown (#45524)
## Summary

- Adds Claude.ai and ChatGPT as MCP connectors in the existing
`/guides/getting-started/mcp` dropdown

<img width="1511" height="744" alt="Screenshot 2026-05-04 at 14 53 24"
src="https://github.com/user-attachments/assets/8de5b3a4-56e2-45a7-bcce-1051baac30cd"
/>

- Groups all MCP clients into three categories: **Web Clients**
(Claude.ai, ChatGPT, Goose), **AI Agent CLIs** (Claude Code, Codex,
Gemini CLI, Opencode, Factory), **IDE** (Cursor, VS Code, Antigravity,
Kiro, Windsurf)

<img width="1511" height="744" alt="image"
src="https://github.com/user-attachments/assets/eb3ecdaa-878a-4f87-abfe-41a9144db5b8"
/>

- Both connectors use `generateDeepLink` to render a one-click "Connect"
button linking to the Supabase connector directory entry
- Includes external docs links for each connector
- Sets Claude Code as the default selected client

Closes
[AI-699](https://linear.app/supabase/issue/AI-699/add-claudeai-and-chatgpt-connectors-to-mcp-docs)


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

* **New Features**
  * Added Claude.ai and ChatGPT as selectable client options.
* Reorganized the client selector into categorized groups (AI Agent CLI,
Web Clients, IDE) for easier discovery.
* Improved dropdown rendering and selection behavior for more consistent
visuals and interaction.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-04 16:05:47 +01:00
..

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.