mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Docs: adds MCP instructions based on OS (#34210)
docs(mcp): add instructions per os
This commit is contained in:
Greg Richardson authored and GitHub committed
1 parent
2709fa4a3e
commit
944adfa8f6
2 files changed
+141
-109
No files matched your search
@@ -0,0 +1,99 @@
|
||||
<Tabs
|
||||
scrollable
|
||||
size="small"
|
||||
type="underlined"
|
||||
defaultActiveId="mac"
|
||||
queryGroup="os"
|
||||
>
|
||||
|
||||
<TabPanel id="mac" label="macOS">
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"supabase": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-postgres", "<connection-string>"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Replace `<connection-string>` with your connection string.
|
||||
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="windows" label="Windows">
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"supabase": {
|
||||
"command": "cmd",
|
||||
"args": ["/c", "npx", "-y", "@modelcontextprotocol/server-postgres", "<connection-string>"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Replace `<connection-string>` with your connection string.
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
Make sure that `node` and `npx` are available in your system `PATH`. Assuming `node` is installed, you can get the path by running:
|
||||
|
||||
```shell
|
||||
npm config get prefix
|
||||
```
|
||||
|
||||
Then add it to your system `PATH` by running:
|
||||
|
||||
```shell
|
||||
setx PATH "%PATH%;<path-to-dir>"
|
||||
```
|
||||
|
||||
Replacing `<path-to-dir>` with the path you got from the previous command.
|
||||
|
||||
Finally restart {{ .app }} for the changes to take effect.
|
||||
|
||||
</Admonition>
|
||||
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="wsl" label="Windows (WSL)">
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"supabase": {
|
||||
"command": "wsl",
|
||||
"args": ["npx", "-y", "@modelcontextprotocol/server-postgres", "<connection-string>"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Replace `<connection-string>` with your connection string.
|
||||
|
||||
This assumes you have Windows Subsystem for Linux (WSL) enabled and `node`/`npx` are installed within the WSL environment.
|
||||
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="linux" label="Linux">
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"supabase": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-postgres", "<connection-string>"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Replace `<connection-string>` with your connection string.
|
||||
|
||||
</TabPanel>
|
||||
|
||||
</Tabs>
|
||||
@@ -10,9 +10,9 @@ The [Model Context Protocol](https://modelcontextprotocol.io/introduction) (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)
|
||||
- [Cline](https://github.com/cline/cline) (VS Code extension)
|
||||
- [Claude desktop](https://claude.ai/download)
|
||||
|
||||
Connecting these tools to Supabase will allow you to query your database and perform other SQL operations using natural language commands.
|
||||
|
||||
@@ -22,7 +22,14 @@ We will use the [Postgres MCP server](https://github.com/modelcontextprotocol/se
|
||||
|
||||
### 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.
|
||||
To get started, you will need to retrieve your database connection string. These will differ depending on whether you are using a hosted or local instance of Supabase.
|
||||
|
||||
#### 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**.
|
||||
|
||||
#### For a local Supabase instance
|
||||
|
||||
@@ -40,108 +47,21 @@ 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 <connection-string>
|
||||
```
|
||||
|
||||
Replace `<connection-string>` with the connection string you retrieved in Step 1.
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
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).
|
||||
|
||||
</Admonition>
|
||||
|
||||
<Admonition type="note" title="Windows users">
|
||||
|
||||
If you run Node.js and npx in WSL instead of directly on your Windows host, you'll need to prefix the command with `wsl`:
|
||||
|
||||
```shell
|
||||
wsl npx -y @modelcontextprotocol/server-postgres <connection-string>
|
||||
```
|
||||
|
||||
</Admonition>
|
||||
|
||||
Below are some ways to connect to the Postgres MCP server using popular AI tools:
|
||||
MCP compatible tools can connect to Supabase using the [Postgres MCP server](https://github.com/modelcontextprotocol/servers/tree/main/src/postgres). Below are instructions on to connect to the Postgres MCP server using popular AI tools:
|
||||
|
||||
#### Cursor
|
||||
|
||||
1. Open Cursor and open `.cursor/mcp.json` file. Create the file if it doesn't exist.
|
||||
1. Add the following configuration:
|
||||
1. Open Cursor and create a `.cursor` directory in your project root if it doesn't exist.
|
||||
1. Create a `.cursor/mcp.json` file if it doesn't exist and open it.
|
||||
1. Add the following configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"supabase": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-postgres", "<connection-string>"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
<$Partial path="mcp_config.mdx" variables={{ "app": "Cursor" }} />
|
||||
|
||||
Replace `<connection-string>` with your connection string.
|
||||
1. Save the configuration file.
|
||||
|
||||
1. Save the configuration file.
|
||||
|
||||
1. Open Cursor and navigate to **Settings/MCP**. 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", "<connection-string>"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Replace `<connection-string>` 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", "<connection-string>"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Replace `<connection-string>` 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.
|
||||
1. Open Cursor and navigate to **Settings/MCP**. You should see a green active status after the server is successfully connected.
|
||||
|
||||
#### Windsurf
|
||||
|
||||
@@ -149,23 +69,36 @@ Below are some ways to connect to the Postgres MCP server using popular AI tools
|
||||
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", "<connection-string>"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Replace `<connection-string>` with your connection string.
|
||||
<$Partial path="mcp_config.mdx" variables={{ "app": "Windsurf" }} />
|
||||
|
||||
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.
|
||||
|
||||
#### 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:
|
||||
|
||||
<$Partial path="mcp_config.mdx" variables={{ "app": "VS Code" }} />
|
||||
|
||||
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.
|
||||
|
||||
#### 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:
|
||||
|
||||
<$Partial path="mcp_config.mdx" variables={{ "app": "Claude desktop" }} />
|
||||
|
||||
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.
|
||||
|
||||
## 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.
|
||||
Reference in new issue
Block a user