myoperator-mcp 0.0.4 → 0.1.0

package/README.md

@@ -96,13 +96,26 @@ Or use Command Palette → "MCP: Add Server"
 
 ## Available Tools
 
+### Component Discovery
 | Tool | Description |
 |------|-------------|
 | `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` | Get full source code (copy/paste ready) |
+
+### Installation (like shadcn)
+| Tool | Description |
+|------|-------------|
+| `init-project` | Initialize project for myOperator UI (runs CLI) |
+| `install-component` | Install a component via CLI |
+
+### Design System
+| Tool | Description |
+|------|-------------|
 | `list-design-tokens` | List design tokens (colors, spacing, radius, typography) |
 | `get-component-accessibility` | Get accessibility guidelines and ARIA attributes |
+| `get-installation-info` | Get npm package info and setup instructions |
 
 ---
 
@@ -148,6 +161,22 @@ 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 (like shadcn)
+
+> "Initialize my project for myOperator UI"
+
+> "Install the Button component"
+
+> "Add badge and table components to my project"
+
 ---
 
 ## Components
@@ -226,6 +255,51 @@ 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
+}
+```
+
+### `init-project`
+
+Initialize a project for myOperator UI (runs CLI command).
+
+```
+Input: { cwd?: string }
+Output: { success, command, output }
+```
+
+### `install-component`
+
+Install a component via CLI (like shadcn).
+
+```
+Input: { component: "button", cwd?: string }
+Output: { success, component, command, output }
+```
+
 ---
 
 ## 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,340 @@ 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/tools/install-component.ts
+import { z as z6 } from "zod";
+import { exec } from "child_process";
+import { promisify } from "util";
+var execAsync = promisify(exec);
+function registerInstallComponent(server) {
+  server.tool(
+    "install-component",
+    "Install a myOperator UI component using the CLI (runs: npx myoperator-ui add <component>)",
+    {
+      component: z6.string().describe("The name of the component to install (e.g., 'button', 'badge', 'table')"),
+      cwd: z6.string().optional().describe("Working directory to run the command in (defaults to current directory)")
+    },
+    async ({ component, cwd }) => {
+      const componentName = component.toLowerCase();
+      const availableComponents = getComponentNames();
+      if (!availableComponents.includes(componentName)) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Error: Component "${component}" not found. Available components: ${availableComponents.join(", ")}`
+            }
+          ],
+          isError: true
+        };
+      }
+      try {
+        const command = `npx myoperator-ui add ${componentName}`;
+        const options = cwd ? { cwd } : {};
+        const { stdout, stderr } = await execAsync(command, options);
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(
+                {
+                  success: true,
+                  component: componentName,
+                  command,
+                  output: stdout || "Component installed successfully",
+                  warnings: stderr || null
+                },
+                null,
+                2
+              )
+            }
+          ]
+        };
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(
+                {
+                  success: false,
+                  component: componentName,
+                  error: errorMessage,
+                  suggestion: "Make sure you have initialized the project first with: npx myoperator-ui init"
+                },
+                null,
+                2
+              )
+            }
+          ],
+          isError: true
+        };
+      }
+    }
+  );
+}
+
+// src/server/tools/init-project.ts
+import { z as z7 } from "zod";
+import { exec as exec2 } from "child_process";
+import { promisify as promisify2 } from "util";
+var execAsync2 = promisify2(exec2);
+function registerInitProject(server) {
+  server.tool(
+    "init-project",
+    "Initialize a project for myOperator UI components (runs: npx myoperator-ui init)",
+    {
+      cwd: z7.string().optional().describe("Working directory to run the command in (defaults to current directory)")
+    },
+    async ({ cwd }) => {
+      try {
+        const command = "npx myoperator-ui init";
+        const options = cwd ? { cwd } : {};
+        const { stdout, stderr } = await execAsync2(command, options);
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(
+                {
+                  success: true,
+                  command,
+                  output: stdout || "Project initialized successfully",
+                  warnings: stderr || null,
+                  nextSteps: [
+                    "Run 'install-component' to add components",
+                    "Or use: npx myoperator-ui add button"
+                  ]
+                },
+                null,
+                2
+              )
+            }
+          ]
+        };
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(
+                {
+                  success: false,
+                  error: errorMessage,
+                  suggestion: "Make sure you're in a project directory with package.json and tailwind configured"
+                },
+                null,
+                2
+              )
+            }
+          ],
+          isError: true
+        };
+      }
+    }
+  );
+}
+
 // src/server/index.ts
 function createServer() {
   const server = new McpServer({
     name: "myoperator-mcp",
-    version: "0.0.1"
+    version: "0.1.0"
   });
   registerListComponents(server);
   registerGetComponentMetadata(server);
   registerGetComponentExamples(server);
+  registerGetComponentSource(server);
+  registerInitProject(server);
+  registerInstallComponent(server);
   registerListDesignTokens(server);
   registerGetComponentAccessibility(server);
+  registerGetInstallationInfo(server);
   return server;
 }
 

package/package.json

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