add tabs for how to connect MCP server to popular tools

Author: ethanpalm

ai/contextual-menu.mdx

@@ -20,7 +20,7 @@ The contextual menu includes several pre-built options that you can enable by ad
 | **Open in ChatGPT** | `chatgpt` | Creates a ChatGPT conversation with the current page as context |
 | **Open in Claude** | `claude` | Creates a Claude conversation with the current page as context |
 | **Open in Perplexity** | `perplexity` | Creates a Perplexity conversation with the current page as context |
-| **Copy MCP Server URL** | `mcp` | Copies your MCP server URL to the clipboard |
+| **Copy MCP server URL** | `mcp` | Copies your MCP server URL to the clipboard |
 | **Open in Cursor** | `cursor` | Installs your hosted MCP server in Cursor |
 | **Open in VSCode** | `vscode` | Installs your hosted MCP server in VSCode |
 

ai/model-context-protocol.mdx

@@ -17,9 +17,9 @@ Your MCP server exposes tools for AI applications to search your documentation a
   MCP servers can only be generated for public documentation. Documentation behind end-user authentication cannot be accessed for server generation.
 </Note>
 
-Your MCP server is automatically generated and hosted at your documentation URL with the `/mcp` path.
+Your MCP server is automatically generated and hosted at your documentation URL with the `/mcp` path. For example, Mintlify's MCP server is available at `https://mintlify.com/docs/mcp`.
 
-For example, Mintlify's MCP server is available at `https://mintlify.com/docs/mcp`.
+You can see and copy your MCP server URL in your [dashboard](https://dashboard.mintlify.com/products/mcp).
 
 ## Configuring your MCP server
 
@@ -106,11 +106,117 @@ Enable MCP for specific endpoints:
 
 ## Using your MCP server
 
-Your users must connect your MCP server to their preferred AI tools. 
+Your users must connect your MCP server to their preferred AI tools.
 
 1. Make your MCP server URL publicly available.
 2. Users copy your MCP server URL and add it to their tools.
-3. The tools will have standardized access to your documentation and API endpoints.
+3. Users access your documentation and API endpoints through their tools.
+
+These are some of the ways you can help your users connect to your MCP server:
+
+<Tabs>
+<Tab title="Contextual menu">
+  Add options in the [contextual menu](/ai/contextual-menu) for your users to connect to your MCP server from any page of your documentation.
+
+  | Option | Identifier | Description |
+  | :----- | :--------- | :---------- |
+  | **Copy MCP server URL** | `mcp` | Copies your MCP server URL to the user's clipboard. |
+  | **Open in Cursor** | `cursor` | Installs your MCP server in Cursor. |
+  | **Open in VSCode** | `vscode` | Installs your MCP server in VSCode. |
+</Tab>
+<Tab title="Claude">
+<Steps>
+  <Step title="Get your MCP server URL.">
+    Navigate to your [dashboard](https://dashboard.mintlify.com/products/mcp) and find your MCP server URL.
+  </Step>
+  <Step title="Publish your MCP server URL for your users.">
+    Create a guide for your users that includes your MCP server URL and the steps to connect it to Claude.
+    
+    1. Navigate to the [Connectors](https://claude.ai/settings/connectors) page in the Claude settings. 
+    2. Select **Add custom connector**.
+    3. Add your MCP server name and URL.
+    4. Select **Add**.
+    5. When using Claude, select the attachments button (the plus icon).
+    6. Select your MCP server.
+  </Step>
+</Steps>
+
+See the [Model Context Protocol documentation](https://modelcontextprotocol.io/docs/tutorials/use-remote-mcp-server#connecting-to-a-remote-mcp-server) for more details.
+</Tab>
+<Tab title="Claude Code">
+<Steps>
+  <Step title="Get your MCP server URL.">
+    Navigate to your [dashboard](https://dashboard.mintlify.com/products/mcp) and find your MCP server URL.
+  </Step>
+  <Step title="Publish your MCP server URL for your users.">
+    Create a guide for your users that includes your MCP server URL and the command to connect it to Claude Code.
+    
+    ```bash
+    claude mcp add --transport http <name> <url>
+    ```
+  </Step>
+</Steps>
+
+See the [Claude Code documentation](https://docs.anthropic.com/en/docs/claude-code/mcp#installing-mcp-servers) for more details.
+</Tab>
+<Tab title="Cursor">
+<Steps>
+  <Step title="Get your MCP server URL.">
+    Navigate to your [dashboard](https://dashboard.mintlify.com/products/mcp) and find your MCP server URL.
+  </Step>
+  <Step title="Publish your MCP server URL for your users.">
+    Create a guide for your users that includes your MCP server URL and the steps to connect it to Cursor.
+
+    1. Use <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on Windows) to open the command palette.
+    2. Search for "Open MCP settings".
+    3. Select **Add custom MCP**. This will open the `mcp.json` file.
+    4. In `mcp.json`, configure your server:
+
+      ```json
+      {
+        "mcpServers": {
+          "server-name": {
+            "url": "<your-mcp-server-url>"
+          }
+        }
+      }
+      ```
+  </Step>
+</Steps>
+
+  See the [Cursor documentation](https://docs.cursor.com/en/context/mcp#installing-mcp-servers) for more details.
+</Tab>
+<Tab title="VSCode">
+<Steps>
+  <Step title="Get your MCP server URL.">
+    Navigate to your [dashboard](https://dashboard.mintlify.com/products/mcp) and find your MCP server URL.
+  </Step>
+  <Step title="Publish your MCP server URL for your users.">
+    Create a guide for your users that includes your MCP server URL and the steps to connect it to VSCode.
+
+    1. Create a `.vscode/mcp.json` file.
+    2. In `mcp.json`, configure your server:
+
+      ```json
+      {
+        "servers": {
+          "<server-name>": {
+            "type": "http",
+            "url": "<your-mcp-server-url>"
+          }
+        }
+      }
+      ```
+  </Step>
+</Steps>
+
+  See the [VSCode documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
+</Tab>
+</Tabs>
+
+### Example: Connecting to the Mintlify MCP server
+
+Connect to the Mintlify MCP server to interact with the Mintlify API and search our documentation. This will give you more accurate answers about how to use Mintlify in your local environment and demonstrates how you can help your users connect to your MCP server.
 
 <Tabs>
 <Tab title="Claude">