mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 18:11:51 +08:00
e0ecaadc21
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? This PR reworks the `/guides/ai-tools` docs section to be agent-first. The overview now leads with the fastest path to a working setup (the plugin install command), a "What's supported?" card grid showing which coding agents and IDEs work via Plugin and/or MCP (with each product's own tagline, not a generated sentence), and a concepts glossary — instead of a plain four-item list. The sidebar "AI Tools" widget, shown on every guides page, now links to this hub ("Connect your AI agent") instead of opening a ChatGPT/Claude chat frontend. Closes DOCS-1201. ## What is the current behavior? - The `/guides/ai-tools` overview is a plain four-item bullet list with no getting-started path, compatibility info, or concepts explanation. - The sidebar "AI Tools" widget offers "Copy as Markdown", "Ask ChatGPT", and "Ask Claude" — the latter two send you to a chat frontend instead of agent setup. ## What is the new behavior? - `ai-tools.mdx`: intro → plugin install callout → "What's supported?" card grid (`<ContentListings id="ai-tools-supported-agents" />`, icon + tagline + Plugin/MCP badge per agent) → "Key concepts" glossary → "Building AI into your app?" (also converted to `ContentListings`). - New `data/content-listings/ai-tools.data.ts` builds the card grid from the existing `PLUGIN_CLIENTS`/`MCP_CLIENT_DATA` client lists (no new hand-maintained data) — fixing two latent bugs found along the way: GitHub Copilot was keyed differently between the two sources (would have produced duplicate cards), and Windsurf has no upstream docs URL (would have been silently dropped). - New opt-in `badgePosition` field on `ContentListingItem` so the badge renders under the title for the agent grid, without changing the one other existing badge usage (self-hosting's "Official" tag, still inline). - `plugins.mdx`/`mcp.mdx`/`ai-skills.mdx` each get a one-line "Quick start" lead-in so they stand alone via the `.md` content-negotiation route. - `GuidesSidebar.tsx` + `telemetry-constants.ts`: Added "Connect your AI agent" → `/guides/ai-tools`, and the `ask_ai_clicked` event with `agent_setup_clicked`. - Accessibility fix (from review): the "Not supported" indicator now exposes an `sr-only` label instead of being fully `aria-hidden`. ## Additional context - Worktree: `~/GitHub/supabase/supabase-worktrees/nikrichers/docs-1201-make-guidesai-tools-agent-first-and-replace-chat-frontend` - **Open question — Windsurf card**: `windsurf.com` now redirects to a Devin Desktop page (Cognition acquired Windsurf in 2025), but Supabase's own `MCP_CLIENT_DATA` still targets Windsurf's distinct config path (`~/.codeium/windsurf/mcp_config.json`), so the card is still labeled "Windsurf" with its pre-acquisition tagline ("The first agentic IDE. Tomorrow's editor, today."). Needs a follow-up decision on whether to relabel/merge/drop this card once Devin Desktop's MCP support (if any) is confirmed. - Follow-up (not in this PR): deeper IA rework of the ai-tools section belongs to the broader agent-first audit; `content/guides/resources/glossary.mdx` has no MCP/Agent Skills/Plugin/Prompts entries yet — this PR's "Key concepts" is currently the only definition of these terms site-wide. - Verification: | Check | Result | | --- | --- | | Lint (`lint:mdx`, `eslint`), `typecheck`, `test:local lib/content-listings.test.ts` | Pass — 13/13 tests, 0 errors | | `build:guides-markdown` | Pass — card grid flattens cleanly to markdown | | Playwright: broken icon requests, light + dark theme, PR preview | Pass — 0 in either theme | | `/guides/self-hosting` "Official" badge (existing `ContentListings` usage) | Pass — unaffected by the new `badgePosition` opt-in | ### Before & After #### [`/guides/ai-tools`](https://supabase.com/docs/guides/ai-tools) Also shows the sidebar change (right rail): "Ask ChatGPT" / "Ask Claude" → "Connect your AI agent". | [Before](https://supabase.com/docs/guides/ai-tools) | [After](https://docs-git-nikrichers-docs-1201-make-guidesai-too-7c7493-supabase.vercel.app/docs/guides/ai-tools) | | --- | --- | |  |  | Sub-pages each just add a one-line "Quick start" callout under the intro (no other layout change): [plugins](https://supabase.com/docs/guides/ai-tools/plugins) ([preview](https://docs-git-nikrichers-docs-1201-make-guidesai-too-7c7493-supabase.vercel.app/docs/guides/ai-tools/plugins)) · [mcp](https://supabase.com/docs/guides/ai-tools/mcp) ([preview](https://docs-git-nikrichers-docs-1201-make-guidesai-too-7c7493-supabase.vercel.app/docs/guides/ai-tools/mcp)) · [ai-skills](https://supabase.com/docs/guides/ai-tools/ai-skills) ([preview](https://docs-git-nikrichers-docs-1201-make-guidesai-too-7c7493-supabase.vercel.app/docs/guides/ai-tools/ai-skills)). ### Test plan - [x] `/guides/ai-tools` renders callout → card grid → concepts → Building AI into your app, in order - [x] Card grid: one card per agent (no duplicate Copilot), Windsurf present, icons clean in both themes, taglines shown, badges below title - [x] Sidebar shows "Connect your AI agent"; self-hosting's "Official" badge unaffected - [x] `.md` route still serves clean markdown; no lingering `ask_ai_clicked`, ChatGPT/Claude icon, or `SupportedAgentsTable` references --------- Co-authored-by: Nik Richers <nik@validmind.ai>
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import type { McpClient } from 'ui-patterns/McpUrlBuilder'
|
|
|
|
export interface PluginClient extends McpClient {
|
|
repoUrl?: string
|
|
docsUrl?: string
|
|
}
|
|
|
|
export const PLUGIN_CLIENTS: PluginClient[] = [
|
|
{
|
|
key: 'claude-code',
|
|
label: 'Claude Code',
|
|
icon: 'claude',
|
|
repoUrl: 'https://github.com/supabase-community/supabase-plugin',
|
|
docsUrl: 'https://code.claude.com/docs/en/discover-plugins',
|
|
},
|
|
{
|
|
key: 'codex',
|
|
label: 'Codex',
|
|
icon: 'openai',
|
|
hasDistinctDarkIcon: true,
|
|
repoUrl: 'https://github.com/supabase-community/codex-plugin',
|
|
docsUrl: 'https://developers.openai.com/codex/plugins',
|
|
},
|
|
{
|
|
key: 'cursor',
|
|
label: 'Cursor',
|
|
icon: 'cursor',
|
|
repoUrl: 'https://github.com/supabase-community/cursor-plugin',
|
|
docsUrl: 'https://cursor.com/docs/plugins',
|
|
},
|
|
{
|
|
key: 'gemini-cli',
|
|
label: 'Gemini CLI',
|
|
icon: 'gemini-cli',
|
|
repoUrl: 'https://github.com/supabase-community/supabase-plugin',
|
|
docsUrl: 'https://geminicli.com/docs/extensions/',
|
|
},
|
|
{
|
|
key: 'github-copilot',
|
|
label: 'GitHub Copilot',
|
|
icon: 'copilot',
|
|
hasDistinctDarkIcon: true,
|
|
repoUrl: 'https://github.com/supabase-community/supabase-plugin',
|
|
docsUrl:
|
|
'https://docs.github.com/en/copilot/how-tos/copilot-cli/customize-copilot/plugins-finding-installing',
|
|
},
|
|
{
|
|
key: 'kimi',
|
|
label: 'Kimi Code',
|
|
icon: 'kimi',
|
|
hasDistinctDarkIcon: true,
|
|
repoUrl: 'https://github.com/supabase-community/supabase-plugin',
|
|
docsUrl: 'https://www.kimi.com/code/docs/en/kimi-code-cli/customization/plugins.html',
|
|
},
|
|
{
|
|
key: 'vscode',
|
|
label: 'VS Code',
|
|
icon: 'vscode',
|
|
repoUrl: 'https://github.com/supabase-community/supabase-plugin',
|
|
docsUrl: 'https://code.visualstudio.com/docs/agent-customization/agent-plugins',
|
|
},
|
|
]
|