From 52cb7f82b20dc17695ada6dc7a5e2e27d20ff75e Mon Sep 17 00:00:00 2001 From: Greg Richardson Date: Tue, 18 Feb 2025 14:07:02 -0700 Subject: [PATCH] Docs: MCP with AI tools (#33610) * docs: mcp * fix: change admonition type to note * chore: add 'npx' to dictionary * feat: adds windsurf example * fix: adds codium to dictionary --- apps/docs/components/Breadcrumbs.tsx | 29 ++-- .../NavigationMenu.constants.ts | 8 +- .../NavigationMenuGuideList.tsx | 41 +++-- .../content/guides/getting-started/mcp.mdx | 153 ++++++++++++++++++ supa-mdx-lint/Rule003Spelling.toml | 2 + 5 files changed, 205 insertions(+), 28 deletions(-) create mode 100644 apps/docs/content/guides/getting-started/mcp.mdx diff --git a/apps/docs/components/Breadcrumbs.tsx b/apps/docs/components/Breadcrumbs.tsx index d8d2e4856fb..d41b2b0e941 100644 --- a/apps/docs/components/Breadcrumbs.tsx +++ b/apps/docs/components/Breadcrumbs.tsx @@ -109,15 +109,15 @@ const BreadcrumbsInternal = ({
- {breadcrumbs - .slice(1, -2) - .map((crumb) => - crumb.url ? ( - {crumb.title || crumb.name} - ) : ( - crumb.title || crumb.name - ) - )} + {breadcrumbs.slice(1, -2).map((crumb, index) => + crumb.url ? ( + + {crumb.title || crumb.name} + + ) : ( + crumb.title || crumb.name + ) + )}
@@ -131,12 +131,12 @@ const BreadcrumbsInternal = ({ )} - {appendedBreadcrumbs?.map((crumb, i) => ( - + {appendedBreadcrumbs?.map((crumb, index) => ( + {crumb.url ? ( @@ -148,7 +148,7 @@ const BreadcrumbsInternal = ({ )} ))} @@ -170,7 +170,8 @@ function useBreadcrumbs() { if (isAiPromptsPage) { const breadcrumbs = [ { name: 'Getting started', url: '/guides/getting-started' }, - { name: 'AI Prompts', url: '/guides/getting-started/ai-prompts' }, + { name: 'AI Tools' }, + { name: 'Prompts', url: '/guides/getting-started/ai-prompts' }, ] return breadcrumbs } diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index e11d3a9a774..bd5f0b3c2a3 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -366,13 +366,17 @@ export const gettingstarted: NavMenuConstant = { ], }, { - name: 'AI Prompts', + name: 'AI Tools', url: undefined, items: [ { - name: 'Overview', + name: 'Prompts', url: '/guides/getting-started/ai-prompts', }, + { + name: 'Model context protocol (MCP)', + url: '/guides/getting-started/mcp', + }, ], }, ], diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx index e9e211a8265..5ce453b67de 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx @@ -39,19 +39,36 @@ const NavigationMenuGuideList = ({ } } + // Inject federated prompts into the 'AI Tools > Prompts' section if (id === MenuId.GettingStarted && additionalNavItems?.prompts) { - const promptsSectionIndex = menu.items.findIndex((item) => item.name === 'AI Prompts') - if (promptsSectionIndex !== -1) { - menu = { - ...menu, - items: [ - ...menu.items.slice(0, promptsSectionIndex), - { - ...menu.items[promptsSectionIndex], - items: [...menu.items[promptsSectionIndex].items, ...additionalNavItems.prompts], - }, - ...menu.items.slice(promptsSectionIndex + 1), - ], + const aiToolsSectionIndex = menu.items.findIndex((item) => item.name === 'AI Tools') + if (aiToolsSectionIndex !== -1) { + const beforeAITools = menu.items.slice(0, aiToolsSectionIndex) + const afterAITools = menu.items.slice(aiToolsSectionIndex + 1) + + const aiToolsSection = menu.items[aiToolsSectionIndex] + const promptsSectionIndex = aiToolsSection.items.findIndex((item) => item.name === 'Prompts') + + if (promptsSectionIndex !== -1) { + const beforePrompts = aiToolsSection.items.slice(0, promptsSectionIndex) + const afterPrompts = aiToolsSection.items.slice(promptsSectionIndex + 1) + + const promptsSection = aiToolsSection.items[promptsSectionIndex] + + const modifiedPromptsSection = { + ...promptsSection, + items: additionalNavItems.prompts, + } + + const modifiedAIToolsSection = { + ...aiToolsSection, + items: [...beforePrompts, modifiedPromptsSection, ...afterPrompts], + } + + menu = { + ...menu, + items: [...beforeAITools, modifiedAIToolsSection, ...afterAITools], + } } } } diff --git a/apps/docs/content/guides/getting-started/mcp.mdx b/apps/docs/content/guides/getting-started/mcp.mdx new file mode 100644 index 00000000000..49691b960a7 --- /dev/null +++ b/apps/docs/content/guides/getting-started/mcp.mdx @@ -0,0 +1,153 @@ +--- +id: 'ai-tools-mcp' +title: 'Model context protocol (MCP)' +description: 'Connect AI tools to Supabase using MCP' +sidebar_label: 'Model context protocol (MCP)' +--- + +The [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP) is a standard for connecting Large Language Models (LLMs) to external services. This guide will walk you through how to connect AI tools to Supabase using MCP. + +There are a number of popular AI tools that support MCP, including: + +- [Cursor](https://www.cursor.com/) +- [Claude desktop](https://claude.ai/download) +- [Cline](https://github.com/cline/cline) (VS Code extension) +- [Windsurf](https://docs.codeium.com/windsurf) (Codium) + +Connecting these tools to Supabase will allow you to query your database and perform other SQL operations using natural language commands. + +## Connect to Supabase using MCP + +We will use the [Postgres MCP server](https://github.com/modelcontextprotocol/servers/tree/main/src/postgres) to connect AI tools to Supabase. + +### Step 1: Find your database connection string + +To get started, you will need to retrieve your database connection string. These will differ depending on whether you are using a local or hosted instance of Supabase. + +#### For a local Supabase instance + +When running a local instance of Supabase via the [CLI](/docs/reference/cli/introduction), you can find your connection string by running: + +```shell +supabase status +``` + +or if you are using `npx`: + +```shell +npx supabase status +``` + +This will output a list of details about your local Supabase instance. Copy the `DB URL` field in the output. + +#### For a hosted Supabase instance + +When running a hosted instance of Supabase, you can find your connection string by: + +1. Navigating to your project's [Connection settings](/dashboard/project/_/settings/database?showConnect=true) +1. Copying the connection string found under **Session pooler**. + +### Step 2: Configure in your AI tool + +All MCP compatible tools can connect to Supabase using the [Postgres MCP server](https://github.com/modelcontextprotocol/servers/tree/main/src/postgres). Pass the following CLI command to your tool: + +```shell +npx -y @modelcontextprotocol/server-postgres +``` + +Replace `` with the connection string you retrieved in Step 1. + + + +This assumes you have Node.js and npx installed. If you don't have Node.js or prefer to connect to the server using Docker, you can follow the instructions in the [Postgres MCP server README](https://github.com/modelcontextprotocol/servers/tree/main/src/postgres#docker). + + + +Below are some ways to connect to the Postgres MCP server using popular AI tools: + +#### Cursor + +1. Open Cursor and navigate to **Cursor Settings**. +1. Under the **Features** tab, tap **+ Add new MCP server** under the **MCP Servers** section. +1. Enter the following details: + + - **Name**: Supabase (or your project name) + - **Type**: command + - **Command**: `npx -y @modelcontextprotocol/server-postgres ` + + (replace `` with your connection string) + +1. You should see a green active status after the server is successfully connected. + +#### Claude desktop + +1. Open Claude desktop and navigate to **Settings**. +1. Under the **Developer** tab, tap **Edit Config** to open the configuration file. +1. Add the following configuration: + + ```json + { + "mcpServers": { + "supabase": { + "command": "npx", + "args": ["-y", "@modelcontextprotocol/server-postgres", ""] + } + } + } + ``` + + Replace `` with your connection string. + +1. Save the configuration file and restart Claude desktop. + +1. From the new chat screen, you should see a hammer (MCP) icon appear with the new MCP server available. + +#### Cline + +1. Open the Cline extension in VS Code and tap the **MCP Servers** icon. +1. Tap **Configure MCP Servers** to open the configuration file. +1. Add the following configuration: + + ```json + { + "mcpServers": { + "supabase": { + "command": "npx", + "args": ["-y", "@modelcontextprotocol/server-postgres", ""] + } + } + } + ``` + + Replace `` with your connection string. + +1. Save the configuration file. Cline should automatically reload the configuration. + +1. You should see a green active status after the server is successfully connected. + +#### Windsurf + +1. Open Windsurf and navigate to the Cascade assistant. +1. Tap on the hammer (MCP) icon, then **Configure** to open the configuration file. +1. Add the following configuration: + + ```json + { + "mcpServers": { + "supabase": { + "command": "npx", + "args": ["-y", "@modelcontextprotocol/server-postgres", ""] + } + } + } + ``` + + Replace `` with your connection string. + +1. Save the configuration file and reload by tapping **Refresh** in the Cascade assistant. + +1. You should see a green active status after the server is successfully connected. + +## Next steps + +You are now connected to Supabase using MCP! You can now interact with your database using natural language commands. Try asking your AI tool to query your database, create a new table, or perform other SQL operations. diff --git a/supa-mdx-lint/Rule003Spelling.toml b/supa-mdx-lint/Rule003Spelling.toml index 74b7ca0c1e6..2846ee73b81 100644 --- a/supa-mdx-lint/Rule003Spelling.toml +++ b/supa-mdx-lint/Rule003Spelling.toml @@ -118,6 +118,7 @@ allow_list = [ "ClickHouse", "Clippy", "Cloudflare", + "Codium", "Cognito", "Colab", "DBeaver", @@ -286,6 +287,7 @@ allow_list = [ "node-postgres", "npm", "npmrc", + "npx", "ns", "pgAdmin", "pgAudit",