mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Nik RichersandNik Richers
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>
Reference Docs
Supabase Reference Docs
Maintainers
If you are a maintainer of any tools in the Supabase ecosystem, you can use this site to provide documentation for the tools & libraries that you maintain.
DocSpec
We use documentation specifications which can be used to generate human-readable docs.
- OpenAPI: for documenting API endpoints.
- SDKSpec (custom to Supabase): for SDKs and client libraries.
- ConfigSpec (custom to Supabase): for configuration options.
- CLISpec (custom to Supabase): for CLI commands and usage.
The benefit of using custom specifications is that we can generate many other types from a strict schema (eg, HTML and manpages). It also means that we can switch to any documentation system we want. On this site we use Next.js, but on Supabase's official website, we use a custom React site and expose only a subset of the available API for each tool.
Contributing
To contribute to docs, see the developers' guide and contributing guide.