Add the Add to cursor button for RevenueCat MCP (#1083)

* add to cursor button

* add the manual config option

Author: ekurutepe

docs/tools/mcp/setup.mdx

@@ -6,6 +6,8 @@ excerpt: Configure RevenueCat MCP Server for cloud or local deployment
 hidden: false
 ---
 
+import AddToCursor from '@site/src/components/AddToCursor';
+
 ## Prerequisites
 
 - RevenueCat project with API v2 access
@@ -26,19 +28,36 @@ hidden: false
 
 ## Cloud MCP Server Setup
 
-### Using with MCP Inspector
-
-For testing and development:
+### Using with Claude Code
 
-```bash
-npx @modelcontextprotocol/inspector@latest
+Add the server via the `claude` CLI command:
+```
+claude mcp add --transport http revenuecat https://mcp.revenuecat.ai/mcp --header "Authorization: Bearer YOUR_API_V2_SECRET_KEY"
 ```
 
-Configure the inspector with:
+### Using with Cursor
 
-- **Transport Type**: Streamable HTTP
-- **URL**: `https://mcp.revenuecat.ai/mcp`
-- **Authentication**: Bearer Token with your RevenueCat API v2 secret key
+You can add the MCP server to Cursor by clicking the button below:
+
+<AddToCursor 
+  name="revenuecat" 
+  config={{url: "https://mcp.revenuecat.ai/mcp"}} 
+/>
+
+Or you can also add it manually by adding the following to your `mcp.json` file:
+
+```json
+{ 
+    "servers": {
+        "revenuecat": {
+            "url": "https://mcp.revenuecat.ai/mcp",
+            "headers": {
+                "Authorization": "Bearer {your API v2 token}"
+            }
+        }
+    }
+}
+```
 
 ### Using with VS Code Copilot
 
@@ -56,13 +75,6 @@ Add to your Visual Studio Code `mcp.json`:
 }
 ```
 
-### Using with Claude Code
-
-Add the server via the `claude` CLI command:
-```
-claude mcp add --transport http revenuecat https://mcp.revenuecat.ai/mcp --header "Authorization: Bearer YOUR_API_V2_SECRET_KEY"
-```
-
 ### Using with Claude Desktop
 
 Add to your Claude Desktop configuration:
@@ -86,6 +98,21 @@ Add to your Claude Desktop configuration:
 }
 ```
 
+### Using with MCP Inspector
+
+For testing and development:
+
+```bash
+npx @modelcontextprotocol/inspector@latest
+```
+
+Configure the inspector with:
+
+- **Transport Type**: Streamable HTTP
+- **URL**: `https://mcp.revenuecat.ai/mcp`
+- **Authentication**: Bearer Token with your RevenueCat API v2 secret key
+
+
 ### OAuth Authentication Support
 
 RevenueCat MCP Server also supports OAuth authentication for supported clients. Currently supported:

src/components/AddToCursor/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import "./styles.css";
+
+interface AddToCursorProps {
+  name: string;
+  config: object;
+  alt?: string;
+  height?: number;
+}
+
+const AddToCursor: React.FC<AddToCursorProps> = ({
+  name,
+  config,
+  alt = `Add ${name} MCP server to Cursor`,
+  height = 32,
+}) => {
+  const { colorMode } = useColorMode();
+
+  // Encode the config object to base64
+  const encodedConfig = btoa(JSON.stringify(config));
+
+  // Construct the Cursor install URL
+  const installUrl = `https://cursor.com/en/install-mcp?name=${encodeURIComponent(name)}&config=${encodedConfig}`;
+
+  // Use dark button for light mode, light button for dark mode
+  const buttonImage =
+    colorMode === "dark"
+      ? "https://cursor.com/deeplink/mcp-install-light.svg"
+      : "https://cursor.com/deeplink/mcp-install-dark.svg";
+
+  return (
+    <div className="add-to-cursor">
+      <a href={installUrl} target="_blank" rel="noopener noreferrer">
+        <img src={buttonImage} alt={alt} height={height} />
+      </a>
+    </div>
+  );
+};
+
+export default AddToCursor;

src/components/AddToCursor/styles.css

@@ -0,0 +1,25 @@
+.add-to-cursor {
+  display: inline-block;
+  margin: 1rem 0;
+}
+
+.add-to-cursor a {
+  display: inline-block;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+}
+
+.add-to-cursor a:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.1);
+}
+
+.add-to-cursor img {
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s ease-in-out;
+}
+
+.add-to-cursor a:hover img {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}

src/theme/MDXComponents.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import MDXComponents from "@theme-original/MDXComponents";
 import RCCodeBlock from "@site/src/components/RCCodeBlock";
 import YouTubeEmbed from "@site/src/components/YouTubeEmbed";
+import AddToCursor from "@site/src/components/AddToCursor";
 import SampleApp from "../components/SampleApp/SampleApp";
 import Button from "@site/src/components/Button/Button";
 import FeatureItem from "@site/src/components/FeatureItem/FeatureItem";
@@ -12,6 +13,7 @@ import ContentCardItem from "@site/src/components/ContentCardItem/ContentCardIte
 type MDXComponentsType = typeof MDXComponents & {
   RCCodeBlock: typeof RCCodeBlock;
   YouTubeEmbed: typeof YouTubeEmbed;
+  AddToCursor: typeof AddToCursor;
   SampleApp: typeof SampleApp;
   Button: typeof Button;
   FeatureItem: typeof FeatureItem;
@@ -23,6 +25,7 @@ const customMDXComponents: MDXComponentsType = {
   ...MDXComponents,
   RCCodeBlock,
   YouTubeEmbed,
+  AddToCursor,
   SampleApp,
   Button,
   FeatureItem,