@seed-design/mcp 0.0.20 → 0.0.22

package/bin/index.mjs

@@ -4,8 +4,10 @@ import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { v4 } from 'uuid';
 import WebSocket$1 from 'ws';
-import { createRestNormalizer, generateFigmaSummary, generateCode, getFigmaColorVariableNames } from '@seed-design/figma';
+import { figma, react, createRestNormalizer, getFigmaColorVariableNames } from '@seed-design/figma';
 import { z } from 'zod';
+import fs from 'node:fs';
+import path from 'node:path';
 
 /**
  * Custom logging module that writes to stderr instead of stdout
@@ -261,8 +263,13 @@ function createFigmaWebSocketClient(serverUrl) {
     };
 }
 
-function registerTools(server, figmaClient) {
+function registerTools(server, figmaClient, config = {}) {
     const { joinChannel, sendCommandToFigma } = figmaClient;
+    const { extend } = config ?? {};
+    const figmaPipeline = figma.createPipeline();
+    const reactPipeline = react.createPipeline({
+        extend
+    });
     // join_channel tool
     server.tool("join_channel", "Join a specific channel to communicate with Figma", {
         channel: z.string().describe("The name of the channel to join").default("")
@@ -331,6 +338,31 @@ function registerTools(server, figmaClient) {
             return formatErrorResponse("get_annotations", error);
         }
     });
+    // Component Info Tool
+    server.tool("get_component_info", "Get detailed information about a specific component node in Figma", {
+        nodeId: z.string().describe("The ID of the component node to get information about")
+    }, async ({ nodeId })=>{
+        try {
+            const result = await sendCommandToFigma("get_node_info", {
+                nodeId
+            });
+            const node = result.document;
+            if (node.type !== "COMPONENT" && node.type !== "COMPONENT_SET") {
+                return formatErrorResponse("get_component_info", new Error(`Node with ID ${nodeId} is not a component node`));
+            }
+            const key = result.componentSets[nodeId]?.key ?? result.components[nodeId]?.key;
+            if (!key) {
+                return formatErrorResponse("get_component_info", new Error(`${nodeId} is not present in exported component data`));
+            }
+            return formatObjectResponse({
+                name: node.name,
+                key,
+                componentPropertyDefinitions: node.componentPropertyDefinitions
+            });
+        } catch (error) {
+            return formatErrorResponse("get_node_info", error);
+        }
+    });
     // Node Info Tool
     server.tool("get_node_info", "Get detailed information about a specific node in Figma", {
         nodeId: z.string().describe("The ID of the node to get information about")
@@ -341,12 +373,12 @@ function registerTools(server, figmaClient) {
             });
             const normalizer = createRestNormalizer(result);
             const node = normalizer(result.document);
-            const original = generateFigmaSummary(node, {
+            const original = figmaPipeline.generateCode(node, {
                 shouldPrintSource: true,
                 shouldInferVariableName: false,
                 shouldInferAutoLayout: false
             }) ?? "Failed to generate summarized node info";
-            const inferred = generateFigmaSummary(node, {
+            const inferred = figmaPipeline.generateCode(node, {
                 shouldPrintSource: true,
                 shouldInferVariableName: false,
                 shouldInferAutoLayout: true
@@ -376,12 +408,12 @@ function registerTools(server, figmaClient) {
                 });
                 const normalizer = createRestNormalizer(result);
                 const node = normalizer(result.document);
-                const original = generateFigmaSummary(node, {
+                const original = figmaPipeline.generateCode(node, {
                     shouldInferVariableName: false,
                     shouldPrintSource: true,
                     shouldInferAutoLayout: false
                 }) ?? "Failed to generate summarized node info";
-                const inferred = generateFigmaSummary(node, {
+                const inferred = figmaPipeline.generateCode(node, {
                     shouldInferVariableName: true,
                     shouldPrintSource: true,
                     shouldInferAutoLayout: false
@@ -411,7 +443,7 @@ function registerTools(server, figmaClient) {
                 nodeId
             });
             const normalizer = createRestNormalizer(result);
-            const code = generateCode(normalizer(result.document), {
+            const code = reactPipeline.generateCode(normalizer(result.document), {
                 shouldInferVariableName: true,
                 shouldPrintSource: false,
                 shouldInferAutoLayout: true
@@ -601,14 +633,14 @@ function registerPrompts(server) {
      - First use get_selection() to understand the current selection
      - If no selection ask user to select single node
   
-  2. Get React code of the selected nodes:
+  2. Get React code of the selected node:
      - Use get_node_react_code() to get the React code of the selected node
      - If no selection ask user to select single node
   `
                     }
                 }
             ],
-            description: "Best practices for reading Figma designs"
+            description: "Best practices for implementing React components"
         };
     });
     server.prompt("read_design_strategy", "Best practices for reading Figma designs", (_extra)=>{
@@ -636,7 +668,34 @@ function registerPrompts(server) {
     });
 }
 
-var version = "0.0.20";
+var version = "0.0.22";
+
+// Config loader
+async function loadConfig(configPath) {
+    try {
+        const resolvedPath = path.resolve(process.cwd(), configPath);
+        if (!fs.existsSync(resolvedPath)) {
+            logger.error(`Config file not found: ${resolvedPath}`);
+            return null;
+        }
+        // Handle different file types
+        if (resolvedPath.endsWith(".json")) {
+            const content = fs.readFileSync(resolvedPath, "utf-8");
+            return JSON.parse(content);
+        }
+        if (resolvedPath.endsWith(".js") || resolvedPath.endsWith(".mjs") || resolvedPath.endsWith(".ts") || resolvedPath.endsWith(".mts")) {
+            // For JS/MJS/TS/MTS files, we can dynamically import with Bun
+            // Bun has built-in TypeScript support without requiring transpilation
+            const config = await import(resolvedPath);
+            return config.default || config;
+        }
+        logger.error(`Unsupported config file format: ${resolvedPath}`);
+        return null;
+    } catch (error) {
+        logger.error(`Failed to load config file: ${error instanceof Error ? error.message : String(error)}`);
+        return null;
+    }
+}
 
 // Initialize CLI
 const cli = cac("@seed-design/mcp");
@@ -791,13 +850,28 @@ async function startWebSocketServer(port) {
     console.log(`WebSocket server running on port ${server.port}`);
     return server;
 }
-async function startMcpServer(serverUrl, experimental) {
+async function startMcpServer(serverUrl, experimental, configPath) {
+    // Load config if provided
+    let configData = null;
+    if (configPath) {
+        configData = await loadConfig(configPath);
+        if (configData) {
+            logger.info(`Loaded configuration from: ${configPath}`);
+            // Log component transformers if present
+            if (configData.extend?.componentTransformers) {
+                const transformerKeys = configData.extend.componentTransformers.map((t)=>t.key);
+                if (transformerKeys.length > 0) {
+                    logger.info(`Found ${transformerKeys.length} custom component transformers: ${transformerKeys.join(", ")}`);
+                }
+            }
+        }
+    }
     const figmaClient = createFigmaWebSocketClient(serverUrl);
     const server = new McpServer({
         name: "SEED Design MCP",
         version
     });
-    registerTools(server, figmaClient);
+    registerTools(server, figmaClient, configData);
     if (experimental) {
         registerEditingTools(server, figmaClient);
     }
@@ -817,8 +891,8 @@ cli.command("", "Start the MCP server").option("--server <server>", "Server URL"
     default: "localhost"
 }).option("--experimental", "Enable experimental features", {
     default: false
-}).action(async (options)=>{
-    await startMcpServer(options.server, options.experimental);
+}).option("--config <config>", "Path to configuration file (.js, .mjs, .ts, .mts)").action(async (options)=>{
+    await startMcpServer(options.server, options.experimental, options.config);
 });
 cli.command("socket", "Start the WebSocket server").option("--port <port>", "Port number", {
     default: 3055

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/mcp",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -22,20 +22,19 @@
     "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.7.0",
-    "@seed-design/figma": "0.0.20",
+    "@modelcontextprotocol/sdk": "^1.10.2",
+    "@seed-design/figma": "0.0.22",
     "cac": "^6.7.14",
-    "express": "^4.21.2",
     "uuid": "^11.1.0",
     "ws": "^8.18.1",
     "yargs": "^17.7.2",
     "zod": "^3.24.3"
   },
   "devDependencies": {
-    "@types/bun": "^1.2.8",
+    "@types/bun": "^1.2.10",
     "@types/ws": "^8.18.1",
     "@types/yargs": "^17.0.33",
-    "typescript": "^5.4.5"
+    "typescript": "^5.8.3"
   },
   "publishConfig": {
     "access": "public"

package/src/bin/index.ts

@@ -9,6 +9,7 @@ import { registerEditingTools, registerTools } from "../tools";
 import { registerPrompts } from "../prompts";
 import { version } from "../../package.json" assert { type: "json" };
 import type { Server, ServerWebSocket } from "bun";
+import { loadConfig, type McpConfig } from "../config";
 
 // Initialize CLI
 const cli = cac("@seed-design/mcp");
@@ -188,14 +189,33 @@ async function startWebSocketServer(port: number) {
   return server;
 }
 
-async function startMcpServer(serverUrl: string, experimental: boolean) {
+async function startMcpServer(serverUrl: string, experimental: boolean, configPath?: string) {
+  // Load config if provided
+  let configData: McpConfig | null = null;
+  if (configPath) {
+    configData = await loadConfig(configPath);
+    if (configData) {
+      logger.info(`Loaded configuration from: ${configPath}`);
+
+      // Log component transformers if present
+      if (configData.extend?.componentTransformers) {
+        const transformerKeys = configData.extend.componentTransformers.map((t) => t.key);
+        if (transformerKeys.length > 0) {
+          logger.info(
+            `Found ${transformerKeys.length} custom component transformers: ${transformerKeys.join(", ")}`,
+          );
+        }
+      }
+    }
+  }
+
   const figmaClient = createFigmaWebSocketClient(serverUrl);
   const server = new McpServer({
     name: "SEED Design MCP",
     version,
   });
 
-  registerTools(server, figmaClient);
+  registerTools(server, figmaClient, configData);
   if (experimental) {
     registerEditingTools(server, figmaClient);
   }
@@ -220,8 +240,9 @@ cli
   .command("", "Start the MCP server")
   .option("--server <server>", "Server URL", { default: "localhost" })
   .option("--experimental", "Enable experimental features", { default: false })
+  .option("--config <config>", "Path to configuration file (.js, .mjs, .ts, .mts)")
   .action(async (options) => {
-    await startMcpServer(options.server, options.experimental);
+    await startMcpServer(options.server, options.experimental, options.config);
   });
 
 cli

package/src/config.ts

@@ -0,0 +1,47 @@
+import type { CreatePipelineConfig } from "@seed-design/figma/codegen/targets/react";
+import fs from "node:fs";
+import path from "node:path";
+import { logger } from "./logger";
+
+// Define config type
+export interface McpConfig {
+  extend?: CreatePipelineConfig["extend"];
+}
+
+// Config loader
+export async function loadConfig(configPath: string) {
+  try {
+    const resolvedPath = path.resolve(process.cwd(), configPath);
+
+    if (!fs.existsSync(resolvedPath)) {
+      logger.error(`Config file not found: ${resolvedPath}`);
+      return null;
+    }
+
+    // Handle different file types
+    if (resolvedPath.endsWith(".json")) {
+      const content = fs.readFileSync(resolvedPath, "utf-8");
+      return JSON.parse(content);
+    }
+
+    if (
+      resolvedPath.endsWith(".js") ||
+      resolvedPath.endsWith(".mjs") ||
+      resolvedPath.endsWith(".ts") ||
+      resolvedPath.endsWith(".mts")
+    ) {
+      // For JS/MJS/TS/MTS files, we can dynamically import with Bun
+      // Bun has built-in TypeScript support without requiring transpilation
+      const config = await import(resolvedPath);
+      return config.default || config;
+    }
+
+    logger.error(`Unsupported config file format: ${resolvedPath}`);
+    return null;
+  } catch (error) {
+    logger.error(
+      `Failed to load config file: ${error instanceof Error ? error.message : String(error)}`,
+    );
+    return null;
+  }
+}

package/src/prompts.ts

@@ -17,14 +17,14 @@ export function registerPrompts(server: McpServer): void {
      - First use get_selection() to understand the current selection
      - If no selection ask user to select single node
   
-  2. Get React code of the selected nodes:
+  2. Get React code of the selected node:
      - Use get_node_react_code() to get the React code of the selected node
      - If no selection ask user to select single node
   `,
             },
           },
         ],
-        description: "Best practices for reading Figma designs",
+        description: "Best practices for implementing React components",
       };
     },
   );

package/src/tools.ts

@@ -1,11 +1,8 @@
+import type { GetFileNodesResponse } from "@figma/rest-api-spec";
 import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import {
-  createRestNormalizer,
-  generateCode,
-  generateFigmaSummary,
-  getFigmaColorVariableNames,
-} from "@seed-design/figma";
+import { createRestNormalizer, getFigmaColorVariableNames, react, figma } from "@seed-design/figma";
 import { z } from "zod";
+import type { McpConfig } from "./config";
 import {
   formatErrorResponse,
   formatImageResponse,
@@ -14,8 +11,18 @@ import {
 } from "./responses";
 import type { FigmaWebSocketClient } from "./websocket";
 
-export function registerTools(server: McpServer, figmaClient: FigmaWebSocketClient): void {
+export function registerTools(
+  server: McpServer,
+  figmaClient: FigmaWebSocketClient,
+  config: McpConfig | null = {},
+): void {
   const { joinChannel, sendCommandToFigma } = figmaClient;
+  const { extend } = config ?? {};
+
+  const figmaPipeline = figma.createPipeline();
+  const reactPipeline = react.createPipeline({
+    extend,
+  });
 
   // join_channel tool
   server.tool(
@@ -117,6 +124,46 @@ export function registerTools(server: McpServer, figmaClient: FigmaWebSocketClie
     },
   );
 
+  // Component Info Tool
+  server.tool(
+    "get_component_info",
+    "Get detailed information about a specific component node in Figma",
+    {
+      nodeId: z.string().describe("The ID of the component node to get information about"),
+    },
+    async ({ nodeId }) => {
+      try {
+        const result = (await sendCommandToFigma("get_node_info", {
+          nodeId,
+        })) as GetFileNodesResponse["nodes"][string];
+
+        const node = result.document;
+        if (node.type !== "COMPONENT" && node.type !== "COMPONENT_SET") {
+          return formatErrorResponse(
+            "get_component_info",
+            new Error(`Node with ID ${nodeId} is not a component node`),
+          );
+        }
+
+        const key = result.componentSets[nodeId]?.key ?? result.components[nodeId]?.key;
+        if (!key) {
+          return formatErrorResponse(
+            "get_component_info",
+            new Error(`${nodeId} is not present in exported component data`),
+          );
+        }
+
+        return formatObjectResponse({
+          name: node.name,
+          key,
+          componentPropertyDefinitions: node.componentPropertyDefinitions,
+        });
+      } catch (error) {
+        return formatErrorResponse("get_node_info", error);
+      }
+    },
+  );
+
   // Node Info Tool
   server.tool(
     "get_node_info",
@@ -131,13 +178,13 @@ export function registerTools(server: McpServer, figmaClient: FigmaWebSocketClie
         const node = normalizer(result.document);
 
         const original =
-          generateFigmaSummary(node, {
+          figmaPipeline.generateCode(node, {
             shouldPrintSource: true,
             shouldInferVariableName: false,
             shouldInferAutoLayout: false,
           }) ?? "Failed to generate summarized node info";
         const inferred =
-          generateFigmaSummary(node, {
+          figmaPipeline.generateCode(node, {
             shouldPrintSource: true,
             shouldInferVariableName: false,
             shouldInferAutoLayout: true,
@@ -175,13 +222,13 @@ export function registerTools(server: McpServer, figmaClient: FigmaWebSocketClie
             const node = normalizer(result.document);
 
             const original =
-              generateFigmaSummary(node, {
+              figmaPipeline.generateCode(node, {
                 shouldInferVariableName: false,
                 shouldPrintSource: true,
                 shouldInferAutoLayout: false,
               }) ?? "Failed to generate summarized node info";
             const inferred =
-              generateFigmaSummary(node, {
+              figmaPipeline.generateCode(node, {
                 shouldInferVariableName: true,
                 shouldPrintSource: true,
                 shouldInferAutoLayout: false,
@@ -217,7 +264,7 @@ export function registerTools(server: McpServer, figmaClient: FigmaWebSocketClie
         const normalizer = createRestNormalizer(result);
 
         const code =
-          generateCode(normalizer(result.document), {
+          reactPipeline.generateCode(normalizer(result.document), {
             shouldInferVariableName: true,
             shouldPrintSource: false,
             shouldInferAutoLayout: true,