Merge pull request #14 from R44VC0RP/cursor/implement-try-in-cursor-button-for-prompts-fa02

R44VC0RP · R44VC0RP · commit 41756adc005e · 2026-03-04T16:40:12.000+03:00
Implement try in cursor button for prompts
diff --git a/app/feed/page.tsx b/app/feed/page.tsx
@@ -7,6 +7,7 @@ import { Eye, Clock } from "lucide-react"
 import { toast } from "sonner"
 import { track } from "@vercel/analytics"
 import { AddToListButton } from "@/components/lists/add-to-list-button"
+import { TryInCursorButton } from "@/components/ui/try-in-cursor-button"
 import { useSession } from "@/lib/auth-client"
 import Link from "next/link"
 import {
@@ -378,8 +379,22 @@ export default function FeedPage() {
                           </Popover>
                         </div>
 
-                        {/* Second row - Download and Add to List */}
+                        {/* Second row - Try in Cursor, Download and Add to List */}
                         <div className="flex items-center gap-2 justify-start sm:justify-end w-full sm:w-auto">
+                          <div onClick={(e) => e.stopPropagation()}>
+                            <TryInCursorButton
+                              title={rule.title}
+                              content={rule.content}
+                              ruleId={rule.id}
+                              variant="ghost"
+                              size="sm"
+                              analyticsContext="feed"
+                              className="h-auto p-1 hover:bg-white/10 text-xs text-gray-400 hover:text-white flex items-center gap-1.5"
+                            >
+                              Try in Cursor
+                            </TryInCursorButton>
+                          </div>
+                          
                           <button
                             onClick={(e) => {
                               e.stopPropagation()
diff --git a/app/rule/[slug]/page.tsx b/app/rule/[slug]/page.tsx
@@ -12,6 +12,7 @@ import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { track } from "@vercel/analytics"
 import { AddToListButton } from "@/components/lists/add-to-list-button"
+import { TryInCursorButton } from "@/components/ui/try-in-cursor-button"
 import { useSession } from "@/lib/auth-client"
 
 interface CursorRule {
@@ -308,6 +309,16 @@ export default function PublicRulePage() {
           {/* Action Buttons */}
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-0 pt-[0]">
             <div className="flex items-center gap-3 flex-wrap">
+              <TryInCursorButton
+                title={rule.title}
+                content={rule.content}
+                ruleId={rule.id}
+                variant="default"
+                size="sm"
+                analyticsContext="rule-page"
+                className="bg-[#70A7D7] hover:bg-[#8BB8E8] text-white"
+              />
+              
               <Button
                 onClick={handleDownload}
                 variant="secondary"
diff --git a/components/ui/try-in-cursor-button.tsx b/components/ui/try-in-cursor-button.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { generateWebPromptDeeplink, formatRuleAsPrompt, isPromptValidForDeeplink } from "@/lib/cursor-deeplink"
+import { track } from "@vercel/analytics"
+import { toast } from "sonner"
+import { ExternalLink } from "lucide-react"
+
+interface TryInCursorButtonProps {
+  /** The rule title */
+  title: string
+  /** The rule content */
+  content: string
+  /** The rule ID for analytics tracking */
+  ruleId: string
+  /** Button variant */
+  variant?: "default" | "secondary" | "ghost" | "outline"
+  /** Button size */
+  size?: "sm" | "default" | "lg"
+  /** Additional CSS classes */
+  className?: string
+  /** Button text (defaults to "Try in Cursor") */
+  children?: React.ReactNode
+  /** Analytics context for tracking */
+  analyticsContext?: string
+}
+
+export function TryInCursorButton({
+  title,
+  content,
+  ruleId,
+  variant = "default",
+  size = "sm",
+  className,
+  children = "Try in Cursor",
+  analyticsContext = "unknown"
+}: TryInCursorButtonProps) {
+  const [isClicked, setIsClicked] = useState(false)
+
+  const handleClick = () => {
+    try {
+      const promptText = formatRuleAsPrompt(title, content)
+      
+      // Check if the prompt would fit in a deeplink URL
+      if (!isPromptValidForDeeplink(promptText)) {
+        toast.error("This rule is too long to share as a Cursor deeplink")
+        return
+      }
+
+      const deeplink = generateWebPromptDeeplink(promptText)
+      
+      // Open the deeplink in a new window/tab
+      window.open(deeplink, '_blank', 'noopener,noreferrer')
+      
+      // Show feedback
+      setIsClicked(true)
+      setTimeout(() => setIsClicked(false), 2000)
+      
+      // Track the event
+      track("Try in Cursor Clicked", { 
+        ruleId, 
+        ruleTitle: title,
+        context: analyticsContext,
+        promptLength: promptText.length
+      })
+      
+      toast.success("Opening in Cursor...")
+    } catch (error) {
+      console.error("Error generating Cursor deeplink:", error)
+      toast.error("Failed to generate Cursor deeplink")
+    }
+  }
+
+  return (
+    <Button
+      onClick={handleClick}
+      variant={variant}
+      size={size}
+      className={className}
+      disabled={isClicked}
+    >
+      {isClicked ? (
+        <>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18">
+            <g fill="currentColor">
+              <path d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM7.5 12.75L3.75 9L5.16 7.59L7.5 9.93L12.84 4.59L14.25 6L7.5 12.75Z"/>
+            </g>
+          </svg>
+          Opened!
+        </>
+      ) : (
+        <>
+          <svg 
+            xmlns="http://www.w3.org/2000/svg" 
+            width="16" 
+            height="16" 
+            viewBox="0 0 24 24" 
+            fill="none" 
+            stroke="currentColor" 
+            strokeWidth="2" 
+            strokeLinecap="round" 
+            strokeLinejoin="round"
+          >
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+            <polyline points="15,3 21,3 21,9"/>
+            <line x1="10" y1="14" x2="21" y2="3"/>
+          </svg>
+          {children}
+        </>
+      )}
+    </Button>
+  )
+}
diff --git a/lib/cursor-deeplink.ts b/lib/cursor-deeplink.ts
@@ -0,0 +1,66 @@
+/**
+ * Utility functions for generating Cursor deeplinks
+ * Based on the Cursor deeplink documentation
+ */
+
+const MAX_URL_LENGTH = 8000;
+
+/**
+ * Generates a Cursor app deeplink for a prompt
+ * @param promptText The text to pre-fill in the chat
+ * @returns Cursor app deeplink URL
+ */
+export function generatePromptDeeplink(promptText: string): string {
+  const url = new URL('cursor://anysphere.cursor-deeplink/prompt');
+  url.searchParams.set('text', promptText);
+  
+  // Check URL length limit
+  if (url.toString().length > MAX_URL_LENGTH) {
+    throw new Error(`Deeplink URL exceeds maximum length of ${MAX_URL_LENGTH} characters`);
+  }
+  
+  return url.toString();
+}
+
+/**
+ * Generates a web-based Cursor deeplink for a prompt (works in browsers)
+ * @param promptText The text to pre-fill in the chat
+ * @returns Web-based Cursor deeplink URL
+ */
+export function generateWebPromptDeeplink(promptText: string): string {
+  const url = new URL('https://cursor.com/link/prompt');
+  url.searchParams.set('text', promptText);
+  
+  // Check URL length limit
+  if (url.toString().length > MAX_URL_LENGTH) {
+    throw new Error(`Deeplink URL exceeds maximum length of ${MAX_URL_LENGTH} characters`);
+  }
+  
+  return url.toString();
+}
+
+/**
+ * Formats a cursor rule into a prompt suitable for deeplinks
+ * @param title The rule title
+ * @param content The rule content
+ * @returns Formatted prompt text
+ */
+export function formatRuleAsPrompt(title: string, content: string): string {
+  return `Apply this cursor rule: "${title}"
+
+${content}`;
+}
+
+/**
+ * Checks if a prompt text would exceed URL length limits when encoded
+ * @param promptText The prompt text to check
+ * @returns Whether the prompt would fit in a deeplink URL
+ */
+export function isPromptValidForDeeplink(promptText: string): boolean {
+  try {
+    generateWebPromptDeeplink(promptText);
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "start": "next start",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "drizzle-kit migrate",
-    "db:push": "drizzle-kit push"
+    "db:push": "drizzle-kit push",
+    "preinstall": "node preinstall.js"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
@@ -83,4 +84,4 @@
     "tw-animate-css": "1.3.3",
     "typescript": "^5"
   }
-}
+}
diff --git a/preinstall.js b/preinstall.js
