myoperator-mcp 0.0.3 → 0.0.5

package/README.md

@@ -14,7 +14,12 @@ npx myoperator-mcp
 
 ### Cursor (One-Click Install)
 
-[**Install in Cursor**](cursor://anysphere.cursor-deeplink/mcp/install?name=myoperator&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIm15b3BlcmF0b3ItbWNwIl19)
+[![Install in Cursor](https://cursor.com/deeplink/mcp-install-dark.png)](cursor://anysphere.cursor-deeplink/mcp/install?name=myoperator&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIm15b3BlcmF0b3ItbWNwIl19)
+
+> **Note:** The button above works when viewing this README locally or in an app that supports `cursor://` links. If it doesn't work, copy this link and paste in your browser:
+> ```
+> cursor://anysphere.cursor-deeplink/mcp/install?name=myoperator&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIm15b3BlcmF0b3ItbWNwIl19
+> ```
 
 Or manually edit `~/.cursor/mcp.json`:
 
@@ -96,8 +101,10 @@ Or use Command Palette → "MCP: Add Server"
 | `list-components` | List all available components with descriptions |
 | `get-component-metadata` | Get props, variants, dependencies for a component |
 | `get-component-examples` | Get React code examples |
+| `get-component-source` | **NEW** Get full source code (copy/paste ready) |
 | `list-design-tokens` | List design tokens (colors, spacing, radius, typography) |
 | `get-component-accessibility` | Get accessibility guidelines and ARIA attributes |
+| `get-installation-info` | **NEW** Get npm package info and setup instructions |
 
 ---
 
@@ -143,6 +150,20 @@ Once installed, ask your AI assistant:
 
 > "What keyboard shortcuts does the Table support?"
 
+### Source Code (NEW)
+
+> "Give me the full Button component source code"
+
+> "Get the utils.ts file I need"
+
+> "Get the CSS styles for the design system"
+
+### Installation
+
+> "How do I install myOperator UI?"
+
+> "What are the dependencies I need?"
+
 ---
 
 ## Components
@@ -221,6 +242,33 @@ Output: {
 }
 ```
 
+### `get-component-source`
+
+Get full source code for a component (copy/paste ready).
+
+```
+Input: { componentName: "button" }  // or "utils" or "css"
+Output: {
+  component, file path, dependencies,
+  installCommand,
+  sourceCode (full implementation)
+}
+```
+
+### `get-installation-info`
+
+Get npm package info and setup instructions.
+
+```
+Input: (none)
+Output: {
+  packageName, npmUrl,
+  quickStart commands,
+  manualInstallation steps,
+  dependencies
+}
+```
+
 ---
 
 ## Development

package/dist/index.js

@@ -7,6 +7,266 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 
 // src/data/metadata.ts
+var componentSourceCode = {
+  button: `import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Loader2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-[#343E55] text-white hover:bg-[#343E55]/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-[#343E55] bg-transparent text-[#343E55] hover:bg-[#343E55] hover:text-white",
+        secondary: "bg-[#343E55]/20 text-[#343E55] hover:bg-[#343E55]/30",
+        ghost: "hover:bg-[#343E55]/10 hover:text-[#343E55]",
+        link: "text-[#343E55] underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "py-2.5 px-4",
+        sm: "py-2 px-3 text-xs",
+        lg: "py-3 px-6",
+        icon: "p-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  loading?: boolean
+  loadingText?: string
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, leftIcon, rightIcon, loading = false, loadingText, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <Loader2 className="animate-spin" />
+            {loadingText || children}
+          </>
+        ) : (
+          <>
+            {leftIcon}
+            {children}
+            {rightIcon}
+          </>
+        )}
+      </Comp>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }`,
+  badge: `import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full text-sm font-semibold transition-colors whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        active: "bg-[#E5FFF5] text-[#00A651]",
+        failed: "bg-[#FFECEC] text-[#FF3B3B]",
+        disabled: "bg-[#F3F5F6] text-[#6B7280]",
+        default: "bg-[#F3F5F6] text-[#333333]",
+      },
+      size: {
+        default: "px-3 py-1",
+        sm: "px-2 py-0.5 text-xs",
+        lg: "px-4 py-1.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+}
+
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant, size, leftIcon, rightIcon, children, ...props }, ref) => {
+    return (
+      <div
+        className={cn(badgeVariants({ variant, size, className }), "gap-1")}
+        ref={ref}
+        {...props}
+      >
+        {leftIcon && <span className="[&_svg]:size-3">{leftIcon}</span>}
+        {children}
+        {rightIcon && <span className="[&_svg]:size-3">{rightIcon}</span>}
+      </div>
+    )
+  }
+)
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }`,
+  tag: `import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const tagVariants = cva(
+  "inline-flex items-center justify-center rounded text-sm transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-[#F3F4F6] text-[#333333]",
+        primary: "bg-[#343E55]/10 text-[#343E55]",
+        secondary: "bg-[#E5E7EB] text-[#374151]",
+        success: "bg-[#E5FFF5] text-[#00A651]",
+        warning: "bg-[#FFF8E5] text-[#F59E0B]",
+        error: "bg-[#FFECEC] text-[#FF3B3B]",
+      },
+      size: {
+        default: "px-2 py-1",
+        sm: "px-1.5 py-0.5 text-xs",
+        lg: "px-3 py-1.5",
+      },
+      interactive: {
+        true: "cursor-pointer hover:bg-[#E5E7EB] active:bg-[#D1D5DB]",
+        false: "",
+      },
+      selected: {
+        true: "ring-2 ring-[#343E55] ring-offset-1",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      interactive: false,
+      selected: false,
+    },
+  }
+)
+
+export interface TagProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof tagVariants> {
+  label?: string
+  interactive?: boolean
+  selected?: boolean
+}
+
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  ({ className, variant, size, interactive, selected, label, children, ...props }, ref) => {
+    return (
+      <span
+        className={cn(tagVariants({ variant, size, interactive, selected, className }))}
+        ref={ref}
+        role={interactive ? "button" : undefined}
+        tabIndex={interactive ? 0 : undefined}
+        aria-selected={selected}
+        {...props}
+      >
+        {label && <span className="font-semibold mr-1">{label}</span>}
+        <span className="font-normal">{children}</span>
+      </span>
+    )
+  }
+)
+Tag.displayName = "Tag"
+
+export { Tag, tagVariants }`
+};
+var utilsSourceCode = `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}`;
+var cssStyles = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`;
 var componentMetadata = {
   button: {
     name: "Button",
@@ -1276,17 +1536,202 @@ function registerGetComponentAccessibility(server) {
   );
 }
 
+// src/server/tools/get-component-source.ts
+import { z as z5 } from "zod";
+function registerGetComponentSource(server) {
+  server.tool(
+    "get-component-source",
+    "Get the full source code for a myOperator UI component (copy/paste ready)",
+    {
+      componentName: z5.string().describe(
+        "The name of the component (e.g., 'button', 'badge', 'tag') or 'utils' for the cn() helper or 'css' for styles"
+      )
+    },
+    async ({ componentName }) => {
+      const name = componentName.toLowerCase();
+      if (name === "utils" || name === "cn") {
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(
+                {
+                  file: "lib/utils.ts",
+                  description: "Utility function for merging Tailwind classes",
+                  dependencies: ["clsx", "tailwind-merge"],
+                  installCommand: "npm install clsx tailwind-merge",
+                  sourceCode: utilsSourceCode
+                },
+                null,
+                2
+              )
+            }
+          ]
+        };
+      }
+      if (name === "css" || name === "styles") {
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(
+                {
+                  file: "index.css",
+                  description: "CSS styles with Tailwind and design tokens",
+                  dependencies: ["tailwindcss"],
+                  sourceCode: cssStyles
+                },
+                null,
+                2
+              )
+            }
+          ]
+        };
+      }
+      const sourceCode = componentSourceCode[name];
+      if (!sourceCode) {
+        const availableComponents = [
+          ...Object.keys(componentSourceCode),
+          "utils",
+          "css"
+        ].join(", ");
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Error: Source code for "${componentName}" not found. Available: ${availableComponents}`
+            }
+          ],
+          isError: true
+        };
+      }
+      const dependenciesMap = {
+        button: [
+          "@radix-ui/react-slot",
+          "class-variance-authority",
+          "clsx",
+          "tailwind-merge",
+          "lucide-react"
+        ],
+        badge: ["class-variance-authority", "clsx", "tailwind-merge"],
+        tag: ["class-variance-authority", "clsx", "tailwind-merge"]
+      };
+      const dependencies = dependenciesMap[name] || [];
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(
+              {
+                component: name,
+                file: `components/ui/${name}.tsx`,
+                dependencies,
+                installCommand: dependencies.length > 0 ? `npm install ${dependencies.join(" ")}` : null,
+                requiredFiles: [
+                  {
+                    path: "lib/utils.ts",
+                    note: "Required for cn() function - use get-component-source with 'utils' to get this file"
+                  }
+                ],
+                sourceCode
+              },
+              null,
+              2
+            )
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/server/tools/get-installation-info.ts
+function registerGetInstallationInfo(server) {
+  server.tool(
+    "get-installation-info",
+    "Get installation instructions and npm package info for myOperator UI",
+    {},
+    async () => {
+      const installationInfo = {
+        packageName: "myoperator-ui",
+        npmUrl: "https://www.npmjs.com/package/myoperator-ui",
+        description: "CLI for adding myOperator UI components to your project",
+        quickStart: {
+          step1: "npx myoperator-ui init",
+          step2: "npx myoperator-ui add button",
+          description: "Initialize project and add components via CLI"
+        },
+        manualInstallation: {
+          description: "If you prefer to manually add components:",
+          steps: [
+            {
+              step: 1,
+              title: "Install dependencies",
+              command: "npm install class-variance-authority clsx tailwind-merge"
+            },
+            {
+              step: 2,
+              title: "Create utils file",
+              path: "lib/utils.ts",
+              note: "Use get-component-source with 'utils' to get the code"
+            },
+            {
+              step: 3,
+              title: "Add CSS styles",
+              path: "index.css or globals.css",
+              note: "Use get-component-source with 'css' to get the styles"
+            },
+            {
+              step: 4,
+              title: "Copy component",
+              path: "components/ui/[component].tsx",
+              note: "Use get-component-source with component name to get the code"
+            }
+          ]
+        },
+        peerDependencies: {
+          react: "^18.0.0",
+          "react-dom": "^18.0.0",
+          tailwindcss: "^3.4.0"
+        },
+        optionalDependencies: {
+          "@radix-ui/react-slot": "For Button asChild prop",
+          "@radix-ui/react-dropdown-menu": "For DropdownMenu component",
+          "lucide-react": "For icons"
+        },
+        tailwindConfig: {
+          note: "Add these to your tailwind.config.js",
+          content: ["./components/**/*.{ts,tsx}"],
+          plugins: ["tailwindcss-animate"]
+        },
+        repository: "https://github.com/Ankish8/storybook-npm",
+        documentation: "https://storybook-npm.vercel.app"
+      };
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(installationInfo, null, 2)
+          }
+        ]
+      };
+    }
+  );
+}
+
 // src/server/index.ts
 function createServer() {
   const server = new McpServer({
     name: "myoperator-mcp",
-    version: "0.0.1"
+    version: "0.0.5"
   });
   registerListComponents(server);
   registerGetComponentMetadata(server);
   registerGetComponentExamples(server);
+  registerGetComponentSource(server);
   registerListDesignTokens(server);
   registerGetComponentAccessibility(server);
+  registerGetInstallationInfo(server);
   return server;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",