@czi-sds/mcp 0.2.0

package/dist/stdio.js

@@ -0,0 +1,357 @@
+#!/usr/bin/env node
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { z } from 'zod';
+import fs from 'fs';
+import path, { join } from 'path';
+import { fileURLToPath } from 'url';
+import { readFile } from 'fs/promises';
+
+var server = new McpServer({
+  name: "sds-mcp",
+  version: "0.1.0",
+  capabilities: {
+    prompts: {},
+    resources: {},
+    tools: {}
+  }
+});
+var filename = fileURLToPath(import.meta.url);
+var dirname = path.dirname(filename);
+async function getAllComponentNames() {
+  try {
+    const possiblePaths = [
+      path.join(dirname, "../../data/component-list.json"),
+      // From src/lib in dev
+      path.join(dirname, "../data/component-list.json"),
+      // From dist in prod
+      path.join(process.cwd(), "data/component-list.json")
+      // From current working directory
+    ];
+    let dataPath = "";
+    for (const p of possiblePaths) {
+      if (fs.existsSync(p)) {
+        dataPath = p;
+        break;
+      }
+    }
+    if (!dataPath) {
+      throw new Error(
+        "Component list not found in any expected location. Please run 'yarn generate:components-list' first."
+      );
+    }
+    const fileContent = fs.readFileSync(dataPath, "utf-8");
+    const componentList = JSON.parse(fileContent);
+    return componentList;
+  } catch (error) {
+    throw new Error(
+      `Failed to load component list: ${error instanceof Error ? error.message : `Unknown error ${error}`}`
+    );
+  }
+}
+async function fetchComponentProps(component) {
+  try {
+    const propsPaths = [
+      path.join(dirname, `../../data/component-props/${component}.json`),
+      // From src/lib in dev
+      path.join(dirname, `../data/component-props/${component}.json`),
+      // From dist in prod
+      path.join(process.cwd(), `data/component-props/${component}.json`)
+      // From current working directory
+    ];
+    let propsPath = "";
+    for (const p of propsPaths) {
+      if (fs.existsSync(p)) {
+        propsPath = p;
+        break;
+      }
+    }
+    if (!propsPath) {
+      return {
+        [component]: {
+          message: "Props information not available for this component. Run 'yarn generate:component-props' to generate props data.",
+          props: {}
+        }
+      };
+    }
+    const fileContent = fs.readFileSync(propsPath, "utf-8");
+    return JSON.parse(fileContent);
+  } catch (error) {
+    throw new Error(
+      `Failed to load props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
+    );
+  }
+}
+async function fetchComponentPropsStorybook(component) {
+  try {
+    const propsPaths = [
+      path.join(
+        dirname,
+        `../../data/component-props-storybook/${component}-storybook.json`
+      ),
+      // From src/lib in dev
+      path.join(
+        dirname,
+        `../data/component-props-storybook/${component}-storybook.json`
+      ),
+      // From dist in prod
+      path.join(
+        process.cwd(),
+        `data/component-props-storybook/${component}-storybook.json`
+      )
+      // From current working directory
+    ];
+    let propsPath = "";
+    for (const p of propsPaths) {
+      if (fs.existsSync(p)) {
+        propsPath = p;
+        break;
+      }
+    }
+    if (!propsPath) {
+      return {
+        [component]: {
+          message: "Props information not available for this component. Run 'yarn generate:component-props' to generate props data.",
+          props: {}
+        }
+      };
+    }
+    const fileContent = fs.readFileSync(propsPath, "utf-8");
+    return JSON.parse(fileContent);
+  } catch (error) {
+    throw new Error(
+      `Failed to load props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
+    );
+  }
+}
+
+// src/tools/get-component-props.ts
+var getComponentPropsTool = {
+  name: "get_component_props",
+  description: "Get detailed properties of a specific SDS component. This tool retrieves the properties, attributes, design related props for a component, like sdsStyle, sdsType, sdsSize, etc. and configuration options available for a given SDS component.",
+  async ctx() {
+    try {
+      const componentList = await getAllComponentNames();
+      return {
+        componentList: [
+          ...componentList.components,
+          ...componentList["data-viz"]
+        ]
+      };
+    } catch (error) {
+      throw new Error(
+        `Failed to initialize component props tool: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  },
+  exec(server2, { ctx, name, description }) {
+    server2.tool(
+      name,
+      description,
+      {
+        component: z.enum(ctx.componentList).describe("The name of the SDS component to get properties for")
+      },
+      async ({ component }) => {
+        try {
+          const json = await fetchComponentProps(component);
+          return {
+            content: [
+              {
+                type: "text",
+                text: JSON.stringify(json)
+              }
+            ]
+          };
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Failed to get component props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
+              }
+            ]
+          };
+        }
+      }
+    );
+  }
+};
+
+// src/tools/list-components.ts
+var listComponentsTool = {
+  name: "list_components",
+  description: "List all available components in SDS. This tool retrieves the names of all SDS components from both the @czi-sds/components package and the @czi-sds/data-viz package.",
+  async ctx() {
+    try {
+      const componentList = await getAllComponentNames();
+      return { componentList };
+    } catch (error) {
+      throw new Error(
+        `Failed to initialize list components tool: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  },
+  exec(server2, { ctx, name, description }) {
+    server2.tool(name, description, {}, async () => {
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(ctx.componentList, null, 2)
+          }
+        ]
+      };
+    });
+  }
+};
+var getComponentPropsStorybookTool = {
+  name: "get_component_props_storybook",
+  description: "Get detailed properties of a specific SDS component using Storybook analysis. Unlike the regular get-component-props tool, which uses TypeScript analysis, this tool retrieves the properties, attributes, design related props for a component (like sdsStyle, sdsType, sdsSize, etc.), and configuration options available for a given SDS component from Storybook.",
+  async ctx() {
+    try {
+      const componentList = await getAllComponentNames();
+      return {
+        componentList: [
+          ...componentList.components,
+          ...componentList["data-viz"]
+        ]
+      };
+    } catch (error) {
+      throw new Error(
+        `Failed to initialize component props tool: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  },
+  exec(server2, { ctx, name, description }) {
+    server2.tool(
+      name,
+      description,
+      {
+        component: z.enum(ctx.componentList).describe("The name of the SDS component to get properties for")
+      },
+      async ({ component }) => {
+        try {
+          const json = await fetchComponentPropsStorybook(component);
+          return {
+            content: [
+              {
+                type: "text",
+                text: JSON.stringify(json)
+              }
+            ]
+          };
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Failed to get component props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
+              }
+            ]
+          };
+        }
+      }
+    );
+  }
+};
+var getTailwindTokensTool = {
+  name: "get_tailwind_tokens",
+  description: "Get all available Tailwind tokens from the SDS design system. Returns design tokens including colors, typography, spacing, borders, shadows, and other design system values formatted for Tailwind CSS.",
+  async ctx() {
+    return {};
+  },
+  exec(server2, { name, description }) {
+    server2.tool(
+      name,
+      description,
+      {
+        category: z.enum([
+          "all",
+          "fontFamily",
+          "fontSize",
+          "fontVariantNumeric",
+          "letterSpacing",
+          "lineHeight",
+          "textDecoration",
+          "textTransform",
+          "typography",
+          "height",
+          "width",
+          "borderRadius",
+          "boxShadow",
+          "breakpoints",
+          "colors",
+          "spacing"
+        ]).optional().describe(
+          "Optional category of tokens to retrieve. If not specified, returns all tokens."
+        )
+      },
+      async ({ category }) => {
+        try {
+          const dataPath = join(process.cwd(), "data", "tailwind.json");
+          const fileContent = await readFile(dataPath, "utf-8");
+          const tokens = JSON.parse(fileContent);
+          let result = tokens;
+          if (category && category !== "all") {
+            result = tokens[category] || {};
+          }
+          return {
+            content: [
+              {
+                type: "text",
+                text: JSON.stringify(result, null, 2)
+              }
+            ]
+          };
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Failed to get Tailwind tokens: ${error instanceof Error ? error.message : "Unknown error"}`
+              }
+            ]
+          };
+        }
+      }
+    );
+  }
+};
+
+// src/tools/index.ts
+var tools = [
+  getComponentPropsTool,
+  getComponentPropsStorybookTool,
+  listComponentsTool,
+  getTailwindTokensTool
+];
+var registeredToolCache = /* @__PURE__ */ new Map();
+var initializeTools = async (server2, config) => {
+  const enabledTools = tools.filter((tool) => !tool.disabled?.(config));
+  await Promise.all(
+    enabledTools.map(async (tool) => {
+      const toolCtx = await tool.ctx?.();
+      if (registeredToolCache.has(tool.name)) {
+        return;
+      }
+      registeredToolCache.set(tool.name, tool);
+      tool.exec(server2, {
+        config,
+        ctx: toolCtx,
+        description: tool.description,
+        name: tool.name
+      });
+    })
+  );
+};
+
+// src/stdio.ts
+async function main() {
+  await initializeTools(server, {});
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+main().catch((error) => {
+  console.error("Fatal error in main():", error);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@czi-sds/mcp",
+  "description": "The official MCP server for SDS",
+  "version": "0.2.0",
+  "main": "dist/stdio.js",
+  "files": [
+    "dist",
+    "data"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "",
+  "homepage": "https://sds.czi.design",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chanzuckerberg/sci-components",
+    "directory": "packages/mcp"
+  },
+  "scripts": {
+    "generate:tailwind-tokens": "mkdir -p data && cp ../components/src/common/styles-dictionary/json/tailwind.json data/tailwind.json && echo '✓ Copied tailwind.json to data folder'",
+    "generate:components-list": "tsx scripts/generate-component-list.ts",
+    "generate:component-props": "tsx scripts/generate-component-props.ts",
+    "generate:component-props-storybook": "tsx scripts/generate-component-props-from-storybook.ts",
+    "generate:all": "yarn generate:tailwind-tokens && yarn generate:components-list && yarn generate:component-props && yarn generate:component-props-storybook",
+    "prebuild": "yarn generate:all",
+    "build": "yarn prebuild && tsup && chmod 755 dist/stdio.js",
+    "dev": "tsup --watch",
+    "inspect": "node scripts/inspect.js",
+    "inspect:dev": "npx @modelcontextprotocol/inspector npx tsx src/stdio.ts",
+    "serve": "tsx --watch src/http.ts"
+  },
+  "bin": {
+    "sds-mcp": "./dist/stdio.js"
+  },
+  "keywords": [
+    "sds",
+    "mcp-server",
+    "chat",
+    "chatgpt",
+    "mcp"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.15.0",
+    "express": "^5.1.0",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.1",
+    "@types/express": "^5.0.3",
+    "@types/fs-extra": "^11.0.4",
+    "react-docgen-typescript": "^2.4.0",
+    "tsup": "^8.5.0",
+    "tsx": "^4.20.3",
+    "typescript": "^5.9.2"
+  },
+  "gitHead": "f4621fab06e1ddad620b4952aefd5675318d4318"
+}