diff --git a/apps/docs/content/_partials/mcp_config.mdx b/apps/docs/content/_partials/mcp_config.mdx
new file mode 100644
index 00000000000..dc36b3c261c
--- /dev/null
+++ b/apps/docs/content/_partials/mcp_config.mdx
@@ -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>
diff --git a/apps/docs/content/guides/getting-started/mcp.mdx b/apps/docs/content/guides/getting-started/mcp.mdx
index 1ac1746f7e1..78b2d4f6566 100644
--- a/apps/docs/content/guides/getting-started/mcp.mdx
+++ b/apps/docs/content/guides/getting-started/mcp.mdx
@@ -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.