myoperator-mcp 0.0.1

package/dist/index.js

@@ -0,0 +1,1303 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+
+// src/server/index.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+
+// src/data/metadata.ts
+var componentMetadata = {
+  button: {
+    name: "Button",
+    description: "A customizable button component with variants, sizes, and icons. Supports loading states and can render as a child element using Radix Slot.",
+    dependencies: [
+      "@radix-ui/react-slot",
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    props: [
+      {
+        name: "variant",
+        type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"',
+        required: false,
+        description: "The visual style of the button",
+        defaultValue: "default"
+      },
+      {
+        name: "size",
+        type: '"default" | "sm" | "lg" | "icon"',
+        required: false,
+        description: "The size of the button",
+        defaultValue: "default"
+      },
+      {
+        name: "asChild",
+        type: "boolean",
+        required: false,
+        description: "Render as child element using Radix Slot",
+        defaultValue: "false"
+      },
+      {
+        name: "leftIcon",
+        type: "React.ReactNode",
+        required: false,
+        description: "Icon displayed on the left side of the button text"
+      },
+      {
+        name: "rightIcon",
+        type: "React.ReactNode",
+        required: false,
+        description: "Icon displayed on the right side of the button text"
+      },
+      {
+        name: "loading",
+        type: "boolean",
+        required: false,
+        description: "Shows loading spinner and disables button",
+        defaultValue: "false"
+      },
+      {
+        name: "loadingText",
+        type: "string",
+        required: false,
+        description: "Text shown during loading state"
+      },
+      {
+        name: "disabled",
+        type: "boolean",
+        required: false,
+        description: "Disables the button",
+        defaultValue: "false"
+      }
+    ],
+    variants: [
+      {
+        name: "variant",
+        options: [
+          "default",
+          "destructive",
+          "outline",
+          "secondary",
+          "ghost",
+          "link"
+        ],
+        defaultValue: "default"
+      },
+      {
+        name: "size",
+        options: ["default", "sm", "lg", "icon"],
+        defaultValue: "default"
+      }
+    ],
+    examples: [
+      {
+        title: "Basic Button",
+        code: "<Button>Click me</Button>",
+        description: "Simple button with default styling"
+      },
+      {
+        title: "Button Variants",
+        code: `<Button variant="default">Default</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+<Button variant="destructive">Destructive</Button>`,
+        description: "All available button variants"
+      },
+      {
+        title: "Button with Icons",
+        code: `import { Mail, ArrowRight } from "lucide-react"
+
+<Button leftIcon={<Mail />}>Send Email</Button>
+<Button rightIcon={<ArrowRight />}>Next</Button>`,
+        description: "Buttons with left or right icons"
+      },
+      {
+        title: "Loading State",
+        code: `<Button loading>Loading</Button>
+<Button loading loadingText="Saving...">Save</Button>`,
+        description: "Button with loading spinner"
+      },
+      {
+        title: "Icon Only Button",
+        code: `import { Plus } from "lucide-react"
+
+<Button size="icon" aria-label="Add item">
+  <Plus />
+</Button>`,
+        description: "Square icon-only button"
+      }
+    ]
+  },
+  badge: {
+    name: "Badge",
+    description: "A status badge component with active, failed, and disabled variants. Pill-shaped badges with different colors for different states.",
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge"],
+    props: [
+      {
+        name: "variant",
+        type: '"active" | "failed" | "disabled" | "default"',
+        required: false,
+        description: "The visual style of the badge",
+        defaultValue: "default"
+      },
+      {
+        name: "size",
+        type: '"default" | "sm" | "lg"',
+        required: false,
+        description: "The size of the badge",
+        defaultValue: "default"
+      },
+      {
+        name: "leftIcon",
+        type: "React.ReactNode",
+        required: false,
+        description: "Icon displayed on the left side of the badge text"
+      },
+      {
+        name: "rightIcon",
+        type: "React.ReactNode",
+        required: false,
+        description: "Icon displayed on the right side of the badge text"
+      }
+    ],
+    variants: [
+      {
+        name: "variant",
+        options: ["active", "failed", "disabled", "default"],
+        defaultValue: "default"
+      },
+      {
+        name: "size",
+        options: ["default", "sm", "lg"],
+        defaultValue: "default"
+      }
+    ],
+    examples: [
+      {
+        title: "Status Badges",
+        code: `<Badge variant="active">Active</Badge>
+<Badge variant="failed">Failed</Badge>
+<Badge variant="disabled">Disabled</Badge>
+<Badge variant="default">Default</Badge>`,
+        description: "Badges for different status states"
+      },
+      {
+        title: "Badge with Icons",
+        code: `import { Check, X } from "lucide-react"
+
+<Badge variant="active" leftIcon={<Check />}>Success</Badge>
+<Badge variant="failed" leftIcon={<X />}>Error</Badge>`,
+        description: "Badges with status icons"
+      },
+      {
+        title: "Badge Sizes",
+        code: `<Badge size="sm">Small</Badge>
+<Badge size="default">Default</Badge>
+<Badge size="lg">Large</Badge>`,
+        description: "Different badge sizes"
+      }
+    ]
+  },
+  tag: {
+    name: "Tag",
+    description: "A tag component for event labels with optional bold label prefix. Rounded rectangle tags for categorization.",
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge"],
+    props: [
+      {
+        name: "variant",
+        type: '"default" | "primary" | "secondary" | "success" | "warning" | "error"',
+        required: false,
+        description: "The visual style of the tag",
+        defaultValue: "default"
+      },
+      {
+        name: "size",
+        type: '"default" | "sm" | "lg"',
+        required: false,
+        description: "The size of the tag",
+        defaultValue: "default"
+      },
+      {
+        name: "label",
+        type: "string",
+        required: false,
+        description: "Bold label prefix displayed before the content"
+      },
+      {
+        name: "interactive",
+        type: "boolean",
+        required: false,
+        description: "Make the tag clickable with hover/active states",
+        defaultValue: "false"
+      },
+      {
+        name: "selected",
+        type: "boolean",
+        required: false,
+        description: "Show selected state with ring outline",
+        defaultValue: "false"
+      }
+    ],
+    variants: [
+      {
+        name: "variant",
+        options: ["default", "primary", "secondary", "success", "warning", "error"],
+        defaultValue: "default"
+      },
+      {
+        name: "size",
+        options: ["default", "sm", "lg"],
+        defaultValue: "default"
+      }
+    ],
+    examples: [
+      {
+        title: "Basic Tags",
+        code: `<Tag>After Call Event</Tag>
+<Tag variant="primary">Primary</Tag>
+<Tag variant="success">Success</Tag>`,
+        description: "Simple tag labels"
+      },
+      {
+        title: "Tag with Label Prefix",
+        code: `<Tag label="In Call Event:">Start of call, Bridge, Call ended</Tag>
+<Tag label="Category:">Marketing</Tag>`,
+        description: "Tags with bold label prefix"
+      },
+      {
+        title: "Interactive Tags",
+        code: `<Tag interactive onClick={() => console.log('clicked')}>
+  Clickable
+</Tag>
+<Tag interactive selected>Selected Tag</Tag>`,
+        description: "Clickable and selectable tags"
+      }
+    ]
+  },
+  table: {
+    name: "Table",
+    description: "A composable table component with size variants, loading/empty states, sticky columns, and sorting support.",
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge"],
+    props: [
+      {
+        name: "size",
+        type: '"sm" | "md" | "lg"',
+        required: false,
+        description: "The row height of the table",
+        defaultValue: "md"
+      },
+      {
+        name: "withoutBorder",
+        type: "boolean",
+        required: false,
+        description: "Remove outer border from the table",
+        defaultValue: "false"
+      }
+    ],
+    variants: [
+      {
+        name: "size",
+        options: ["sm", "md", "lg"],
+        defaultValue: "md"
+      }
+    ],
+    examples: [
+      {
+        title: "Basic Table",
+        code: `<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Email</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell><Badge variant="active">Active</Badge></TableCell>
+      <TableCell>john@example.com</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>`,
+        description: "Simple table with header and body"
+      },
+      {
+        title: "Table with Loading State",
+        code: `<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableSkeleton rows={5} columns={2} />
+  </TableBody>
+</Table>`,
+        description: "Table showing loading skeleton"
+      },
+      {
+        title: "Table with Empty State",
+        code: `<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableEmpty colSpan={2}>No results found</TableEmpty>
+  </TableBody>
+</Table>`,
+        description: "Table showing empty state message"
+      },
+      {
+        title: "Table with Sticky Column",
+        code: `<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead sticky>ID</TableHead>
+      <TableHead>Name</TableHead>
+      <TableHead>Description</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell sticky>001</TableCell>
+      <TableCell>Item Name</TableCell>
+      <TableCell>Long description text...</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>`,
+        description: "Table with sticky first column"
+      }
+    ]
+  },
+  "dropdown-menu": {
+    name: "DropdownMenu",
+    description: "A dropdown menu component for displaying actions and options. Built on Radix UI with full keyboard navigation support.",
+    dependencies: [
+      "@radix-ui/react-dropdown-menu",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    props: [
+      {
+        name: "DropdownMenu",
+        type: "Root component",
+        required: true,
+        description: "Wrapper component that manages dropdown state"
+      },
+      {
+        name: "DropdownMenuTrigger",
+        type: "Trigger component",
+        required: true,
+        description: "The button that opens the dropdown"
+      },
+      {
+        name: "DropdownMenuContent",
+        type: "Content component",
+        required: true,
+        description: "Container for menu items"
+      },
+      {
+        name: "DropdownMenuItem",
+        type: "Item component",
+        required: false,
+        description: "Individual menu item"
+      },
+      {
+        name: "DropdownMenuCheckboxItem",
+        type: "Checkbox item component",
+        required: false,
+        description: "Menu item with checkbox"
+      },
+      {
+        name: "DropdownMenuRadioGroup",
+        type: "Radio group component",
+        required: false,
+        description: "Group of radio menu items"
+      },
+      {
+        name: "DropdownMenuSeparator",
+        type: "Separator component",
+        required: false,
+        description: "Visual separator between items"
+      }
+    ],
+    variants: [],
+    examples: [
+      {
+        title: "Basic Dropdown",
+        code: `<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Open Menu</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>Profile</DropdownMenuItem>
+    <DropdownMenuItem>Settings</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Logout</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>`,
+        description: "Simple dropdown with menu items"
+      },
+      {
+        title: "Dropdown with Checkbox Items",
+        code: `<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button>Options</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuCheckboxItem checked={showStatus}>
+      Show Status Bar
+    </DropdownMenuCheckboxItem>
+    <DropdownMenuCheckboxItem checked={showPanel}>
+      Show Panel
+    </DropdownMenuCheckboxItem>
+  </DropdownMenuContent>
+</DropdownMenu>`,
+        description: "Dropdown with checkable items"
+      },
+      {
+        title: "Dropdown with Submenu",
+        code: `<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button>Actions</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>New File</DropdownMenuItem>
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
+      <DropdownMenuSubContent>
+        <DropdownMenuItem>Email</DropdownMenuItem>
+        <DropdownMenuItem>Slack</DropdownMenuItem>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  </DropdownMenuContent>
+</DropdownMenu>`,
+        description: "Nested dropdown with submenu"
+      }
+    ]
+  }
+};
+function getComponentNames() {
+  return Object.keys(componentMetadata);
+}
+function getComponent(name) {
+  return componentMetadata[name.toLowerCase()];
+}
+
+// src/server/tools/list-components.ts
+function registerListComponents(server) {
+  server.tool(
+    "list-components",
+    "List all available myOperator UI components with their descriptions",
+    {},
+    async () => {
+      const components = getComponentNames().map((name) => ({
+        name: componentMetadata[name].name,
+        id: name,
+        description: componentMetadata[name].description,
+        dependencyCount: componentMetadata[name].dependencies.length
+      }));
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(
+              {
+                totalComponents: components.length,
+                components,
+                usage: "Use get-component-metadata with the component id to get detailed information"
+              },
+              null,
+              2
+            )
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/server/tools/get-component-metadata.ts
+import { z } from "zod";
+function registerGetComponentMetadata(server) {
+  server.tool(
+    "get-component-metadata",
+    "Get detailed metadata for a myOperator UI component including props, variants, and dependencies",
+    {
+      componentName: z.string().describe("The name of the component (e.g., 'button', 'badge', 'table')")
+    },
+    async ({ componentName }) => {
+      const component = getComponent(componentName);
+      if (!component) {
+        const availableComponents = getComponentNames().join(", ");
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Error: Component "${componentName}" not found. Available components: ${availableComponents}`
+            }
+          ],
+          isError: true
+        };
+      }
+      const metadata = {
+        name: component.name,
+        description: component.description,
+        dependencies: component.dependencies,
+        props: component.props,
+        variants: component.variants,
+        import: `import { ${component.name} } from "@/components/ui/${componentName}"`
+      };
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(metadata, null, 2)
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/server/tools/get-component-examples.ts
+import { z as z2 } from "zod";
+function registerGetComponentExamples(server) {
+  server.tool(
+    "get-component-examples",
+    "Get React code examples for a myOperator UI component",
+    {
+      componentName: z2.string().describe("The name of the component (e.g., 'button', 'badge', 'table')"),
+      exampleType: z2.string().optional().describe("Filter examples by type/title (optional)")
+    },
+    async ({ componentName, exampleType }) => {
+      const component = getComponent(componentName);
+      if (!component) {
+        const availableComponents = getComponentNames().join(", ");
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Error: Component "${componentName}" not found. Available components: ${availableComponents}`
+            }
+          ],
+          isError: true
+        };
+      }
+      let examples = component.examples;
+      if (exampleType) {
+        examples = examples.filter(
+          (example) => example.title.toLowerCase().includes(exampleType.toLowerCase())
+        );
+      }
+      if (examples.length === 0) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `No examples found${exampleType ? ` matching "${exampleType}"` : ""} for component "${componentName}"`
+            }
+          ]
+        };
+      }
+      const result = {
+        component: component.name,
+        import: `import { ${component.name} } from "@/components/ui/${componentName}"`,
+        examplesCount: examples.length,
+        examples: examples.map((example) => ({
+          title: example.title,
+          description: example.description,
+          code: example.code
+        }))
+      };
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result, null, 2)
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/server/tools/list-design-tokens.ts
+import { z as z3 } from "zod";
+
+// src/data/tokens.ts
+var designTokens = [
+  // Primary Colors
+  {
+    name: "Primary",
+    value: "#343E55",
+    category: "colors",
+    description: "Primary brand color used for buttons, links, and emphasis"
+  },
+  {
+    name: "Primary Hover",
+    value: "#343E55/90",
+    category: "colors",
+    description: "Primary color at 90% opacity for hover states"
+  },
+  // Status Colors
+  {
+    name: "Active/Success",
+    value: "#00A651",
+    category: "colors",
+    description: "Green color for active/success states"
+  },
+  {
+    name: "Active Background",
+    value: "#E5FFF5",
+    category: "colors",
+    description: "Light green background for active badges"
+  },
+  {
+    name: "Failed/Error",
+    value: "#FF3B3B",
+    category: "colors",
+    description: "Red color for failed/error states"
+  },
+  {
+    name: "Failed Background",
+    value: "#FFECEC",
+    category: "colors",
+    description: "Light red background for failed badges"
+  },
+  {
+    name: "Warning",
+    value: "#F59E0B",
+    category: "colors",
+    description: "Amber color for warning states"
+  },
+  {
+    name: "Warning Background",
+    value: "#FFF8E5",
+    category: "colors",
+    description: "Light amber background for warnings"
+  },
+  // Neutral Colors
+  {
+    name: "Text Primary",
+    value: "#333333",
+    category: "colors",
+    description: "Primary text color"
+  },
+  {
+    name: "Text Secondary",
+    value: "#6B7280",
+    category: "colors",
+    description: "Secondary/muted text color"
+  },
+  {
+    name: "Text Tertiary",
+    value: "#9CA3AF",
+    category: "colors",
+    description: "Tertiary text color for hints"
+  },
+  {
+    name: "Border",
+    value: "#E5E7EB",
+    category: "colors",
+    description: "Default border color"
+  },
+  {
+    name: "Background Muted",
+    value: "#F3F4F6",
+    category: "colors",
+    description: "Muted background for tags, disabled states"
+  },
+  {
+    name: "Background Hover",
+    value: "#F9FAFB",
+    category: "colors",
+    description: "Hover background for table rows, menu items"
+  },
+  {
+    name: "Background Highlight",
+    value: "#EBF5FF",
+    category: "colors",
+    description: "Blue highlight background for selected rows"
+  },
+  // CSS Variables
+  {
+    name: "background",
+    value: "0 0% 100%",
+    category: "colors",
+    cssVariable: "--background",
+    description: "HSL value for page background"
+  },
+  {
+    name: "foreground",
+    value: "222.2 84% 4.9%",
+    category: "colors",
+    cssVariable: "--foreground",
+    description: "HSL value for default text"
+  },
+  {
+    name: "primary",
+    value: "222.2 47.4% 11.2%",
+    category: "colors",
+    cssVariable: "--primary",
+    description: "HSL value for primary color"
+  },
+  {
+    name: "secondary",
+    value: "210 40% 96.1%",
+    category: "colors",
+    cssVariable: "--secondary",
+    description: "HSL value for secondary color"
+  },
+  {
+    name: "destructive",
+    value: "0 84.2% 60.2%",
+    category: "colors",
+    cssVariable: "--destructive",
+    description: "HSL value for destructive actions"
+  },
+  {
+    name: "muted",
+    value: "210 40% 96.1%",
+    category: "colors",
+    cssVariable: "--muted",
+    description: "HSL value for muted elements"
+  },
+  {
+    name: "accent",
+    value: "210 40% 96.1%",
+    category: "colors",
+    cssVariable: "--accent",
+    description: "HSL value for accents"
+  },
+  {
+    name: "border",
+    value: "214.3 31.8% 91.4%",
+    category: "colors",
+    cssVariable: "--border",
+    description: "HSL value for borders"
+  },
+  {
+    name: "ring",
+    value: "222.2 84% 4.9%",
+    category: "colors",
+    cssVariable: "--ring",
+    description: "HSL value for focus rings"
+  },
+  // Spacing
+  {
+    name: "Spacing XS",
+    value: "0.5rem (8px)",
+    category: "spacing",
+    description: "Extra small spacing"
+  },
+  {
+    name: "Spacing SM",
+    value: "0.75rem (12px)",
+    category: "spacing",
+    description: "Small spacing"
+  },
+  {
+    name: "Spacing MD",
+    value: "1rem (16px)",
+    category: "spacing",
+    description: "Medium spacing (default)"
+  },
+  {
+    name: "Spacing LG",
+    value: "1.5rem (24px)",
+    category: "spacing",
+    description: "Large spacing"
+  },
+  {
+    name: "Spacing XL",
+    value: "2rem (32px)",
+    category: "spacing",
+    description: "Extra large spacing"
+  },
+  // Button Padding
+  {
+    name: "Button SM Padding",
+    value: "py-2 px-3 (8px 12px)",
+    category: "spacing",
+    description: "Small button padding"
+  },
+  {
+    name: "Button Default Padding",
+    value: "py-2.5 px-4 (10px 16px)",
+    category: "spacing",
+    description: "Default button padding"
+  },
+  {
+    name: "Button LG Padding",
+    value: "py-3 px-6 (12px 24px)",
+    category: "spacing",
+    description: "Large button padding"
+  },
+  // Border Radius
+  {
+    name: "Radius",
+    value: "0.5rem (8px)",
+    category: "radius",
+    cssVariable: "--radius",
+    description: "Default border radius"
+  },
+  {
+    name: "Radius SM",
+    value: "0.25rem (4px)",
+    category: "radius",
+    description: "Small border radius (buttons)"
+  },
+  {
+    name: "Radius MD",
+    value: "0.375rem (6px)",
+    category: "radius",
+    description: "Medium border radius"
+  },
+  {
+    name: "Radius LG",
+    value: "0.5rem (8px)",
+    category: "radius",
+    description: "Large border radius (cards, tables)"
+  },
+  {
+    name: "Radius Full",
+    value: "9999px",
+    category: "radius",
+    description: "Full/pill border radius (badges)"
+  },
+  // Typography
+  {
+    name: "Text XS",
+    value: "0.75rem (12px)",
+    category: "typography",
+    description: "Extra small text size"
+  },
+  {
+    name: "Text SM",
+    value: "0.875rem (14px)",
+    category: "typography",
+    description: "Small text size (default for components)"
+  },
+  {
+    name: "Text Base",
+    value: "1rem (16px)",
+    category: "typography",
+    description: "Base text size"
+  },
+  {
+    name: "Font Normal",
+    value: "400",
+    category: "typography",
+    description: "Normal font weight"
+  },
+  {
+    name: "Font Medium",
+    value: "500",
+    category: "typography",
+    description: "Medium font weight (buttons)"
+  },
+  {
+    name: "Font Semibold",
+    value: "600",
+    category: "typography",
+    description: "Semibold font weight (badges, labels)"
+  }
+];
+function getTokensByCategory(category) {
+  if (!category) {
+    return designTokens;
+  }
+  return designTokens.filter((token) => token.category === category);
+}
+function getCategories() {
+  return [...new Set(designTokens.map((token) => token.category))];
+}
+
+// src/server/tools/list-design-tokens.ts
+function registerListDesignTokens(server) {
+  server.tool(
+    "list-design-tokens",
+    "List design tokens (colors, spacing, radius, typography) from the myOperator UI design system",
+    {
+      category: z3.enum(["colors", "spacing", "radius", "typography"]).optional().describe("Filter tokens by category (optional)")
+    },
+    async ({ category }) => {
+      const tokens = getTokensByCategory(category);
+      const categories = getCategories();
+      const result = {
+        totalTokens: tokens.length,
+        availableCategories: categories,
+        selectedCategory: category || "all",
+        tokens: tokens.map((token) => ({
+          name: token.name,
+          value: token.value,
+          category: token.category,
+          cssVariable: token.cssVariable,
+          description: token.description
+        })),
+        usage: {
+          cssVariables: "Use CSS variables like: color: hsl(var(--primary));",
+          hardcodedColors: "For Bootstrap compatibility, some colors are hardcoded (e.g., bg-[#343E55])",
+          tailwindClasses: "Components use Tailwind classes with these token values"
+        }
+      };
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result, null, 2)
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/server/tools/get-component-accessibility.ts
+import { z as z4 } from "zod";
+
+// src/data/accessibility.ts
+var accessibilityGuidelines = {
+  button: {
+    component: "Button",
+    guidelines: [
+      {
+        category: "Semantic HTML",
+        items: [
+          "Uses native <button> element for proper semantics",
+          "Supports asChild prop to render as other elements while maintaining accessibility",
+          "Automatically handles disabled state"
+        ]
+      },
+      {
+        category: "Visual Feedback",
+        items: [
+          "Has visible focus ring using focus-visible for keyboard users",
+          "Disabled state has reduced opacity (50%)",
+          "Loading state shows spinner and maintains text for context"
+        ]
+      },
+      {
+        category: "Best Practices",
+        items: [
+          "Use aria-label for icon-only buttons",
+          "Loading state automatically disables the button to prevent double submission",
+          "Destructive variant uses red color to indicate dangerous actions"
+        ]
+      }
+    ],
+    ariaAttributes: [
+      {
+        attribute: "aria-label",
+        usage: "Required for icon-only buttons to provide accessible name"
+      },
+      {
+        attribute: "aria-disabled",
+        usage: "Set automatically when disabled or loading"
+      },
+      {
+        attribute: "aria-busy",
+        usage: "Consider adding when loading prop is true"
+      }
+    ],
+    keyboardSupport: [
+      { key: "Enter", action: "Activates the button" },
+      { key: "Space", action: "Activates the button" },
+      { key: "Tab", action: "Moves focus to/from the button" }
+    ]
+  },
+  badge: {
+    component: "Badge",
+    guidelines: [
+      {
+        category: "Semantic Usage",
+        items: [
+          "Rendered as <div> - consider adding role='status' for dynamic status badges",
+          "Color alone should not be the only indicator of status",
+          "Include descriptive text alongside color"
+        ]
+      },
+      {
+        category: "Color Contrast",
+        items: [
+          "Active variant: Green text on light green background (passes WCAG AA)",
+          "Failed variant: Red text on light red background (passes WCAG AA)",
+          "Disabled variant: Gray text on gray background (passes WCAG AA)"
+        ]
+      },
+      {
+        category: "Best Practices",
+        items: [
+          "Icons in badges should be decorative and not the only indicator",
+          "Screen readers will read the badge text content",
+          "Consider aria-live='polite' for status badges that update dynamically"
+        ]
+      }
+    ],
+    ariaAttributes: [
+      {
+        attribute: "role='status'",
+        usage: "Add when badge represents live status that updates"
+      },
+      {
+        attribute: "aria-live='polite'",
+        usage: "Add for dynamically updating status badges"
+      }
+    ],
+    keyboardSupport: [
+      { key: "N/A", action: "Badges are not interactive by default" }
+    ]
+  },
+  tag: {
+    component: "Tag",
+    guidelines: [
+      {
+        category: "Interactive Tags",
+        items: [
+          "When interactive=true, component adds role='button' and tabIndex=0",
+          "Selected state uses aria-selected attribute",
+          "Interactive tags respond to keyboard activation"
+        ]
+      },
+      {
+        category: "Visual Design",
+        items: [
+          "Selected state has visible ring outline for clear visual feedback",
+          "Interactive tags have hover and active state styling",
+          "Focus state is visible for keyboard navigation"
+        ]
+      },
+      {
+        category: "Best Practices",
+        items: [
+          "Use label prop for bold category prefixes to improve scannability",
+          "Group related tags together for easier comprehension",
+          "Consider using aria-describedby for additional context if needed"
+        ]
+      }
+    ],
+    ariaAttributes: [
+      {
+        attribute: "role='button'",
+        usage: "Automatically added when interactive=true"
+      },
+      {
+        attribute: "tabIndex='0'",
+        usage: "Automatically added when interactive=true"
+      },
+      {
+        attribute: "aria-selected",
+        usage: "Reflects the selected prop state"
+      }
+    ],
+    keyboardSupport: [
+      { key: "Enter", action: "Activates interactive tag" },
+      { key: "Space", action: "Activates interactive tag" },
+      { key: "Tab", action: "Moves focus between interactive tags" }
+    ]
+  },
+  table: {
+    component: "Table",
+    guidelines: [
+      {
+        category: "Semantic Structure",
+        items: [
+          "Uses native <table>, <thead>, <tbody>, <tr>, <th>, <td> elements",
+          "TableHead uses <th> with proper text-left alignment",
+          "Supports sticky columns that maintain context during horizontal scroll"
+        ]
+      },
+      {
+        category: "Visual Clarity",
+        items: [
+          "Highlighted rows use distinct background color",
+          "Hover states on rows help track which row is being examined",
+          "Sort direction indicators are visible in table headers",
+          "Info tooltips can be added to headers for additional context"
+        ]
+      },
+      {
+        category: "Loading & Empty States",
+        items: [
+          "TableSkeleton provides visual loading feedback",
+          "TableEmpty provides clear message when no data is available",
+          "Skeleton animation indicates data is loading"
+        ]
+      }
+    ],
+    ariaAttributes: [
+      {
+        attribute: "scope='col'",
+        usage: "Consider adding to TableHead for better header association"
+      },
+      {
+        attribute: "aria-sort",
+        usage: "Add to sortable columns to indicate sort state"
+      },
+      {
+        attribute: "aria-describedby",
+        usage: "Link to TableCaption for table description"
+      }
+    ],
+    keyboardSupport: [
+      { key: "Tab", action: "Navigate between interactive elements in cells" },
+      { key: "Arrow keys", action: "Consider adding for cell navigation" }
+    ]
+  },
+  "dropdown-menu": {
+    component: "DropdownMenu",
+    guidelines: [
+      {
+        category: "Keyboard Navigation",
+        items: [
+          "Full arrow key navigation between menu items",
+          "Escape closes the menu and returns focus to trigger",
+          "Enter/Space activates the focused menu item",
+          "Type-ahead search to jump to items starting with typed character"
+        ]
+      },
+      {
+        category: "Focus Management",
+        items: [
+          "Focus is trapped within menu when open",
+          "Focus returns to trigger when menu closes",
+          "Submenus are accessible via arrow keys"
+        ]
+      },
+      {
+        category: "Screen Reader Support",
+        items: [
+          "Proper ARIA roles assigned automatically by Radix",
+          "Menu items announce their role and state",
+          "Checkbox and radio items announce their checked state"
+        ]
+      }
+    ],
+    ariaAttributes: [
+      {
+        attribute: "role='menu'",
+        usage: "Automatically applied to DropdownMenuContent"
+      },
+      {
+        attribute: "role='menuitem'",
+        usage: "Automatically applied to DropdownMenuItem"
+      },
+      {
+        attribute: "role='menuitemcheckbox'",
+        usage: "Automatically applied to DropdownMenuCheckboxItem"
+      },
+      {
+        attribute: "role='menuitemradio'",
+        usage: "Automatically applied to DropdownMenuRadioItem"
+      },
+      {
+        attribute: "aria-expanded",
+        usage: "Set on trigger based on menu open state"
+      },
+      {
+        attribute: "aria-haspopup",
+        usage: "Set on trigger to indicate menu presence"
+      }
+    ],
+    keyboardSupport: [
+      { key: "Enter / Space", action: "Opens menu from trigger, activates item" },
+      { key: "ArrowDown", action: "Opens menu, moves to next item" },
+      { key: "ArrowUp", action: "Moves to previous item" },
+      { key: "ArrowRight", action: "Opens submenu" },
+      { key: "ArrowLeft", action: "Closes submenu" },
+      { key: "Escape", action: "Closes menu" },
+      { key: "Tab", action: "Closes menu and moves focus" },
+      { key: "Home", action: "Moves to first item" },
+      { key: "End", action: "Moves to last item" }
+    ]
+  }
+};
+function getAccessibilityGuideline(componentName) {
+  return accessibilityGuidelines[componentName.toLowerCase()];
+}
+function getComponentsWithGuidelines() {
+  return Object.keys(accessibilityGuidelines);
+}
+
+// src/server/tools/get-component-accessibility.ts
+function registerGetComponentAccessibility(server) {
+  server.tool(
+    "get-component-accessibility",
+    "Get accessibility guidelines and requirements for a myOperator UI component",
+    {
+      componentName: z4.string().describe("The name of the component (e.g., 'button', 'badge', 'table')")
+    },
+    async ({ componentName }) => {
+      const guideline = getAccessibilityGuideline(componentName);
+      if (!guideline) {
+        const availableComponents = getComponentsWithGuidelines().join(", ");
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Error: Accessibility guidelines for "${componentName}" not found. Available components: ${availableComponents}`
+            }
+          ],
+          isError: true
+        };
+      }
+      const result = {
+        component: guideline.component,
+        guidelines: guideline.guidelines,
+        ariaAttributes: guideline.ariaAttributes,
+        keyboardSupport: guideline.keyboardSupport,
+        wcagCompliance: {
+          colorContrast: "All components meet WCAG 2.1 AA color contrast requirements",
+          focusVisible: "Keyboard focus is visible on all interactive elements",
+          semanticHTML: "Native HTML elements used where appropriate"
+        }
+      };
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result, null, 2)
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/server/index.ts
+function createServer() {
+  const server = new McpServer({
+    name: "myoperator-mcp",
+    version: "0.0.1"
+  });
+  registerListComponents(server);
+  registerGetComponentMetadata(server);
+  registerGetComponentExamples(server);
+  registerListDesignTokens(server);
+  registerGetComponentAccessibility(server);
+  return server;
+}
+
+// src/index.ts
+async function main() {
+  const server = createServer();
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error("myOperator MCP server running");
+}
+main().catch((error) => {
+  console.error("Failed to start MCP server:", error);
+  process.exit(1);
+});